CODEWITHSUNDEEP
javascriptjqueryjquery-ui
G Duggan
G Duggan

Reputation: 28

Jquery UI Dialog Dynamic Function With Passed Parameters

I am trying to build a generic function that I can invoke from anywhere in the application by passing custom parameters to the jQuery UI confirmation dialog. I have been searching and trying different things but the following is the logic I would like to use. What am I doing wrong? Any help is much appreciated.

Here is the function:

function popDialog(h, w, deny_btn, confirm_btn, confirm_title, confirm_message, deny_action, confirm_action) {
  var newDialog = $('<div id="dialog-confirm">\
      <p>\
        <span class="ui-icon ui-icon-alert" style="float: left;margin: 0 7px 60px 0;"></span>\
        ' + confirm_message + '\
      </p>\
    </div>');
  newDialog.dialog({
    resizable: false,
    height: h,
    width: w,
    modal: true,
    autoOpen:false,
    title: confirm_title,
    buttons: [
      {text: deny_btn: click: function() {deny_action}},
      {text: confirm_btn: click: function() {confirm_action}}
    ]
  });

}

Here is the call:

$("#cancel").click(function(e) {
    popDialog("210", // height
              "350", // width
              "No",  // deny_btn
              "Yes", // confirm_btn
              "Confirm Cancel", // confirm_title
              "Are you sure you would like to cancel? Changes will not be saved.", // confirm_message
              $('#dialog-confirm').dialog('close'), // deny_action
              window.location = '/some/location/index/<?= $class->getClassid() ?>'); //confirm_action


});

Upvotes: 0

Views: 1752

Answers (3)

Jeff Escalante
Jeff Escalante

Reputation: 3167

So there are a number of issues with this, and I think the best way to tackle them all would be a small refactor. I put the code into jsfiddle for testing and tinkering, and here's what came out:

http://jsfiddle.net/BDh2z/1/

Code is reproduced below:

function popDialog(opts) {
  var newDialog = $('<div id="dialog-confirm"><p>'+opts.message+'</p></div>');

  if (!$('#dialog-confirm').length){ $('body').append(newDialog); }

  newDialog.dialog({
    resizable: false,
    modal: true,
    title: opts.title,
    height: opts.height,
    width: opts.width,
    buttons: opts.buttons
  });

};

So above is the new function definition. Things simplified a good amount. Let's go over the changes:

  • function accepts a options object rather than a bunch of args for clarity
  • modal html is more simple and clear
  • autoOpen: false removed, as this prevents the modal from opening without an open() call
  • button syntax was completely borked in your example, fixed that up and delegated the buttons object to the call, their syntax is quite clean anyway.
  • actually adds the modal to the html, but only adds it once

Now here's the call:

popDialog({
  width: 300,
  height: 150,
  title: 'testing modal',
  message: 'look it worked!',
  buttons: {
    cancel: function(){ $(this).dialog('close') },
    confirm: function(){ $(this).dialog('close') }
  }
});

Much cleaner here and easier to understand, mostly because of the fact that we now accept an object rather than a bunch of args. The only issue I found was a weird fluke where jquery UI seems to be collapsing the content section, so I dropped an ugly fix for that in the css of the jsfiddle. This seems to be an issue with jquery UI, but I'll continue to look into it.

This is totally functional in the jsfiddle and looking nice, let me know if there's anything confusing here or if this doesn't exactly solve your issue : )

Upvotes: 1

Hamza Kubba
Hamza Kubba

Reputation: 2269

Just to explain the multi-line problem (can't with comments, but can with answers):

var bad = 'Invalid
syntax';

--

var good = 'Valid' +
'syntax';

Upvotes: 0

Hamza Kubba
Hamza Kubba

Reputation: 2269

I think the problem is that you are passing the return value of: $('#dialog-confirm').dialog('close') and window.location = '/some/location/index/<?= $class->getClassid() ?>' to your popDialog function. You want to do this instead:

Function:

buttons: [
  {text: deny_btn, click: deny_action},
  {text: confirm_btn, click: confirm_action}
]

Call:

$("#cancel").click(function(e) {
popDialog("210", // height
          "350", // width
          "No",  // deny_btn
          "Yes", // confirm_btn
          "Confirm Cancel", // confirm_title
          "Are you sure you would like to cancel? Changes will not be saved.", // confirm_message
          function() { $('#dialog-confirm').dialog('close') }, // deny_action
          function() { window.location = '/some/location/index/<?= $class->getClassid() ?>') }; //confirm_action

});

That way you are passing functions to popDialog, and not values.

Upvotes: 0

Related Questions