How can we prevent having an abundance of jQuery confirmation dialog boxes and instead focus on reusing them

Question

How can we prevent having an abundance of jQuery confirmation dialog boxes and instead focus on reusing them

I'm currently updating an old web application using jQuery.

Within the form, there are 40 buttons that trigger a confirmation prompt using javascript confirm. I aim to replace these with jquery modal dialogues.

While I've successfully implemented this for a few buttons, having to do it individually for all 40 seems tedious. The only variation between them is the javascript function called when 'Yes' is clicked.

Any ideas on how to streamline this process?

Sample code for button:

$("#confirm1dialogTitle").html("Approve?");
$("#confirm1dialogText").html("Do you want to approve this request?");
$('#confirm1dialog').dialog('open');

Inline script:

<script type="text/javascript">
$(function() {
    $("#confirm1dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        width: 350,
        height: 350,
        modal: true,
        buttons: {
            'Yes': function() {
                window.document.forms[0].FDDStatus.value = "Approved";
                window.document.forms[0].DivisionApproval.value = "Yes";
                window.document.forms[0].setApprovalFields();
            },
            'No': function() {
                $(this).dialog('close');
            }
        }
    });
});
</script>

Inline HTML:

<div id="confirm1dialog" title="<span id='Title'>Title</span>">
   <div id="users-contain" class="ui-widget">
      <form>
         <span id="confirm1Text"></span>
      </form>
   </div>
</div>

javascript jquery html css

Answer 1

Answer №1

If you want to consolidate the JavaScript that is constantly changing, you can encapsulate it in a function object for reuse.

For example, let's say your form looks like this:

<form><input id='btn1' /><input id='btn2' /></form>

You can create a helper function like this:

var confirmHelper = function(id, yesCallback) {
  $(id).click(function() {
    // Code from your example
    $("#confirm1dialog").dialog({
      bgiframe: true,
      autoOpen: false,
      width: 350,
      height: 350,
      modal: true,
      buttons: { 'Yes': yesCallback, 'No': function() { } }
    });
  });
};

Then you can apply this helper function to your buttons:

confirmHelper('btn1', function() {
  // Your previous callback code here
  window.document.forms[0].FDDStatus.value = "Approved";
  window.document.forms[0].DivisionApproval.value = "Yes";                                   
  window.document.forms[0].setApprovalFields();
});

confirmHelper('btn2', function() {
  // Your other JavaScript code here
});

This way, you can easily handle the functionality of all the buttons with ease!

Answer 2

If you want to consolidate the JavaScript that is constantly changing, you can encapsulate it in a function object for reuse.

For example, let's say your form looks like this:

<form><input id='btn1' /><input id='btn2' /></form>

You can create a helper function like this:

var confirmHelper = function(id, yesCallback) {
  $(id).click(function() {
    // Code from your example
    $("#confirm1dialog").dialog({
      bgiframe: true,
      autoOpen: false,
      width: 350,
      height: 350,
      modal: true,
      buttons: { 'Yes': yesCallback, 'No': function() { } }
    });
  });
};

Then you can apply this helper function to your buttons:

confirmHelper('btn1', function() {
  // Your previous callback code here
  window.document.forms[0].FDDStatus.value = "Approved";
  window.document.forms[0].DivisionApproval.value = "Yes";                                   
  window.document.forms[0].setApprovalFields();
});

confirmHelper('btn2', function() {
  // Your other JavaScript code here
});

This way, you can easily handle the functionality of all the buttons with ease!

Answer 3

Answer №2

In JavaScript, you have the capability to create 40 individual functions that will be triggered when the user clicks "yes" using only a single modal window.

Without knowing the specifics of your click() function, it is possible to incorporate a variable within it by utilizing attributes such as rel on the link being clicked or a specific class. By evaluating the value of this variable, you can determine which function needs to be executed accordingly.

Answer 4

In JavaScript, you have the capability to create 40 individual functions that will be triggered when the user clicks "yes" using only a single modal window.

Without knowing the specifics of your click() function, it is possible to incorporate a variable within it by utilizing attributes such as rel on the link being clicked or a specific class. By evaluating the value of this variable, you can determine which function needs to be executed accordingly.

How can we prevent having an abundance of jQuery confirmation dialog boxes and instead focus on reusing them

Answer №1

Answer №2

Similar questions

Steps to verify multiple v-for loops and apply style if both are present

Tips for sending an array from a higher-order component to a nested component in React Native using props

What steps can be taken to display database results solely for the user currently logged in and created by them?

What is the method for sending arguments to material avatar using require?

Avoid stretching the div to the edge of the screen

What might be causing the lack of JSON updates appearing on my webpage?

tips for integrating new features in protractor

Using React Native, you can easily apply styles to View components by passing them

What is the best way to integrate PHP scripts into jQuery?

The jQuery namespace does not function as intended

Creating a Functional Right Arrow on a Pure CSS Select Menu/Dropdown

Guide on transferring information from an HTML div to a MySQL database using JavaScript and PHP

What is the best way to manage the maximum number of concurrent AJAX requests?

React Card with Overflowing TableCell Texts

Stop vertical scrolling in a designated div container

Ways to adjust the color of a cell in a table

The hover effect is not functioning properly after loading jQuery with load();

Passing parameters through the URL with Angular's ui-router

Having difficulty utilizing Objects.key.map() for mapping purposes

"When a Vuex mutation modifies the state, the computed property fails to accurately represent the changes in the markup