Question

I currently have a page which utilizes a mix of PHP, JQuery and Ajax. The page displays a table of items, with corresponding anchors next to each item (row) to View Details, Edit, or Delete that specific item.

When the page initially loads, it makes a call via Jquery/Ajax to populate the table, and appends the item ID to the URL of each item’s anchor (ex:<a id="myanchorid" href="viewdetails.php?id=5">) Instead of taking the user to a new page, I want to be able to use Jquery’s dialogue function to open the page in a dialogue pop-up.

The problem I’m running into is that in order to properly call my Jquery function, I obviously need an unique ID for each anchor, but since I don’t know how many items I’ll have when the page loads, and that each item’s ID could be any number I’m stumped as to how to create anchor tags with IDs that I can them pass to my dialogue function.

Thanks!

I’m currently using the following function:

$(document).ready(function(){
 function yourfunction(event) {
           alert($('#myanchorid').attr('href')); 
          //$("#dialog").load(/getEventNameById/').dialog(); //will add item ID here
         return false;
    }


$('#myanchorid').live('click',yourfunction); //need myanchorid to dynamically be passed...myanchorid1, myanchorid2...

});

Answer 1

You can use HTML5 data attributes:

<a href="viewdetails.php?id=5" data-id="5" class="view_more">Click to view</a>

And then:

$('.view_more').click(function()
{
    id = $(this).data('id') // should yield 5
});