Simplifying multiple jQuery Dialog function

Question

As I searched through Stackoverflow and Google, I couldn't find a solution to simplifying my code (or maybe I haven't found the exact search term). It really bugs me that I couldn't simplify the code below.

Since I'm a beginner in this field, I had to repeat all the same code all over again, when there are similarities that I can combine.

Your help is much appreciated!

$('.detail-view').dialog({
  autoOpen: false,
  draggable: false,
  resizable: false,
  closeOnEscape: true,
  modal: true,
  height: 'auto',
  width: 600,
  position: ['top', 150] });

$('.forgotpass').dialog({
  autoOpen: false,
  draggable: false,
  resizable: false,
  closeOnEscape: true,
  modal: true,
  height: 'auto',
  width: 400,
  position: ['top', 150] });

$('.user0').load('php/usersetting.php').dialog({
  autoOpen: true,
  draggable: false,
  resizable: false,
  closeOnEscape: false,
  modal: true,
  height: 'auto',
  width: 500,
  position: ['top', 150],
  open: function(){
    $(this).parent().find('.ui-dialog-titlebar-close').hide();
  } });

$('.user1').load('php/usersetting.php').dialog({
  autoOpen: false,
  draggable: false,
  resizable: false,
  modal: true,
  height: 'auto',
  width: 500,
  position: ['top', 100] });

$('.user2').load('php/usersetting.php').dialog({
  autoOpen: true,
  draggable: false,
  resizable: false,
  closeOnEscape: true,
  modal: true,
  height: 'auto',
  width: 500,
  position: ['top', 150],
  open: function(){
    $(this).parent().find('.ui-dialog-titlebar-close').hide();
  }
  });

Start with a basic object and then use $.extend() to make variations. Also, take advantage of the , in selector syntax to combine separate calls. — Pointy
– Pointy, Commented Jul 20, 2013 at 15:20

T.J. Crowder · Accepted Answer · 2013-07-20 15:21:19Z

2

Since the vast majority of your options are the same, a simple answer is to create a default options object:

var defaults = {
  autoOpen: false,
  draggable: false,
  resizable: false,
  closeOnEscape: true,
  modal: true,
  height: 'auto',
  width: 200,
  position: ['top', 150]
};

and then use $.extend with the specific options you want to override:

$('.detail-view').dialog($.extend({}, defaults, {
  width: 600
}));
$('.forgotpass').dialog($.extend({}, defaults, {
  width: 400
}));

You could encapsulate this in a function:

function createDialog(selector, options) {
    $(selector).dialog($.extend({}, defaults, options));
}

createDialog('.detail-view', {
  width: 600
});
createDialog('.forgotpass', {
  width: 400
});

Or of course if it's just width:

function createDialog(selector, width) {
    $(selector).dialog($.extend({}, defaults, {width: width}));
}

createDialog('.detail-view', 600);
createDialog('.forgotpass', 400);

answered Jul 20, 2013 at 15:21

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

rolodex Over a year ago

Even without trying the code, I can understand its simplicity. You're fast and I'm gonna try it now! Thanks! I'll return shortly.

rolodex Over a year ago

Done and works! Thanks a lot for introducing me to $.extend !

Zeus Alexander · Accepted Answer · 2013-07-20 15:27:29Z

0

Create an object and then pass it to each dialog() function: var dialog_properties = {autoOpen:false, drag able: false, ...};

Then use it in all dialog() functions that are similar : $('.detailView').dialog(dialog_properties); $('.forgotPass').dialog(dialog_properties); ...

answered Jul 20, 2013 at 15:27

Zeus Alexander

5532 silver badges10 bronze badges

Collectives™ on Stack Overflow

Simplifying multiple jQuery Dialog function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related