CODEWITHSUNDEEP
jqueryjquery-ui
tzerb
tzerb

Reputation: 1433

Consolidating Dialog Box Code

I've been coming up to speed on jQuery but I think I'm still missing some fundamentals. I have a complex set of dialog popups (distilled below) and I'm lost at how to consolidate them into one 'class'.

HTML:

 <div id="FirstDialogFrame" 
      title="First" 
      data-button="Alert First"
      data-alert="FirstAlert">
 </div>

 <div id="SecondDialogFrame" 
      title="Second" 
      data-button="Alert First"
      data-alert="SecondAlert" >
 </div>

 <button id="PopFirst">First</button>
 <button id="SecondFirst">Second</button>

JavaScript:

$("#FirstDialogFrame").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#SecondDialogFrame").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#PopFirst").click(function() {
    $("#FirstDialogFrame").dialog("open");
});

$("#SecondFirst").click(function() {
    $("#SecondDialogFrame").dialog("open");
});

Fiddle:

http://jsfiddle.net/tzerb/BYKqM/

Any feedback appreciated.

TIA.

Upvotes: 1

Views: 404

Answers (3)

jantimon
jantimon

Reputation: 38140

You might move the javascript into the click event. So your page loads quicker and the dialog is built when it is needed.

<button class="popup" 
  data-button="Alert First" 
  title="First" 
  data-alert="FirstAlert">Open first dialog</button>

<button class="popup" title="Second" 
  data-button="Alert First"
  data-alert="SecondAlert">Open second dialog</button>

And your code would look like this:

$("button.popup").click(function(){
  $("<div/>")
     .appendTo(document.body)
     .attr('title', this.title)
     .data('button', $(this).data('button'))
     .data('alert', $(this).data('alert'))
     .dialog({
         resizable: true,
         height: 340,
         width: 340,
         modal: true,
         close: function(event, ui) {
           $(this).remove();
         },
         buttons: {
             "Alert": function() {
                 alert($(this).data('alert'));
                 $(this).dialog("close");
             },
             Close: function() {
                 $(this).dialog("close");
             }
         }
     });

});

See the fiddle: http://jsfiddle.net/e6t76/

Upvotes: 1

Christopher Marshall
Christopher Marshall

Reputation: 10736

Why not combine the dialog selectors and have different opening events since they both have the same params?

$("#FirstDialogFrame, #SecondDialogFrame").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#PopFirst").click(function() {
    $("#FirstDialogFrame").dialog("open");
});

$("#SecondFirst").click(function() {
    $("#SecondDialogFrame").dialog("open");
});

Upvotes: 1

Nadh
Nadh

Reputation: 7243

HTML

 <div id="FirstDialogFrame" class="popup"
      title="First" 
      data-button="Alert First"
      data-alert="FirstAlert">
 </div>

 <div id="SecondDialogFrame" class="popup"
      title="Second" 
      data-button="Alert First"
      data-alert="SecondAlert" >
 </div>

 <button id="PopFirst">First</button>
 <button id="SecondFirst">Second</button>

Javascript

 $(".popup").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#PopFirst").click(function() {
    $("#FirstDialogFrame").dialog("open");
});

$("#SecondFirst").click(function() {
    $("#SecondDialogFrame").dialog("open");
});

Upvotes: 2

Related Questions