Applying the same button functions to different jquery dialogs

Question

Question

I am building a simple Q&A game using the dialogs from jquery. Each dialog has the same width and height and the same set of button with the same functionality

Yes button: Advancing to the next dialog
No button: Bring the user to a specific dialog

Currently, I put the same button in each dialog widget like this:

$( "#dialog_n" ).dialog({
  autoOpen: true,
  maxWidth:500,
  maxHeight: 600,
  width: 500,
  height: 600,
  buttons: {
    "Yes": function() {
      $( "#dialog_n+1" ).dialog("open"), /* Advancing to next question */
      $(this).dialog("close");
    },
    "No": function() {
      $( "#dialog_d" ).dialog("open"); /* Bring to a specific dialog */
      current_state = $(this);
      $(this).dialog("close");
    }},
    close: function() {
    }
});

If later I need to make changes to the button set or the widget size, I would need to modify each widget (Around 50 widgets in the final product).

Is there a way that I only need to modify one place, and that it will apply to the a bunch of dialog widgets?

Attempts to Solve this Problem

I am new to javascript and jquery, and I tried to search for keywords such as "widget content inheritance", "dialog button inheritance" but found nothing I want.

The closest I can find is .ui-widget-content. But when I do the following, my dialog widgets are not inheriting from it

  .ui-widget-content {
    autoOpen: true;
    maxWidth:500;
    maxHeight: 600;
    width: 500;
    height: 600;
    buttons: {
      "Yes": function() {
        $( "#dialog2" ).dialog("open"),
        $(this).dialog("close");
      },
      "No": function() {
        $( "#dialog_d" ).dialog("open");
        current_state = $(this);
        $(this).dialog("close");
      }},
      close: function() {
      }    
  }

My Full Code

<html lang="en">
    <head>
    <meta charset="utf-8" />
    <style>
      .ui-dialog-titlebar-close {
        visibility: hidden;
      }
    
      .ui-dialog .ui-dialog-title {
        text-align: center;
        width: 100%;
      }  
    
      .block {
        text-align: center; /* Center text in .block */
        position:absolute;
        top:0;
      }    
    
      .img {
      float: center;
      width:  400;
      height: 400;
      background-size: cover;
      }
    
     }
      </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
    
    <script type="text/javascript">
      $(document).ready(function() {
        $( "#dialog1" ).dialog({
          autoOpen: true,
          maxWidth:500,
          maxHeight: 600,
          width: 500,
          height: 600,
          buttons: {
            "Yes": function() {
              $( "#dialog2" ).dialog("open"),
              $(this).dialog("close");
            },
            "No": function() {
              $( "#dialog_d" ).dialog("open");
              current_state = $(this);
              $(this).dialog("close");
            }},
            close: function() {
            }
        });
    
        $( "#dialog2" ).dialog({
          autoOpen: false,
          maxWidth:500,
          maxHeight: 600,
          width: 500,
          height: 600,
          buttons: {
            "Yes": function() {
              $( "#dialog_d2" ).dialog("open");
            },
            "No": function() {
              $( "#dialog_d" ).dialog("open");
              current_state = $(this);
              $(this).dialog("close");
            }},
            close: function() {
            }
        });
    
    
    
        $( "#dialog_d" ).dialog({
          autoOpen: false,
          maxWidth:500,
          maxHeight: 600,
          width: 500,
          height: 600,
          buttons: {
            "Retry": function() {
              $("#dialog2").dialog("open");
              $(this).dialog("close");
              current_state.dialog("open");   
            },
            "Quit": function() {
              $("#dialog_d2").dialog("open");          
              $(this).dialog("close");
            }},
            close: function() {
            }
        });
    
        $( "#dialog_d2" ).dialog({
          autoOpen: false,
          maxWidth:500,
          maxHeight: 600,
          width: 500,
          height: 600,
          buttons: {
            "Yes": function() {
              $( "#dialog2" ).dialog("open");
              $(this).dialog("close");
              current_state.dialog("open");          
            },
            "No": function() {
              $(this).dialog("close");
              current_state.dialog("open");     
            }},
            close: function() {
            }
        });    
      });
    </script>
    </head>
    <body>
    
    <div class="block" id="dialog1" title="Q1: adjfalkj">
      <img class="img"  src="https://www.researchgate.net/profile/Hwan-Gue-Cho/publication/224351698/figure/fig2/AS:571184220524544@1513192338732/A-sample-transparent-CAPTCHA-Image-600-x-400-with-Randomly-Assigned-Text-in-Step-4_Q640.jpg"/>
    </div>  
    
    <div class="block" id="dialog2" title="Q2: adjfalkj">
      <img class="img"  src="https://www.researchgate.net/profile/Torben-Weis/publication/221307223/figure/fig1/AS:651195249065984@1532268454203/A-sample-CAPTCHA-test_Q640.jpg"/>
    </div>  
    
    <div class="block" id="dialog_d" title="Wrong Answer!">
      <img class="img" src="https://t.pimg.jp/063/403/181/5/63403181.jpg"/>
    </div>
    
    <div class="block" id="dialog_d2" title="Thanks for playing">
      <img class="img" src="https://art.pixilart.com/e721a8c0189d55c.png"/>
    </div>
    
    </body>
    </html>

