ansaurus

Question

Jquery Dialogue - Multiple on the same page

Answer 1

+1 A:

The following should work as a valid example.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
  <meta http-equiv="Content-Type" content="application/text+html;utf-8"/>

  <title>Sandbox</title>

  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" charset="utf-8" />
  <link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" />
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<style type="text/css">

</style>

<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript">
google.setOnLoadCallback(function() {

      $(document).ready(function() {
     $('.more-text').toggle();
     $('.more').click(function() {
      $(this).parent().next('p').dialog();
     })


    });
});
</script>
</head>
<body>
    <div id="container">
     <div id="person-1">
     <p>Short text for person one <a href="#" class="more">Show more</a></p>
     <p class="more-text">This is more of the text</p>
     </div>
     <div id="person-2">
     <p>Short text for person two <a href="#" class="more">Show more</a></p>
     <p class="more-text">This is more of the text with a longer description that
     is supposed to go into a popup</p>
     </div>
    </div>
</body>

</html>

Steerpike 2009-04-07 14:14:07

Thanks for taking the time to do all that Steerpike. IT looks great as a starter, but trying it out, the dialogues only pop the first time they're clicked, I think I read another answer about this somewhere which I'll search for now, but any ideas?

Rob Y 2009-04-07 14:25:26

It's only firing once becasue the dialog pulls the markup out of the DOM when it turns it into the popup. Right now I'm at work and don't have time to look into the issue. I know it's possible though, I've done exactly what you need on another project using similar code to what I posted.

Steerpike 2009-04-07 15:17:12

Unfortunately I don't have access to the code I wrote at the moment.

Steerpike 2009-04-07 15:17:52

Actually, yes I do - it's currently live. You'll find it at http://www.juliesbicycle.com/about-us/who-we-are (check the source code)

Steerpike 2009-04-07 15:19:57

Answer 2

+1 A:

All the information that you need is right there on the UI documentation page, down the bottom in the tabs labelled 'Options' and 'Methods'. These guys are your friends and will tell you (almost) everything that the widget can do. For example,

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying
       information. The dialog window can be moved, resized and
       closed with the 'x' icon.</p>
</div>
...
<a href="" onclick="openDialog('Peter Smith', '<p>Peter Smith likes dirt bike riding, mountain climbing and punk music.</p>'); return false;">Peter Smith</a>
...
<script type="text/javascript">

    $(document).ready( function() {
       $("#dialog").dialog({ autoOpen: false, modal: true });
    });

   function openDialog(title, text) {
        $("#dialog").html(text).dialog('option','title',title).dialog('open');
   }
</script>

Ajw 2009-04-07 14:56:11

Hi Ajw, thanks for answering, but the bit that's missing for the above is how to pick different bits of text for different links. As far as i can see, this will select the div with an id of dialogue, and always open that

Rob Y 2009-04-08 10:18:20

What about,<a href="" onclick="$('#dialog').html('Peter Smith likes dirt bike riding, mountain climbing and punk music.').dialog('option', 'title', 'Peter Smith').dialog('open'); return false;">Peter Smith</a>

Ajw 2009-04-09 04:33:37

ansaurus

tags:

views:

answers:

Jquery Dialogue - Multiple on the same page

related questions