您的位置：首页 > 其它

用thickbox弹出一个层 ,该层上有Button 怎样触发它的后台OnClick 事件，问题已解决

2009-09-26 11:51 483 查看

各位兄弟们，这个问题在下昨晚终于研究出来了，主要问题出在于thickbox.js的工作原理上，请参见我的分析:

众所周知，asp.net 所有的控件必需放在有 runat="server"的form之内，而thickbox它所创建的层是嵌入在<body>中，从它代码可以看出来$("body").append(...)，而当你在调用thickbox的时候，它会将你指定的元素的所有子元素移动到它定义的结构里面，这样的话就出问题了，移动后的元素将不在<form runat="sever"></form>中，那么指定元素里的所有服务器控件都将无法执行后台代码。

这就是根本的原因，口说无凭，上代码：

为了解决这个问题，我将thickbox.js做了一点改写

//这部分是处理内嵌元素如div得层

if(url.indexOf('TB_inline') != -1){

$("#TB_ajaxContent").append($('#' + params['inlineId']).children());

$("#TB_window").unload(function () {

$('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished

//////////////////////////////////////////////////

var w = window.open("");                             //我在unload事件中加了这么一段，在thickbox层关闭的时候

w.document.write($("body").html())           //可以看到及时的html代码，便于分析。

/////////////////////////////////////////////////

});

tb_position();

$("#TB_load").remove();

$("#TB_window").css({display:"block"});

之后我将我试验的页面调用thickbox层前后代码做了一下对比，问题马上就显露出来了。

这是没调用thickbox前的页面代码：

<body>

<form name="form1" method="post" action="test.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUyOTk4NzMzNGRkXZ2aBMh7Y3LqGDuOzjGe78hKwqM=" />

</div>

<a class="thickbox" href="#TB_inline?height=250&width=300&inlineId=addition">点击</a>

<div id="addition" style="padding: 10px;">

<!-- 服务器控件在 form1 中 -->

<input type="submit" name="Button1" value="Button" id="Button1" />

<span id="additionmsg"></span>

</div>

</div>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLg1uzeBwKM54rGBv4IX/cq3uLngRgxs8TJaKHpiJpW" />

</form>

</body>

这是调用thickbox后的代码：

<body>

<form name="form1" method="post" action="test.aspx" id="form1">

<div>

<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUyOTk4NzMzNGRkXZ2aBMh7Y3LqGDuOzjGe78hKwqM=" type="hidden">

</div>

<a class="thickbox" href="#TB_inline?height=250&width=300&inlineId=addition">点击</a>

<div id="addition" style="padding: 10px;">

<input name="Button1" value="Button" id="Button1" type="submit"><span id="additionmsg"></span></div>

<input name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLg1uzeBwKM54rGBv4IX/cq3uLngRgxs8TJaKHpiJpW" type="hidden">

</div></form>

<!--很显然这部分是thickbox添加的层，在调用的时候我的__div id="addition" style="padding: 10px;"__  里的所有元素都将被添加到这儿来，而这部分是在form之外的，从而导致服务器控件失效。-->

<div class="TB_overlayBG" id="TB_overlay"></div><div style="margin-left: -165px; width: 330px; margin-top: -145px; display: none;" id="TB_window"><div id="TB_title"><div id="TB_ajaxWindowTitle"></div><div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton">close</a></div></div><div id="TB_ajaxContent" style="width: 300px; height: 245px;"></div></div></div>

</body>

原因找到了，如何解决呢，只需要吧thickbox里的$("body").append()改为$("#selector").append()，这个#selector只要在form1之中，或者将$("body").append()改为$("body form").append()或者$("body").find("form").append()大概就这意思，写法很多。问题得到圆满的解决，而且在FF IE6中均显示正常……

[powerby:xymbtc]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航