100分，关于easyui dialog 使用href来加载远程页面，子页面的初始化问题，有简单错误demo

LinuxCard 2015-10-01 02:10:40

母页面：



<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Basic Dialog - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="../demo.css">

	<script type="text/javascript" src="../../jquery.min.js"></script>

	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

	  <script type="text/javascript">

function opendlg()

{



            $('#dlg').dialog({    

                title: '合并',   

                width: "80%",  

                height: 600,    

                closed: true,    

                cache: false,    

                href: 'child.html',    

                modal: false,

           

                onLoad: init_merge_dialog()

            });

            console.log("11");

            $("#dlg").dialog("open");

            console.log("22");

}

		

		

		function init_merge_dialog()

		{

		

		     console.log("1");

            //$.parser.parse('#tb_merge');



            $('#txtInStockTime11').datebox('setValue', '2015-09-01');

			

		}

		

		</script>

</head>

<body>

	<h2>Basic Dialog</h2>

	<p>Click below button to open or close dialog.</p>

	<div style="margin:20px 0;">

		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="opendlg()">Open</a>

	</div>

	<div id="dlg" ></div>

</body>

</html>

子页面：





<div id="tb_merge" style="padding: 5px 0">

    <input id="txtInStockTime11" name="txtInStockTime11" class="easyui-datebox" />

</div>

母页面的功能就是弹出一个dialog,这个dialog的href就是child.html

现在的程序的样子是这样的：

OnLoad中的代码执行了，但是没有在界面上显示出来日期，请问是那里的问题呢？

这个问题纠结了一天了，一直没找到好的方法解决

...全文

1053 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

Hello World, 2015-10-09

打赏
举报

需要等待加载完成并生成DOM时才可以赋值，用循环是正确的。并且在cache=false时重新打开对话框时需要再次赋值，这块需要处理


	<script type="text/javascript">
		function opendlg()
		{
		  $('#dlg').dialog({    
						title: '合并',   
						width: 580,  
						height: 200,    
						closed: true,    
						cache: false,    
						href: 'child.html',    
						modal: false,
					
						onLoad: function(){
							//alert('Fires when remote data is loaded.');
							init_merge_dialog(0);
						},
						onOpen:function(){
							//alert('Fires after panel is opened.');
						},
						onBeforeOpen:function(){
							//alert('Fires before panel is opened, return false to stop the open.');
							//如果不清除，重新打开对话框时不能赋值(cache=false时)
							document.getElementById('dlg').innerHTML='';
						}
					});
					$("#dlg").dialog("open");
		}
		function init_merge_dialog(n)
		{
			//需要等待加载并生成DOM后才执行赋值
			if(document.getElementById('txtInStockTime11')){
				$('#txtInStockTime11').datebox('setValue', '9/1/2015');
			}else{
				//控制循环次数，避免加载错误时死循环
				if(n<5){
					n++;
					setTimeout('init_merge_dialog('+n+')',200);	//重复调用
				}
			}
		}		
	</script>

Go 旅城通票 2015-10-08

打赏
举报

你是立即执行init_merge_dialog将返回值作为onLoad的处理函数，那时ajax都没发送列，当然找不到对象

onLoad: init_merge_dialog////////////////////////////()

NANU-NANA 2015-10-08

打赏
举报

不好意思，这个easyui我没用过。也许你可以尝试在child.html上添加比如onload之类的操作。

LinuxCard 2015-10-02

打赏
举报

引用 8 楼 u010087908 的回复:

这是一个timing problem。你这里的onload指的是dialog，不是child.html。所以在你执行init_merge_dialog()，也就是给datebox赋值的时候，input还未加载。你可以通过
		function init_merge_dialog()
		{
		setTimeout(function(){
		console.log($('#txtInStockTime11'));
$('#txtInStockTime11').datebox('setValue', '9/1/2015');
}, 3000);
			console.log($('#txtInStockTime11'));
            //$('#txtInStockTime11').datebox('setValue', '9/1/2015');
		}
清楚的看到差别。

谢谢你的意见，我也觉得是这个问题，那么有什么好的解决方案吗？用setetimeout总觉得不是一个靠谱的方案

NANU-NANA 2015-10-02

打赏
举报

这是一个timing problem。你这里的onload指的是dialog，不是child.html。所以在你执行init_merge_dialog()，也就是给datebox赋值的时候，input还未加载。你可以通过

		function init_merge_dialog()
		{
		setTimeout(function(){
		console.log($('#txtInStockTime11'));
$('#txtInStockTime11').datebox('setValue', '9/1/2015');
}, 3000);
			console.log($('#txtInStockTime11'));
            //$('#txtInStockTime11').datebox('setValue', '9/1/2015');
		}

清楚的看到差别。

LinuxCard 2015-10-02

打赏
举报

引用 5 楼 u010087908 的回复:

http://jsfiddle.net/etqsat3f/2/ 这是我在jsfiddle上测试的，没有任何问题，可以赋值和取值。

我把错误的demo传上来了，文件在demo\demo\dialog\mother.html 打开直接运行就可以了，谢谢！ demo在此，直接下载即可

LinuxCard 2015-10-02

打赏
举报

引用 5 楼 u010087908 的回复:

http://jsfiddle.net/etqsat3f/2/ 这是我在jsfiddle上测试的，没有任何问题，可以赋值和取值。

谢谢，不过你可能没有理解我的意思，我的意思是，赋值语句$('#txtInStockTime11').datebox('setValue', '9/1/2015');是没问题的，但是现在的环境是当dialog加载子页面的时候，这句代码就会失效，语句没有报错，但就是没有效果，而这句代码在console里直接输入，是有效果的

NANU-NANA 2015-10-01