Multiple instances of modal dialog box

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Multiple instances of modal dialog box

velocitykendal

Hi,

I have 3 links to difference modal boxes on a page.  Quite messily
I've just duplicated the code in the head[1] 3 times, mainly due to
being a jQuery/javascript novice.  Is there a way to neaten this up a
bit?

[1]
<script>
$(document).ready(function() {
        $('#helpInfo1').load("includes/file1.html").dialog({
        autoOpen: false,
        width: 600,
        modal: true
        });
        $('#helpInfo2').load("includes/file2.html").dialog({
        autoOpen: false,
        width: 600,
        modal: true
        });
        $('#helpInfo3').load("includes/file3.html").dialog({
        autoOpen: false,
        width: 600,
        modal: true
        });
        $('#helpLink1').click(function() {
      $('#helpInfo1').dialog('open');
    });
        $('#helpLink2').click(function() {
      $('#helpInfo2').dialog('open');
    });
        $('#helpLink3').click(function() {
      $('#helpInfo3').dialog('open');
    });
});
</script>


Cheers
VK
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Multiple instances of modal dialog box

Richard D. Worth-2
At the very least, you can throw your options in a variable and then call .dialog(options) 3 times. If you want to take it a few steps further:

$(function() {

  var options = {
      autoOpen: false,
      width: 600,
      modal: true
    };

  $([1, 2, 3]).each(function() {
    var num = this;
    var dlg = $('#helpInfo' + num)
      .load("includes/file" + num + ".html")
      .dialog(options);
    $('#helpLink' + num).click(function() {
      dlg.dialog("open");
      return false;
    });
  });

});

- Richard

On Tue, Feb 24, 2009 at 11:55 AM, [hidden email] <[hidden email]> wrote:

Hi,

I have 3 links to difference modal boxes on a page.  Quite messily
I've just duplicated the code in the head[1] 3 times, mainly due to
being a jQuery/javascript novice.  Is there a way to neaten this up a
bit?

[1]
<script>
$(document).ready(function() {
       $('#helpInfo1').load("includes/file1.html").dialog({
       autoOpen: false,
       width: 600,
       modal: true
       });
       $('#helpInfo2').load("includes/file2.html").dialog({
       autoOpen: false,
       width: 600,
       modal: true
       });
       $('#helpInfo3').load("includes/file3.html").dialog({
       autoOpen: false,
       width: 600,
       modal: true
       });
       $('#helpLink1').click(function() {
     $('#helpInfo1').dialog('open');
   });
       $('#helpLink2').click(function() {
     $('#helpInfo2').dialog('open');
   });
       $('#helpLink3').click(function() {
     $('#helpInfo3').dialog('open');
   });
});
</script>


Cheers
VK



--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Multiple instances of modal dialog box

css-3

Hi There Richard,

