UI Dialog 中使用 AJAX 装载内容

如何在显示 jQuery UI Dialog 中，以 ajax 方式调入 dialog 中显示的内容呢?

 

一种格式是：

 

Js代码

1. $( "#myDialog" ).load( openUrl, postData ,  
2.     function  (responseText, textStatus, XMLHttpRequest) {  
3.         $("#myDialog" ).dialog( 'open' );   // 打开对话框   
4.     }  
5. );  

	$("#myDialog").load( openUrl, postData ,
		function (responseText, textStatus, XMLHttpRequest) {
			$("#myDialog").dialog('open');	// 打开对话框
		}
	);

 

另一种 ajax 调用格式则是：

Js代码

1. $.ajax({ type:  "POST" , url: openUrl , data: jsonPostData,   
2.     success: function (html,textStatus, XMLHttpRequest){  
3.         $("#myDialog" ).html(html).dialog( 'open' );     
4.     }  
5. });  

	$.ajax({ type: "POST", url: openUrl , data: jsonPostData, 
		success: function(html,textStatus, XMLHttpRequest){
			$("#myDialog").html(html).dialog('open');	
		}
	});

 

其实，这只是jQuery 的 ajax 调用的两种方式，与 dialog 无关。

 

至于 dialog 的初始化工作，则需要在之前进行，比如：

 

Js代码

1. jqDialog.dialog({  
2.     bgiframe: true ,  
3.     autoOpen: false ,  
4.     resizable: false ,  
5.     width:650,  Height:500,  
6.     modal: true ,  
7.     overlay: {  backgroundColor: '#000' , opacity: 0.5   },  
8.     close: function () { ...  },  
9.     open:  function () {  ... },  
10.     buttons: {  
11.         '选定当前记录' :  function () {... },  
12.         '取消' :  function () {   
13.             $(this ).dialog( 'close' );  
14.         }  
15.     }  
16. });  

		jqDialog.dialog({
			bgiframe: true,
			autoOpen: false,
			resizable: false,
			width:650,	Height:500,
			modal: true,
			overlay: {	backgroundColor: '#000', opacity: 0.5	},
			close: function() {	...  },
			open:  function() {	 ... },
			buttons: {
				'选定当前记录': function() {... },
				'取消': function() { 
					$(this).dialog('close');
				}
			}
		});

 

 

 

 

可参考：

 

jquery-ui dialog with ajax how to avoid a common error

 

JQuery.UI Dialog & $().load() & JavaScript