returning value to a function in jquery dialog

问题

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>

回答1:

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

来源：https://stackoverflow.com/questions/18461051/returning-value-to-a-function-in-jquery-dialog

标签

jquery

dialog