load revelant data when clicking on link using jQuery

Question

Hey, I'm trying to make an Address book for my site and I was thinking of having two panes. The one on the left to have Contact names, and the one on the right to have the contact details.

I can get the Contact pane loaded up using a while loop to cycle through my query, but then I was thinking that I really had no Idea how to load the details of that contact when the user clicks on a specific contact name.

How would I be able to approach this problem?

Answer 1

If you have something like:

<div id="contactNamesPane">
 <ul>
    <li><a href="#" class="names" id="johnDoe">Doe, John</a></li>
 </ul>
</div>

<div id="contactDetailsPane">
</div>

$('contactNamesPane a.names').click(
   var thisContactId = $(this).attr('id');
   $('contactDetailsPane')
        .load('http://path/to/script.php?contactId=' + thisContactId + ' #' + thisContactId);
);

This has the assumptions that you have a php script to generate the contact details (located at http://path/to/script.php and this script can take a GET variable in order to show the particular individual.

It also assumes that this data will be placed inside an element of an id equal to the contact's name.

A vaguely coherent demo's posted on my server at: http://davidrhysthomas.co.uk/so/loadDemo.html

Answer 2

When you create the list on the left add the id of the contact to the rel

<ul id="contacts">
    <li><a href="#" rel="ID_OF_CONTACT">Name Here</a></li>
    ...
</ul>

Then with jquery you can use the rel attribute and peform a ajax request to a php page that returns the info of the contact with that id

$("#contact a").click(function() {

    var id = $(this).attr("rel");
    $.get("url_of_php_page", { id: id },
        function(data){
            // do something with the data
        }
    );

});