CODEWITHSUNDEEP
jqueryjquery-uimodal-dialog
user984003
user984003

Reputation: 29557

Jquery dialog confirmation box: Make it appear when user clicks an element

I am trying to create a jquery dialog confirmation box. In the case below, when I click on "click for confirmation box", the dialog box should appear. This should then disappear when the user selects ok or cancel, passing the information about what button was pressed to the calling function.

I have essentially copy-pasted the code below from a separate solution with the following change: I call myConfirm from inside another function - the one called when "click for.." is clicked. I don't just want the dialog box to appear when the page is loaded (which seems to be the case of most examples I've seen). The result is that the dialog box does not appear at all. Also, if I do call myConfirm directly in the script, then it doesn't close when I press a button. I've tried "close" instead of "destroy"

html

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
</head>

<a id = "confirm"> click for confirm box</div>

script

<script>
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
        $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
            draggable: false,
            modal: true,
            resizable: false,
            width: 'auto',
            title: dialogTitle || 'Confirm',
            minHeight: 75,
            buttons: {
                OK: function () {
                    if (typeof (okFunc) == 'function') { setTimeout(okFunc, 50); }
                    $(this).dialog('destroy');
                },
                Cancel: function () {
                    if (typeof (cancelFunc) == 'function') { setTimeout(cancelFunc, 50); }
                    $(this).dialog('destroy');
                }
            }
        });
}

 $('[id=confirm]').click(function () { 
 myConfirm( 'Do you want to delete this record ?',
           function () {
                 alert('You clicked OK');
           },
        function () {
            alert('You clicked Cancel');
        },
        'Confirm Delete'
);

});
</script>

Upvotes: 0

Views: 1909

Answers (2)

user984003
user984003

Reputation: 29557

It turned out that it didn't work because of another script, which had this line containing an older js source:

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

Removing that line makes both the other thing and the dialog box work.

Also, I followed the advice by curtisk, which was good, just not enough to fix the problem.

Upvotes: 0

Jan
Jan

Reputation: 16042

I have tried your code with jsfiddle.net and it works fine.

Your mistake is that you attach the eventhandler while the document is still loading. You have to wait for the document to become ready by using the ready() event.

Also, you could simplify a bit by using the # selector for selecting your element by id:

$(document).ready(function() {
    $('#confirm').click(function () { ...
});

Another thing: Why are you starting a timer when executing the okFunc and cancelFunc? This should work without setTimeout:

OK: function () {
                   $(this).dialog('close');
                   if (typeof (okFunc) == 'function') { okFunc(); }
                },

Upvotes: 1

Related Questions