tra*_*ory 2 jquery jquery-dialog
我正在使用textarea的对话框.单击ok按钮后,textarea的值将通过ajax发送到服务器.
用户第一次写入textarea时,值被正确读取,但在所有后续操作中,发送的值与第一次相同,就像用户一遍又一遍地输入相同的字符串一样.
function message(url) {
var mydiv;
mydiv = $(document.createElement('div'));
mydiv.html("enter message: <textarea name='message' id='message'/>");
mydiv.dialog(setProps(url));
mydiv.dialog('open');
}
function setProps(url) {
return {
buttons: {
"ok": function() {
$.get('/act?url=' + url + '&message=' + $("#message").val().trim(),
function(data) {
$("#content").load('/react?url=' + url);
}
);
$(this).dialog("close");
$(this).dialog("destroy");
// If I use the following all subseq. actions are empty:
// $("#message").val('');
}
}
}
}
当你创建一个对话框,它能够在的末端附加<body>,只是因为你破坏了对话并不意味着它的元素消失,他们只是回到了自己的位置,或者在这种情况下,仍然在最后的<body>,你还需要.remove()这些元素,就像这样:
$(this).dialog("destroy").remove();
否则(当前)你每次都要添加一个新 #message元素,而你所看到的是一个经典的重复ID问题,它会得到第一个的值(你追加的第一个......从未离开).
总的来说还有一些问题,例如IE <9没有,String.prototype.trim()所以你的价值会爆炸,就像&它中的任何东西一样.让jQuery对您的值进行编码,如下所示:
function message(url) {
$("<div>enter message: <textarea name='message' id='message'></textarea></div>")
.dialog(setProps(url));
}
function setProps(url) {
return {
buttons: {
"ok": function() {
$.get('/act', { url: url, message: $.trim($("#message").val()) },
function(data) {
$("#content").load('/react?url=' + url);
}
);
$(this).dialog("destroy").remove();
}
}
}
}