更新:对不起,错过了对话是部分你最关心的。最后请参阅特定于对话框的添加。
原来的答复:
从一个变量的HTML加载到一个元素,可以使用html
功能:
var markup = "This is <strong>HTML</strong>";
$("#targetElement").html(markup);
因此,如果您加载通过AJAX该标记,可能是:
$.ajax({
url: "your.url",
success: function(data) {
$("#targetElement").html(data);
},
error: function() {
// ... deal with error ...
}
});
如果你真的只是抢占了所有的内容有,这就是你所用的load
功能的作用:
$("#targetElement").load("your.url");
...但如果你想先做些别的事情吧,用ajax
。
例如,假设您使用JSON表示法从服务器加载一些数据。假设数据是这样的:对于对话框
$.ajax({
url: "http://jsbin.com/urebu5",
dataType: "json",
success: function(data) {
// Use the de-serialized object's properties
// to append HTML to the body
$("<p>").html(data.foo).appendTo(document.body);
$("<p>").html(data.bar).appendTo(document.body);
},
error: function(xhr, statusText, ex) {
$("<p>Error running <tt>ajax</tt> call</p>").appendTo(
document.body
);
}
});
Live example
更新:
{
"foo": "I'm the foo value",
"bar": "I'm the bar value"
}
你可以做到这一点
由于jQuery UI的对话框只使用元素作为基础,上面的ap层数它们为好,这里是一个例子假设对话框元素具有id
值“模式,对话”和最初是隐藏的(见下文从头开始创建对话框):
function showDialog(content) {
// Get the dialog element
var dlgElement = $("#modal-dialog");
// Update the dialog with the content
dlgElement.find('p:first').html(content);
// Show it
dlgElement.dialog({
height: 140,
modal: true
});
}
因此,使用从我们ajax
拨打以上:
// Load our content
$.ajax({
url: "http://jsbin.com/urebu5",
dataType: "json",
success: function(data) {
// Show the 'foo' part of the data
showDialog(data.foo);
},
error: function(xhr, statusText, ex) {
// Show the error
showDialog("Error running <tt>ajax</tt> call");
}
});
Live example
如果要从头开始创建对话框,只需创建的元素,然后一定要删除它们完成时:
function createDialog(title, content) {
// Create our dialog structure
return $("<div>")
.css("display", "none")
.attr("title", title)
.html("<p>" + content + "</p>")
.appendTo(document.body);
}
function showDialog(dlg, destroy) {
var opts = {
height: 140,
modal: true
};
if (destroy) {
opts.close = function(event, ui) {
$(this).remove();
};
}
dlg.dialog(opts);
}
用途:
// Load our content
$.ajax({
url: "http://jsbin.com/urebu5",
dataType: "json",
success: function(data) {
// Create a dialog using 'foo' part of the data
var dlg = createDialog("Foo Data", data.foo);
// Show it
showDialog(dlg, true);
},
error: function(xhr, statusText, ex) {
// Create a dialog using 'foo' part of the data
var dlg = createDialog(
"Foo Data - Error",
"Error running <tt>ajax</tt> call"
);
// Show it
showDialog(dlg, true);
}
});
Live example
感谢答复.. – Parag 2011-02-11 06:22:20