在动态加载的对话框中执行Javascript
Javascript execution in dynamically loaded dialogs
我在让javascript在对话框中正确启动方面遇到了一些问题。
以下是我当前用于加载对话框的scripts.js中的代码
function LoadDialog(url, title) {
var DialogBox = $('<div class="dialog-container"></div>').dialog({ modal: true, autoOpen: false, resizeable: true }).dialog({ width: 500, height: 'auto' });
DialogBox.html('<div class="ajax-load"><img src="/Content/loading.gif" alt="loading"></div>').dialog({ buttons: null, title: 'Loading..' });
DialogBox.dialog('open').load(url, function () {
DialogBox.dialog({ title: title, Buttons: null, position: 'center', close: function (ev, ui) { $(this).dialog("destroy"); } });
});
}
$(function () {
$('.as-dialog').click(function (e) { LoadDialog($(this).attr('href'), $(this).attr('title')); return false; });
});
尽管默认情况下对话框内不会触发javascript代码。例如,我将一个带有不引人注目的验证的小表单加载到对话框中。没有body、head等,只有一个容器div和表单本身。默认情况下,验证不起作用,如果我在script.js$(function(){})下为表单添加事件处理程序,它就不会启动。如果我添加以下js引用和代码块来加载表单,它会出现一个问题:
<script src="/Scripts/libs/jquery.validate.min.js"></script>
<script src="/Scripts/libs/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
$(function () {
$('#form_Create').submit(function (e) {
e.preventDefault();
});
});
</script>
上面代码的无效之处在于,验证始终有效,但如果我打开对话框,关闭它,然后再次打开它,preventdefault将停止工作,表单将发布。这可能是多个脚本加载问题或其他什么问题吗?不过,如果放在scripts.js中,对话框中就不会有"文档就绪"代码(尽管标准的javascript函数可以工作),所以我真的没有其他选择。有没有更好的方法在动态加载的文件中使用javascript,或者我必须将整个表单放在父页面中才能可靠地使用它们?关于你应该如何处理这个问题,有什么意见吗?
如果不是开球,小提琴确实是受欢迎的:
DialogBox.dialog({ title: title, Buttons: null, position: 'center', close: function (ev, ui) { $(this).dialog("destroy"); } });
如果我们应用一些格式并将其分解,这一行可能会出现问题:
var obj = {};
obj.title = title;
obj.Buttons = null;
obj.position = 'center';
obj.close = function(ev,ui)
{
$(this).dialog("destroy");//-->this will point to obj!!
};
DialogBox.dialog(obj);
我想你想要的是指向this
,通常被称为that
或_self
。
或者,您可以创建一个闭包,以保留对创建对象的上下文的引用:
obj.close = (function(that)
{
return function(ev,ui)
{
that.dialog("destroy");
};
})($(this));
也许这与你的问题无关,但为了安全起见:设置一个小提琴
下面打开对话框的方法似乎解决了我的主要问题:
var Box = $('#dialog-container');
if (Box.length === 0) {
Box = $('<div id="dialog-container"></div>').appendTo('body');
} else { Box.empty(); }
如果需要empty(),则不确定atm,因为负载似乎无论如何都会这样做。但有了这段代码,我可以打开对话框多少次,代码块仍然会执行。
尽管我的问题是,我是否必须从加载的页面调用一些脚本文件,或者有一种更好的方法可以从父母加载的文件中启用脚本运行。但至少现在一切似乎都很顺利。
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 在Safari执行javascript之前对其进行修改
- 如何在执行此特定onclick事件时执行JavaScript函数
- 如何在从浏览缓存加载页面时执行javascript
- 使用Rhino和ASE执行Javascript的区别
- 如何在加载完整页面后严格执行javascript代码
- 在动态加载的对话框中执行Javascript
- 在Sinatra中执行Javascript
- 通过AJAX加载页面并执行javascript和CSS
- 适用于多种浏览器的Selenium-需要能够执行javascript的webDriver
- 如何在seleniumwebdriver中执行javascript提示并等待接受输入
- 在window.open()生成的窗口中执行JavaScript
- AJAX成功回调-执行javascript时出现问题
- 通过指令在控制器中执行javascript函数
- 从React Native Android原生地执行JavaScript代码
- iframe未执行Javascript方法(PHP)
- 执行JavaScript代码,使用selenium webdriver或WatiN从控制台获取日志
- 通过web驱动程序异步执行Javascript
- 如何在长时间执行JavaScript期间显示微调器
- 点击困难时执行javascript函数