I'm very new to jquery and jquery ui and am having trouble adapting
your example to multiple links on a single page (maybe it shouldn't be
adapted I don't know). I'm using the default code from the jquery ui
example page.

Here's my HTML:

<!-- Dialog Link -->
<p><a href="#" id="dialog_link">Link text or image here</a></p>

<!-- ui-dialog -->
<div id="dialog1" title="Dialog title bar title here">
<object><embed>YouTube video embed code</embed></object>
</div>



Here's the script I've been using for one dialog (which works great):

        $(function(){

        // Dialog
        $('#dialog').dialog({
                autoOpen: false,
                width: 658,
                buttons: { }
                });

        // Dialog Link
        $('#dialog_link').click(function(){
                $('#dialog').dialog('open');
                return false;
                });
        });



Here's the script I tried for multiple (I need 7-10):

$(function() {

  var options = {
      autoOpen: false,
      width: 658,
      modal: true
    };

  $([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).each(function() {
    var num = this;
    var dlg = $('#dialog' + num)
      .load("includes/file" + num + ".html")
      .dialog(options);
    $('#dialog' + num).click(function() {
      dlg.dialog("open");
      return false;
    });
  });
});



It looked to me like your example is loading an HTML page (.load
("includes/file" + num + ".html") ) so I tried:

$(function() {

  var options = {
      autoOpen: false,
      width: 658,
      modal: true
    };

  $([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).each(function() {
    var num = this;
    var dlg = $('#dialog' + num)
      .dialog(options);
    $('#dialog' + num).click(function() {
      dlg.dialog("open");
      return false;
    });
  });
});


But I very quickly realized that I'm just guessing! I seem to only
ever end up with one link and one YouTube video in a dialog - the
dialog works though.

Any help our pointers in the right direction would be much
appreciated.

Cheers

Ben




On Feb 26, 2:26 pm, "Richard D. Worth" <[hidden email]> wrote:

> At the very least, you can throw your options in a variable and then call
> .dialog(options) 3 times. If you want to take it a few steps further:
>
> $(function() {
>
>   var options = {
>       autoOpen: false,
>       width: 600,
>       modal: true
>     };
>
>   $([1, 2, 3]).each(function() {
>     var num = this;
>     var dlg = $('#helpInfo' + num)
>       .load("includes/file" + num + ".html")
>       .dialog(options);
>     $('#helpLink' + num).click(function() {
>       dlg.dialog("open");
>       return false;
>     });
>   });
>
> });
>
> - Richard
>
> On Tue, Feb 24, 2009 at 11:55 AM, [hidden email] <
>
>
>
> [hidden email]> wrote:
>
> > Hi,
>
> > I have 3 links to difference modal boxes on a page.  Quite messily
> > I've just duplicated the code in the head[1] 3 times, mainly due to
> > being a jQuery/javascript novice.  Is there a way to neaten this up a
> > bit?
>
> > [1]
> > <script>
> > $(document).ready(function() {
> >        $('#helpInfo1').load("includes/file1.html").dialog({
> >        autoOpen: false,
> >        width: 600,
> >        modal: true
> >        });
> >        $('#helpInfo2').load("includes/file2.html").dialog({
> >        autoOpen: false,
> >        width: 600,
> >        modal: true
> >        });
> >        $('#helpInfo3').load("includes/file3.html").dialog({
> >        autoOpen: false,
> >        width: 600,
> >        modal: true
> >        });
> >        $('#helpLink1').click(function() {
> >      $('#helpInfo1').dialog('open');
> >    });
> >        $('#helpLink2').click(function() {
> >      $('#helpInfo2').dialog('open');
> >    });
> >        $('#helpLink3').click(function() {
> >      $('#helpInfo3').dialog('open');
> >    });
> > });
> > </script>
>
> > Cheers
> > VK

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Multiple instances of modal dialog box

css-3
In reply to this post by Richard D. Worth-2

Hi There Richard,

I'm very new to jquery and jquery ui and am having trouble adapting
your example to multiple links on a single page. I've just modified
the default code from the jquery ui example page.

Here's my HTML:

<!-- Dialog Link -->
<p><a href="#" id="dialog_link">Link text or image here</a></p>

<!-- ui-dialog -->
<div id="dialog1" title="Dialog title bar title here">
<object><embed>YouTube video embed code.</embed></object>
</div>



Here's the script I've been using for one dialog (which works great):

        $(function(){

        // Dialog
        $('#dialog').dialog({
                autoOpen: false,
                width: 658,
                buttons: { }
                });

        // Dialog Link
        $('#dialog_link').click(function(){
                $('#dialog').dialog('open');
                return false;
                });
        });



Here's the script I tried for multiple (I need 7-10):

$(function() {

  var options = {
      autoOpen: false,
      width: 658,
      modal: true
    };

  $([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).each(function() {
    var num = this;
    var dlg = $('#dialog' + num)
      .load("includes/file" + num + ".html")
      .dialog(options);
    $('#dialog' + num).click(function() {
      dlg.dialog("open");
      return false;
    });
  });
});


It looks to me your example loads an HTML page (.load("includes/file"
+ num + ".html") ) is that correct? I seem to only ever end up with
one link and one YouTube video.

Any help our pointers in the right direction would be much
appreciated.

Cheers

Ben


On Feb 26, 2:26 pm, "Richard D. Worth" <[hidden email]> wrote:

> At the very least, you can throw your options in a variable and then call
> .dialog(options) 3 times. If you want to take it a few steps further:
>
> $(function() {
>
>   var options = {
>       autoOpen: false,
>       width: 600,
>       modal: true
>     };
>
>   $([1, 2, 3]).each(function() {
>     var num = this;
>     var dlg = $('#helpInfo' + num)
>       .load("includes/file" + num + ".html")
>       .dialog(options);
>     $('#helpLink' + num).click(function() {
>       dlg.dialog("open");
>       return false;
>     });
>   });
>
> });
>
> - Richard
>
> On Tue, Feb 24, 2009 at 11:55 AM, [hidden email] <
>
>
>
> [hidden email]> wrote:
>
> > Hi,
>
> > I have 3 links to difference modal boxes on a page.  Quite messily
> > I've just duplicated the code in the head[1] 3 times, mainly due to
> > being a jQuery/javascript novice.  Is there a way to neaten this up a
> > bit?
>
> > [1]
> > <script>
> > $(document).ready(function() {
> >        $('#helpInfo1').load("includes/file1.html").dialog({
> >        autoOpen: false,
> >        width: 600,
> >        modal: true
> >        });
> >        $('#helpInfo2').load("includes/file2.html").dialog({
> >        autoOpen: false,
> >        width: 600,
> >        modal: true
> >        });
> >        $('#helpInfo3').load("includes/file3.html").dialog({
> >        autoOpen: false,
> >        width: 600,
> >        modal: true
> >        });
> >        $('#helpLink1').click(function() {
> >      $('#helpInfo1').dialog('open');
> >    });
> >        $('#helpLink2').click(function() {
> >      $('#helpInfo2').dialog('open');
> >    });
> >        $('#helpLink3').click(function() {
> >      $('#helpInfo3').dialog('open');
> >    });
> > });
> > </script>
>
> > Cheers
> > VK

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Multiple instances of modal dialog box

dowen
In reply to this post by Richard D. Worth-2
Thank you for the very elegant method for placing an unlimited number of dialog boxes on a page. Very sweet! Was easy to use and repurpose.

Richard D. Worth-2 wrote
At the very least, you can throw your options in a variable and then call
.dialog(options) 3 times. If you want to take it a few steps further:

$(function() {

  var options = {
      autoOpen: false,
      width: 600,
      modal: true
    };

  $([1, 2, 3]).each(function() {
    var num = this;
    var dlg = $('#helpInfo' + num)
      .load("includes/file" + num + ".html")
      .dialog(options);
    $('#helpLink' + num).click(function() {
      dlg.dialog("open");
      return false;
    });
  });

});

- Richard

On Tue, Feb 24, 2009 at 11:55 AM, velocitykendal@fastmail.co.uk <
velocitykendal@fastmail.co.uk> wrote:

>
> Hi,
>
> I have 3 links to difference modal boxes on a page.  Quite messily
> I've just duplicated the code in the head[1] 3 times, mainly due to
> being a jQuery/javascript novice.  Is there a way to neaten this up a
> bit?
>
> [1]
> <script> > $(document).ready(function() { > $('#helpInfo1').load("includes/file1.html").dialog({ > autoOpen: false, > width: 600, > modal: true > }); > $('#helpInfo2').load("includes/file2.html").dialog({ > autoOpen: false, > width: 600, > modal: true > }); > $('#helpInfo3').load("includes/file3.html").dialog({ > autoOpen: false, > width: 600, > modal: true > }); > $('#helpLink1').click(function() { > $('#helpInfo1').dialog('open'); > }); > $('#helpLink2').click(function() { > $('#helpInfo2').dialog('open'); > }); > $('#helpLink3').click(function() { > $('#helpInfo3').dialog('open'); > }); > }); > </script>>
>
> Cheers
> VK
> >
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to jquery-ui+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
Reply | Threaded
Open this post in threaded view
|

Re: Multiple instances of modal dialog box

sendben
In reply to this post by Richard D. Worth-2
Richard D. Worth-2 wrote
At the very least, you can throw your options in a variable and then call
.dialog(options) 3 times. If you want to take it a few steps further:

$(function() {

  var options = {
      autoOpen: false,
      width: 600,
      modal: true
    };

  $([1, 2, 3]).each(function() {
    var num = this;
    var dlg = $('#helpInfo' + num)
      .load("includes/file" + num + ".html")
      .dialog(options);
    $('#helpLink' + num).click(function() {
      dlg.dialog("open");
      return false;
    });
  });

});

- Richard
Hi Richard and others.  Just curious, how would you go about defining custom options for each dialog box?  Say I wanted to define a different title for each of these dialogs?
Thanks
Ben