How to reduce jQuery code

Question

In this, I try to open a dialog click on the button.

It's working well but I want to reduce this code because it looks like same on click function

$(document).ready(function() {
  $("#dialog_form_file").dialog({
    modal: true,
    autoOpen: false,
    title: "Help",
    width: 450,
    buttons: [{
        text: "OK",
        click: function() {
          $(this).dialog("close");
        }
      },
      {
        text: "Cancel",
        click: function() {
          $(this).dialog("close");
        }
      }
    ]
  });
  $("#dialog_form").dialog({
    modal: true,
    autoOpen: false,
    title: "Help",
    width: 450,
    buttons: [{
        text: "OK",
        click: function() {
          $(this).dialog("close");
        }
      },
      {
        text: "Cancel",
        click: function() {
          $(this).dialog("close");
        }
      }
    ]
  });
  $("#dialog_help").click(function() {
    $("#dialog_form_file").dialog('open');
  });
  $("#change_button").click(function() {
    $("#dialog_form").dialog('open');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div id="dialog_form_file" style="display: none">
  <p>Hello</p>
</div>
<div id="dialog_form" style="display: none">
  <p>Hello</p>
</div>

The .dialog function of jquery ui should have a html parameter. Read the doc. — user5014677
– user5014677, Commented Aug 10, 2017 at 7:25
1. I added jQuery UI to your code - it was not a minimal reproducible example 2. you are hiding everything. Please update the snippet to work - add the link and button — mplungjan
– mplungjan, Commented Aug 10, 2017 at 7:25
@user5014677 You mean this doc where it states that the dialog() method has no html parameter? The OPs use of dialog() is absolutely fine here. — Rory McCrossan
– Rory McCrossan, Commented Aug 10, 2017 at 7:27

Shiladitya · Accepted Answer · 2017-08-10 08:06:22Z

Here you go with a solution https://jsfiddle.net/aspoptua/2/

$(document).ready(function() {
  $("#dialog_form_file, #dialog_form").dialog({
    modal: true,
    autoOpen: false,
    title: "Help",
    width: 450,
    buttons: [{
        text: "OK",
        click: function() {
          $(this).dialog("close");
        }
      },
      {
        text: "Cancel",
        click: function() {
          $(this).dialog("close");
        }
      }
    ]
  });
  
  $("#dialog_help, #change_button").click(function() {
    $("#" + $(this).data('modal')).dialog('open');
  });
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div id="dialog_form_file" style="display: none">
  <p>Hello</p>
</div>
<div id="dialog_form" style="display: none">
  <p>Hello</p>
</div>
<button type="submit" id="dialog_help" data-modal="dialog_form_file">
Submit 1
</button>
<button type="submit" id="change_button" data-modal="dialog_form">
Submit 1
</button>

Additional code in HTML

<button type="submit" id="dialog_help" data-modal="dialog_form_file"> Submit 1</button>
<button type="submit" id="change_button" data-modal="dialog_form"> Submit 1</button>

Change of code in JavaScript

$("#dialog_help, #change_button").click(function() {
   $("#" + $(this).data('modal')).dialog('open');
});

Milan Chheda · Accepted Answer · 2017-08-10 07:24:49Z

0

You can reduce your code by doing:

$("#dialog_form_file, #dialog_form").dialog({

You don't need to write same code again for 2 difference selectors.

answered Aug 10, 2017 at 7:24

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

1 Comment

punit saharawat Over a year ago

i try to do this but both dialog open same place $("#dialog_help, #change_button").click(function(){ $("#dialog_form_file #dialog_form").dialog('open'); });

Collectives™ on Stack Overflow

How to reduce jQuery code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related