CODEWITHSUNDEEP
jquerydialog
Jitender
Jitender

Reputation: 7969

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>

Upvotes: 0

Views: 2590

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

Related Questions