CODEWITHSUNDEEP
jquery
punit saharawat
punit saharawat

Reputation: 129

How to reduce jQuery code

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>

Upvotes: 1

Views: 538

Answers (2)

Shiladitya
Shiladitya

Reputation: 12181

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');
});

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

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.

Upvotes: 0

Related Questions