将值返回到jquery对话框中的函数 [英] returning value to a function in jquery dialog
本文介绍了将值返回到jquery对话框中的函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< HEAD>
< link rel =stylesheethref =http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css/>
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script>
< script src =http://code.jquery.com/ui/1.10.3/jquery-ui.js>< / script>
< / head>
< body>
< a href =javascript：checkvisible（0）>打开框< / a>
< div id =dialog>
< p>这是用于显示信息的默认对话框。可以使用x图标移动，调整大小并关闭对话窗口。< / p>
< / div>
< / body>
< script type =text / javascript>
var val = $（'＃dialog'）。dialog（{autoOpen：false，buttons：{
OK：function（）{
$（this）.dialog ）;
return true;
}，
cancel：function（）{
$（this）.dialog（close）;
return false ;
}
}}）;
函数openTo（Id_，width_）{
var divId = $（'＃'+ Id_）;
divId.dialog（'option'，'width'，parseInt（width_））;
divId.dialog（'option'，'show'，'clip'）;
divId.dialog（'option'，'hide'，'clip'）;
divId.dialog（'option'，'zIndex'，1000）;
divId.dialog（'open'）;
}
function showbox（）{
openTo（'dialog'，200）
}
函数checkvisible（notes）{
if（notes）{
// do something
}
else {
var procees = showbox（）;
if（procees）{
alert（'ok'）
}
else {
alert（'cancelled）
}
}
}
< / script>
< / html>
解决方案
对话窗口小部件异步工作，所以你不会得到从它返回的任何值。解决方案是使用自定义事件处理程序和回调
jQuery（function（$）{
var val = $ '#dialog'）对话框（{
autoOpen：false，
按钮：{
OK：function（）{
$（this）.dialog（close ）;
$（this）.trigger（'confirm'）;
}，cancel：function（）{
$（this）.dialog（close）;
$（this）.trigger（'cancel'）;
}
}
}）;
}）
函数openTo（Id_，width_，okCallback，cancelCallback）{
var divId = $（'＃'+ Id_）;
divId.dialog（'option'，'width'，parseInt（width_））;
divId.dialog（'option'，'show'，'clip'）;
divId.dialog（'option'，'hide'，'clip'）;
divId.dialog（'option'，'zIndex'，1000）;
divId.dialog（'open'）。off（'confirm cancel'）。on（'confirm'，okCallback）.on（'cancel'，cancelCallback）;
}
函数showbox（okCallback，cancelCallback）{
openTo（'dialog'，200，okCallback，cancelCallback）
}
函数checkvisible（note）{
if（notes）{
// do something
} else {
showbox（function（）{
alert（'ok'）
}，function（）{
alert（'cancelled）'
}）;
}
}
演示：小提琴
I am using jquery dialog box jquery. I have some condition in function. I have prepaid a demo similar like actual code it is working on local but however not working in the fiddle. What i want is when user click 'open box' then based on user selection we alter accordingly. But the problem is when user is clicking 'open box' is altering massage. It is not waiting till the user choose his selection. I want to do with function wait till user select his option then alert. fiddle
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<a href="javascript:checkvisible(0)">open box</a>
<div id="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>
</body>
<script type="text/javascript">
var val= $('#dialog').dialog({autoOpen: false, buttons: {
"OK": function () {
$(this).dialog("close");
return true;
},
"cancel": function () {
$(this).dialog("close");
return false;
}
}});
function openTo(Id_, width_) {
var divId = $('#' + Id_);
divId.dialog('option', 'width', parseInt(width_));
divId.dialog('option', 'show', 'clip');
divId.dialog('option', 'hide', 'clip');
divId.dialog('option', 'zIndex', 1000);
divId.dialog('open');
}
function showbox (){
openTo('dialog',200)
}
function checkvisible(notes){
if(notes){
// do something
}
else {
var procees= showbox();
if(procees){
alert('ok')
}
else {
alert('cancelled')
}
}
}
</script>
</html>
解决方案
The dialog widget work asynchronously, so you will not get any value returned from it. The solution is to use custom event handlers and callbacks
jQuery(function ($) {
var val = $('#dialog').dialog({
autoOpen: false,
buttons: {
"OK": function () {
$(this).dialog("close");
$(this).trigger('confirm');
}, "cancel": function () {
$(this).dialog("close");
$(this).trigger('cancel');
}
}
});
})
function openTo(Id_, width_, okCallback, cancelCallback) {
var divId = $('#' + Id_);
divId.dialog('option', 'width', parseInt(width_));
divId.dialog('option', 'show', 'clip');
divId.dialog('option', 'hide', 'clip');
divId.dialog('option', 'zIndex', 1000);
divId.dialog('open').off('confirm cancel').on('confirm', okCallback).on('cancel', cancelCallback);
}
function showbox(okCallback, cancelCallback) {
openTo('dialog', 200, okCallback, cancelCallback)
}
function checkvisible(notes) {
if (notes) {
// do something
} else {
showbox(function(){
alert('ok')
}, function(){
alert('cancelled')
});
}
}
Demo: Fiddle
这篇关于将值返回到jquery对话框中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
