CODEWITHSUNDEEP
jqueryjquery-ui
Rob Y
Rob Y

Reputation: 841

Jquery Dialogue - Multiple on the same page

I'm trying to implement a jquery dialogue box multiple times on one page - basically, I want to show further info about a person when a user clicks on their name.

I'm generating the page with php.

I've tried to do this, and got it partially working, but i can only make the first instance on the page work. Please can anyone point me to an example, because the ones on the UI page are not so helpful, as they automatically pop when the page opens.

I have refrained from posting my code as I think it's not the right way to do this.

Thaks in advance.

Upvotes: 4

Views: 11728

Answers (2)

Ajw
Ajw

Reputation: 716

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>

Upvotes: 3

Steerpike
Steerpike

Reputation: 17544

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">
<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"></script>
<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>

Upvotes: 1

Related Questions