Update

I am trying the solution provided by @Daniel, yet I am getting missing buttons.

Am I doing anything wrong here?

<html lang="en">
<head>
<meta charset="utf-8" />
<style>
  .ui-dialog-titlebar-close {
    visibility: hidden;
  }

  .ui-dialog .ui-dialog-title {
    text-align: center;
    width: 100%;
  }  

  .block {
    text-align: center; /* Center text in .block */
    position:absolute;
    top:0;
  }    

  .img {
  float: center;
  width:  400;
  height: 400;
  background-size: cover;
  }

 }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript">
  function DialogObj(dialogId, confirmationButtonName,cancelationButtonName){
      this.autoOpen= true,
      this.maxWidth=500,
      this.maxHeight= 600,
      this.width= 500,
      this.height= 600,
      this.buttons= {
        [confirmationButtonName]: function() {
          $( "#"+dialogId ).dialog("open"),
          $(this).dialog("close");
        },
        [cancelationButtonName]: function() {
          $( "#"+dialogId ).dialog("open");
          current_state = $(this);
          $(this).dialog("close");
        }},
        close= function() {
        }
    }

  $(document).ready(function() {
    $( "#dialog1" ).dialog(DialogObj("#dialog2","Yes","No"));

    $( "#dialog2" ).dialog({
      autoOpen: false,
      maxWidth:500,
      maxHeight: 600,
      width: 500,
      height: 600,
      buttons: {
        "Yes": function() {
          $( "#dialog_d2" ).dialog("open");
        },
        "No": function() {
          $( "#dialog_d" ).dialog("open");
          current_state = $(this);
          $(this).dialog("close");
        }},
        close: function() {
        }
    });



    $( "#dialog_d" ).dialog({
      autoOpen: false,
      maxWidth:500,
      maxHeight: 600,
      width: 500,
      height: 600,
      buttons: {
        "Retry": function() {
          $("#dialog2").dialog("open");
          $(this).dialog("close");
          current_state.dialog("open");   
        },
        "Quit": function() {
          $("#dialog_d2").dialog("open");          
          $(this).dialog("close");
        }},
        close: function() {
        }
    });

    $( "#dialog_d2" ).dialog({
      autoOpen: false,
      maxWidth:500,
      maxHeight: 600,
      width: 500,
      height: 600,
      buttons: {
        "Yes": function() {
          $( "#dialog2" ).dialog("open");
          $(this).dialog("close");
          current_state.dialog("open");          
        },
        "No": function() {
          $(this).dialog("close");
          current_state.dialog("open");     
        }},
        close: function() {
        }
    });    
  });
</script>
</head>
<body>

<div class="block" id="dialog1" title="Q1: adjfalkj">
  <img class="img"  src="https://www.researchgate.net/profile/Hwan-Gue-Cho/publication/224351698/figure/fig2/AS:571184220524544@1513192338732/A-sample-transparent-CAPTCHA-Image-600-x-400-with-Randomly-Assigned-Text-in-Step-4_Q640.jpg"/>
