php - Calling a jquery dialog box in a div loop

Question

How do i call a jquery dialog box from a div in a loop?

See for instance, clicking the <p> will show up the profile of selected database user.

Ex:

<div id="db-users">

   <div id="user-info1"> //db userinfo 1
     <p>ID#001 John Smith</p>
     <div id="dialog-box">Profile of John Smith</div>
   </div>

   <div id="user-info2"> //db userinfo 2
      <p>ID#002 John Doe</p>
      <div id="dialog-box">Profile of John Doe</div>
   </div>

</div>

EDIT: By the way , here is what i have done so far

$('p').click(function() {
        $('#dialog-box').dialog({

       modal: true,
       width:560,
       height: 500,
       draggable: false,
       buttons: {
        Close: function() {
              $( this ).dialog( "close" );
        }
       }
    });
});

Only one dialog box is showing up, only for John Smith. I don't have the idea to come up the desired output. Any help would much appreciated. Thanks.

EDIT 2: I added IDs to all div, to identify each div. Now, using jquery, how to implement q dialog box to show up the info when Name is clicked?

Answer 1

You are using the same id for boths div, id are uniques, maybe you should use a class for the dialog boxes like this:

$('.user-info').click(function() {
    $(this).find('.dialog-box').dialog({
        modal: true,
        width:560,
        height: 500,
        draggable: false,
        buttons: {
            Close: function() {
                $( this ).dialog( "close" );
           }
        }
    });
});

HTML:

<div id="db-users">
    <div class="user-info"> //db userinfo 1
        <p>ID#001 John Smith</p>
        <div class="dialog-box">Profile of John Smith</div>
    </div>

    <div class="user-info"> //db userinfo 2
        <p>ID#002 John Doe</p>
        <div class="dialog-box">Profile of John Doe</div>
    </div>
</div>

Answer 2

Remove all the IDs from the HTML except for the db-users .

The classes aren't really required either, but you can leave them in if you're using them for styling.

Your HTML will look like this:

<div id="db-users">
    <div> <!-- db userinfo 1 -->
        <p>ID#001 John Smith</p>
        <div>Profile of John Smith</div>
    </div>

    <div> <!-- db userinfo 2 -->
        <p>ID#002 John Doe</p>
        <div>Profile of John Doe</div>
    </div>
</div>

Then in your jQuery (assuming 1.7):

$('#db-users p').on('click', function(e) {
    $(this).next('div').dialog({
        ... your dialog options ...
    });
});