yii与独立load和dialog

一、Yii与独立load请求
load(url, [data], [callback])

概述：
载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。


参数：
url String 待装入 HTML 网页网址。
data (可选)Map,String 发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback (可选)Callback 载入成功时回调函数。


示例：
1，加载 feeds.html 文件内容。
$("#feeds").load("feeds.html");

2，同上，但是以 POST 形式发送附加参数并在成功时显示信息。
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});


二、jquery dialog
官方地址：http://jqueryui.com/demos/dialog/
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>


<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


三、在yii中，将load与dialog结合起来，实现弹出对话框
1，简单对话框（只展示）

$(".wait_man_btn1").click(function(){
	var _self = this;
	var id = $(this).attr("name");

	var url = OMS.baseUrl + "?r=failParts/showFailInfoDetail";
	var wait_man_btn1_div = $("#wait_man_btn1_div").length == 0 ? $("<div id='wait_man_btn1_div'></div>").appendTo("body") : $("#wait_man_btn1_div");

	$("body").showLoading();
	wait_man_btn1_div.load(url, {"repair_info_id": id}, function(){
		$("body").hideLoading();

		$(this).dialog({
			title: "该报修邮件（id=" + $(_self).attr("name") + "）包含的故障信息详情",
			width: 800,
			close: function() {$(this).dialog('destroy').remove();}
		});
	});
});

2，复杂对话框（带表单提交）

// 发起审批动作
	$(".wait_man_btn2").click(function(){	
		var url = OMS.baseUrl + "?r=failParts/startApprove"; 
		$("<div id='start_approve_div'></div>").appendTo('body').load(url,{"repair_info_id":$(this).attr("name")},function(){
			$(this).dialog({
				title:"发起人员入室申请",
				width:650,
				buttons:{
					"取消":function(){
						$(this).dialog("close");
					},
					"确定":function(){
						if(!confirm("确定要发起入室审批吗？")){
							return false;
						}

						var repair_id = $("#apply_repair_info_id").val();

						// 机房名称
						var idc_name = $("#apply_idc_name").val();

						// 上门时间和离开时间
						var visit_time = $('#RepairInfo_visit_time').val();
						var leave_time = "";
						if( $('#RepairInfo_leave_time').val() ){
							leave_time = $('#RepairInfo_leave_time').val();
						}

						// 入室人员
						// return false;

						// 楼层
						var str="";
						$("input[name='cb_floor']:checkbox:checked").each(function(){
							str += $(this).val()+",";
						});
						str = str.substr(0, str.length-1);

						// 上门原因
						var reason = $("#apply_reason").val();

						// 备注
						var remark = $("#apply_remark").val();

						/****  post 请求  *****/
						var to_post_data = {};
						to_post_data['idc_name']       = idc_name;
						to_post_data['visit_time']     = visit_time;
						if(leave_time){
							to_post_data['leave_time'] = leave_time;
						}
						to_post_data['floors']         = str;
						to_post_data['worker']         = "jx111";
						to_post_data['reason']         = reason;
						to_post_data['remark']         = remark;
						to_post_data['repair_id']      = repair_id;

						var url2 = OMS.baseUrl + "?r=failParts/approveSubmit";

						$.post(url2, to_post_data, function(data){
							if(data.status == 0){
								// alert('恭喜，确认成功！');
								window.location.href=OMS.baseUrl+"?r=failParts/waitApproval";
							}
						},'json');
					}
				},
				close:function(){$(this).dialog('destory').remove();}
			});
		});
	});