</div>  

<div class="block" id="dialog2" title="Q2: adjfalkj">
  <img class="img"  src="https://www.researchgate.net/profile/Torben-Weis/publication/221307223/figure/fig1/AS:651195249065984@1532268454203/A-sample-CAPTCHA-test_Q640.jpg"/>
</div>  

<div class="block" id="dialog_d" title="Wrong Answer!">
  <img class="img" src="https://t.pimg.jp/063/403/181/5/63403181.jpg"/>
</div>

<div class="block" id="dialog_d2" title="Thanks for playing">
  <img class="img" src="https://art.pixilart.com/e721a8c0189d55c.png"/>
</div>

</body>
</html>

Daniel · Accepted Answer · 2021-08-12 10:20:33Z

2

from your code and from the issue you described seems like what you're doing is just sending the same js object to the dialog function with every call.

the solution is to declare a constructor to this obj in advance and send it to the dialog function afterwards. you can send it parameters as you wish, but most of them could be declared in the function and changed only there.

 <script type="text/javascript">
      function DialogObj(dialogId, confirmationButtonName,cancelationButtonName){
          this.autoOpen= true,
          this.maxWidth=500,
          this.maxHeight= 600,
          this.width= 500,
          this.height= 600,
          this.buttons= {
            [confirmationButtonName]: function() {
              $( "#"+dialogId ).dialog("open"),
              $(this).dialog("close");
            },
            [cancelationButtonName]: function() {
              $( "#"+dialogId ).dialog("open");
              current_state = $(this);
              $(this).dialog("close");
            }},
            close= function() {
            }
        }

      $(document).ready(function() {
        $( "#dialog1" ).dialog(new DialogObj("#dialog1","Yes","No"));
        //rest of the code with similar calls

edited Aug 12, 2021 at 10:20

answered Aug 12, 2021 at 9:53

Daniel

2,03512 silver badges24 bronze badges

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

3 Comments

Raven Cheuk Over a year ago

I am trying your solution on my first dialog, yet, the dialog size is not correct and the buttons are missing. Am I doing anything wrong? I have attached my updated code in my edited question

Raven Cheuk Over a year ago

Oh, I see your updated answer just now. I forgot to put the new before the DialogObj constructor. After adding new, it works now :)

Daniel Over a year ago

@RavenCheuk you're right, I forgot to put new and updated few minutes later, sorry I didn't mention the update. good luck!

cookie · Accepted Answer · 2021-08-12 09:57:04Z

0

First of all, you should use tree to restore your image.

Here is an example code for you to restore.

function TreeNode(val) {
    this.val = val;
    this.left = this.right = null;
}
function toTree(arr) {
    if (arr.length === 0) {
        return null;
    }
    let root = new TreeNode(arr.shift());
    let childArr = [root];
    let node = root;
    while(arr.length > 0 && node) {
        let tempArr = [];
        while(childArr.length > 0 && node) {
            node = childArr.shift();
            if (node.val !== null) {
                node.left = new TreeNode(arr.shift());
                tempArr.push(node.left);
                node.right = new TreeNode(arr.shift());
                tempArr.push(node.right);
            }
        }
        childArr = tempArr;
    }
    return root;
}

After you restore the images, you can regard left tree as the yes button, the right tree as the no button. And then every time the user click the operate button, you only have to replace the image of the question.

answered Aug 12, 2021 at 9:57

cookie

796 bronze badges

2 Comments

Raven Cheuk Over a year ago

I am new to javascript, forgive me if I am asking a stupid question. In my case, each dialog differs not only the image, but also the title of the dialog. Does this method also replace the dialog title?

cookie Over a year ago

@RavenCheuk Yes, you can restore the data like this. [{image: dialogImage, title: dialogTitle}, {image: dialogImage1, title: dialogTitle1}]

Collectives™ on Stack Overflow

Applying the same button functions to different jquery dialogs

Question

Attempts to Solve this Problem

My Full Code

Update

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Question

Attempts to Solve this Problem

My Full Code

Update

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related