Create multiple Jquery dialog box in asp.net

Question

I am trying to create multiple dialog box and some how i am not able to understand how to create those dialog boxes.

I have DIV's for each dialog box which has a message for every action. Basically if user check the CheckBox then dialog appears saying that you want to confirm this action. And after some time if user again uncheck that CheckBox then another dialog appears with the diff message. Please help me with this one.

Here is what i have got so far.

===============

HTML

<div id="dialog-isReceived" title="Mark as Received?">
    Are you sure you want to mark this order as "Received"? <br />
    The customer will receive an email confirming their order is ready for collection.
</div>
<div id="dialog-notReceived" title="Mark as Not Received?">
    Are you sure you want to mark this order as "Not Received"? <br />
</div>

Jquery

var isReceivedCheckBox = $('.isReceivedCheckBox input[type=checkbox]');
var dialogId; //trying to pass the Id of the div dynamically BUT not working 
var result;
$(document).ready(function () {
$(dialogId).dialog(
  {
        autoOpen: false,
        width: 300,
        height: 200,
        resizable: false,
        modal: false,
        buttons: {
              "Confirm": function () {
                    result = true;
              },
              Cancel: function () {
                    result = false;
                    $(this).dialog("close");
              }
        },
  });
});

=====================

CODE that i want to execute

$(document).on("change",isReceivedCheckBox, function () {
var checked = $(this).is(':checked');
if (checked) {
  dialogId = "'#dialog-isReceived'"; //setting the DIV ID here and hoping that dialog will appears.
  $(dialogId).dialog('open');
  if(!result)
        $(this).attr("checked", false); // if user clicks cancel on dialog then do not check the checkbox
} else {
    dialogId = "'#dialog-notReceived'";
    $(dialogId).dialog('open');
  if(!result)
        $(this).attr("checked", true); //if user clicks cancel on dialog then do not uncheck the checkbox because it was checked previously
}
});

the problem here is dialog never appears because when the page loads all my div are are visible as i am not able to set the dialogID variable on page load. Also i have atleast 5 dialogs on this page doing same functionality. If you can suggest better approach or tell me what i am doing wrong here would be great and appreciated.

thanks, Milan P

Why dont you keep a single div and a dialog and change the content at dynamically ? — Kris
– Kris, Commented Feb 19, 2013 at 10:55
Just create a dialog and as per your condition set the content using $( "#id_of your_dialog" ).html("THE CONTENT YOU WANT TO DISPLAY"); — Kris
– Kris, Commented Feb 19, 2013 at 11:09

cernunnos · Accepted Answer · 2013-02-19 11:20:01Z

1

Another possible problem with your approach is that jQuery dialog is async, this means that the conditional

if(!result)

will be evaluated long before your user has time to confirm or cancel the dialog. If what you want is to mimic the behavior of the javascript confirm using dialogs youll need to use jQuery Deferred object. Also, i would suggest creating and destroying the dialog as needed, something like:

function confirmDialog(msg) {
    var dialog = $("<div>"+msg+"</div>");
    var def = $.Deferred();

    $(dialog).dialog({
        autoOpen: true,
        width: 300,
        height: 200,
        resizable: false,
        modal: false,
        buttons: {
            'Confirm': function() {
                def.resolve();
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                def.reject();
                $( this ).dialog( "close" );
            }
        },
        close: function () {
            if (def.state() === "pending") {
                def.reject(); // Make sure unanswered dialog rejects
            }

            $( this ).remove();
        }
    });
    return def.promise();
}

And then call it like this:

confirmDialog("are your sure?").done(function() {
    // He/She said yes
}).fail(function() {
    // He/She said no
});

Read more on jQuery Deferred here http://api.jquery.com/category/deferred-object/

Fiddle: http://jsfiddle.net/fGQTj/

Edit: fixed code, added fiddle

edited Feb 19, 2013 at 11:20

answered Feb 19, 2013 at 10:57

cernunnos

2,7961 gold badge21 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

patel.milanb Over a year ago

Looks like you hit the right rock here... let me try this and i will also have a look at the link you provided for more info. +1 for dynamically generating the DIV's... Ohhhh i love Jquery...#

cernunnos Over a year ago

Fixed the missing "function ()" on close, added a fiddle.

patel.milanb Over a year ago

Hi @cernunnos: i have tried this BUt somehow its not working. can you see this Fiddle for me please, Also i have to click twice on button to close the dialog. jsfiddle.net/patelmilanb1/ka8W8

cernunnos Over a year ago

@patel.milanb the jquery on that fiddle was getting an exception on the toLowerCase function, fixed your fiddle with some minor improvements (this.checked instead of $(this).is(":checked")): jsfiddle.net/ka8W8/5 PS: You may want to try to figure out why your fiddle account was having trouble with the toLowerCase javascript function :)

cernunnos Over a year ago

Oh sorry, didn't read the confirm messages, try jsfiddle.net/ka8W8/10 The most important change is the "var that = this" outside of the dialog, since inside the context changes ("this" will no longer refer to the checkbox). Note that you can remove the whole .done() block if you don't need it.

|

Collectives™ on Stack Overflow

Create multiple Jquery dialog box in asp.net

HTML

Jquery

CODE that i want to execute

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Jquery

CODE that i want to execute

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related