Jquery UI Dialog Dynamic Function With Passed Parameters

Question

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


});

It would help to know what problem you are currently having... are you getting errors? — Hamza Kubba
– Hamza Kubba, Commented Oct 9, 2013 at 18:28
And possibly, the problem is due to the height and width being invalid strings. Either use integers (no quotes), or "210px" and "350px". — Hamza Kubba
– Hamza Kubba, Commented Oct 9, 2013 at 18:30
Thanks I took off the quotes. Still having the same issue but can't see what errors I am getting. I am using Chrome with Firebug Lite on a protected url so not getting good errors. Only the generic 'Uncaught SyntaxError: Unexpected token <" — G Duggan
– G Duggan, Commented Oct 9, 2013 at 18:49
This was correct, I did need to take the quotes off the numbers. Thanks! — G Duggan
– G Duggan, Commented Oct 10, 2013 at 4:07

Jeff Escalante · Accepted Answer · 2013-10-09 19:17:11Z

1

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 : )

edited Oct 9, 2013 at 19:17

answered Oct 9, 2013 at 19:05

Jeff Escalante

3,1671 gold badge23 silver badges30 bronze badges

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

2 Comments

G Duggan Over a year ago

I like this solution as it is much simpler and more straightforward. Can you give an example of how to set and pass the variables as part of the opt class? Thanks!!

Jeff Escalante Over a year ago

No classes involved, opt just represents a simple javascript object. To read more about objects, check out this link: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… - to experiment with the options, use the jsfiddle I provided : )

Hamza Kubba · Accepted Answer · 2013-10-09 18:34:21Z

0

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.

answered Oct 9, 2013 at 18:34

Hamza Kubba

2,26715 silver badges12 bronze badges

3 Comments

G Duggan Over a year ago

I like that idea and implemented it. Still no dice getting it to fire on cancel though?

Hamza Kubba Over a year ago

Are you still getting the syntax error? That is another, unrelated problem. I don't think Javascript supports multi-line strings like you did. Instead, you want to end each line of the string with ' + and start the next line with '.

G Duggan Over a year ago

RE: PS -> Good advice!

Hamza Kubba · Accepted Answer · 2013-10-09 19:14:28Z

0

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

var bad = 'Invalid
syntax';

--

var good = 'Valid' +
'syntax';

answered Oct 9, 2013 at 19:14

Hamza Kubba

2,26715 silver badges12 bronze badges

1 Comment

G Duggan Over a year ago

Thanks! It also turned out I needed to add a backslash '\' to the end of every line in the multi-line definition to avoid errors. I've adjusted the original code to reflect that change.

Collectives™ on Stack Overflow

Jquery UI Dialog Dynamic Function With Passed Parameters

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related