javascript jQuery UI 对话框问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11646397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI dialog issue
提问by Helgus
I'm trying to create jquery dialog, but there is no use :( here is my jQuery code:
我正在尝试创建 jquery 对话框，但没有用:( 这是我的 jQuery 代码：
$(document).ready(function() {
createDialog();
});
function createDialog() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-form").dialog(
{
autoOpen : false,
height : 475,
width : 350,
modal : true,
buttons : {
"submit" : function() {
var bValid = true;
allFields.removeClass("ui-state-error");
postText();
$(this).dialog("close");
}
},
cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$(".add-org").click(function() {
$("#dialog-form").dialog("open");
});
}
here is html code:
这是html代码：
<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/myScript.js'/>"></script>
<a href="javascript:void(0)" class="add-org">New </a>
<div id="dialog-form" title="Add New ">
<p class="validateTips">All form fields are required.</p>
<form>
..................
</form>
</div>
and firebug says:
和萤火虫说：
TypeError: $("#dialog:ui-dialog").dialog is not a function
$("#dialog:ui-dialog").dialog("destroy");
TypeError: $("#dialog:ui-dialog").dialog 不是函数
$("#dialog:ui-dialog").dialog("销毁");
and on my page I see all the fields from the form. so what is my problem?
在我的页面上，我看到了表单中的所有字段。那么我的问题是什么？
回答by Tats_innit
Try this: Working demohttp://jsfiddle.net/kEZkh/
试试这个：工作演示http://jsfiddle.net/kEZkh/
Not sure if your source path are correct please include following scripts.
不确定您的源路径是否正确，请包含以下脚本。
rest please feel free to play around with demo & hope it helps the cause :)
休息请随意玩演示并希望它有助于事业 :)
scripts
脚本
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
code
代码
$("#forgot").click(function(e){
$("#dialog-form").dialog("open");
e.preventDefault();
});
$("#dialog-form").dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Retrieve": function() {
document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
?
回答by Wolfram
Check in Firebug/DevTools if the script file was loaded successfully. If it is, type this into the console (Firebug, DevTools) or better, put that line where your other code is executed:
如果脚本文件加载成功，请检查 Firebug/DevTools。如果是，请在控制台（Firebug、DevTools）或更好的情况下键入以下内容，将该行放在执行其他代码的位置：
console.debug(jQuery.ui)
If it shows undefined, then jQuery UI was not loaded (yet).Check if your code runs before everything was loaded, put it inside jQuery's $(document).ready();. If it is an object, inspect it and check for the dialogproperty.
如果显示undefined，则 jQuery UI 尚未加载（尚未加载）。检查您的代码是否在加载所有内容之前运行，将其放入 jQuery 的$(document).ready();. 如果它是一个对象，检查它并检查dialog属性。
If you configured a custom build on jqueryui.com, doublecheck if you included the dialog widget.
如果您在jqueryui.com上配置了自定义构建，请仔细检查您是否包含对话框小部件。
回答by Alnitak
The destroycall should be on the same element as you already used when you created the dialog, not the .ui-dialogcontainer that gets wrapped around your content:
该destroy呼叫应该是相同的元素，当你创建的对话，而不是因为你已经使用.ui-dialog的是被周围的内容包装的容器：
$("#dialog-form").dialog('destroy');
Since your current code is throwing an exception, the subsequent lines which are supposed to create the dialog never get called.
由于您当前的代码抛出异常，因此应该创建对话框的后续行永远不会被调用。
If you want to destroy everydialog that might already be open, jQuery UI handily puts a .ui-dialog-contentclass on each content div:
如果你想销毁每个可能已经打开的对话框，jQuery UI 会很方便地.ui-dialog-content在每个内容 div 上放置一个类：
$('.ui-dialog-content').dialog('destroy');
