Simplifying Jquery code HELP!

Question

I am trying to load two modal dialog boxes with Jquery. Both of them load separate pages using ajax. The only problem is that only one of them works.

I think I need to simplify my code but am unsure how.

    <script type="text/javascript">
$(document).ready(function(){
var dialogOpts = {
      modal: true,
      bgiframe: true,
      autoOpen: false,
      height: 400,
      width: 550,
      draggable: true,
      resizeable: true,
      title: "Your campaign rates",
   };
$("#ratesbox").dialog(dialogOpts);   //end dialog

   $('#ratesbutton').click(
      function() {
         $("#ratesbox").load("rate_sheet/index.php", [], function(){
               $("#ratesbox").dialog("open");
            }
         );
         return false;
      }
   );
}); 
</script>


<script type="text/javascript">
$(document).ready(function(){
var dialogOptsPass = {
      modal: true,
      bgiframe: true,
      autoOpen: false,
      height: 400,
      width: 550,
      draggable: true,
      resizeable: true,
      title: "Change your pasword",
   };
$("#passwordbox").dialog(dialogOptsPass);   //end dialog

   $('#passwordbutton').click(
      function() {
         $("#passwordbox").load("change_password/index.php", [], function(){
               $("#passwordbox").dialog("open");
            }
         );
         return false;
      }
   );
}); 
</script>

Is it posible to combine the two scripts????

Answer 1

You can simplify your script down a bit, like this:

$(function(){
  var dialogOpts = {
        modal: true,
        bgiframe: true,
        autoOpen: false,
        height: 400,
        width: 550,
        draggable: true,
        resizeable: true,
        title: "Your campaign rates"
     };
  $("#ratesbox, #passwordbox").dialog(dialogOpts);
  $("#passwordbox").dialog("option", "title", "Change your pasword");
  //or...
  //$("#ratesbox").dialog(dialogOpts);
  //$("#passwordbox").dialog($.extend(dialogOpts, { title: "Change your pasword" }));

   $('#ratesbutton').click(function() {
     $("#ratesbox").load("rate_sheet/index.php", function(){
       $("#ratesbox").dialog("open");
     });
     return false;
   });
   $('#passwordbutton').click(function() {
     $("#passwordbox").load("change_password/index.php", function(){
       $("#passwordbox").dialog("open");
     });
     return false;
   });
});

...but I didn't see any particular problem with your code (except one that should cause problems for both), it's most likely related to your markup as to why one isn't working. Also make sure to remove trailing commas in object declarations, you currently have title: "Your campaign rates",...don't have a dangling comma there, IE in particular will blow a gasket, eat your cat and steal your car.