UI Dialog 中使用 AJAX 装载内容

本文介绍如何使用jQuery UI Dialog组件结合Ajax动态加载内容。通过两种Ajax调用方式实现dialog内容的异步加载,并展示了dialog的初始化配置示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如何在显示 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');
    }
   }
  });
 

本文来自优快云博客,转载请标明出处:http://blog.youkuaiyun.com/ydmdzq_helloworld/archive/2010/10/13/5938343.aspx

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值