How do I create unique id:s for jquery dialogs generated by php in a list?

I have a problem with jquery dialogs. When using them just hardcoded on to a button开发者_开发技巧 they work just fine. But when I run through a vector in php to generate some search results, my more info button stops working. The first option will generate a dialog when pressed, the content in it however is wrong. List items after this one will not show a dialog popup and if I press on a button when scrolled down it jumps up to the first item.

My guess is that this behavior is generated due to multiple buttons with the same id. This is the first homepage I've made and I do not really know how to tackle this problem.

Some code:

PHP part:

$outputList = '';
while($row = mysql_fetch_array($sql2)){

  ...yadayada...
  <a style="position:relative;left:600px;top:-40px;" href="#" id="dialog_link" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src" >
    <img src="images/search/info_btn_unsel.png" border="0" name="rollover" />
  </a>
</div>
</div>
}

JavaScript part:

<script type="text/javascript">
  $(document).ready(function(){
    // Dialog           
    $('#dialog').dialog({
      autoOpen: false,
      width: 600,
      buttons: {
        "Ok": function() { 
          $(this).dialog("close"); 
        }, 
      }
    });

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

complete file can be found here: http://dl.dropbox.com/u/10627595/timeseek_result.php

Thanks

---

If each dialog box has information in it unique to each row of search results, then each dialog needs its own unique id. Also, each dialog box content needs php variables that are unique for each row.

After reading your question and looking at your code, this appears to be the case. If I am correct, then solving your problem will be a little more involved than changing the id's to classes.

---

You must never have repeated ids, this was causing the problem. Use a class instead

So you'd have:

<a class="dialog_link" ... >

And your jquery code would be:

$('.dialog_link').click(function(){ //Note the . instead of #
   $('#dialog').dialog('open'); //The same code
   return false; //The same code
});

Hope this helps. Cheers

---

You can't have more than one item with the same id, an ID has to be unique.

Add some unique ID from your database results to the ID of your html link.

Then add a class "js_show_info" or the like to your link and attach your jQuery handler to this class.

$('.js_show_info').click()...

---

As everyone else already mentioned, you need to have unique IDs. Make a class dialog_link and assign IDs inside the while loop equal to a unique value, such as the SQL table row number of a given record.