Question

I just got help with the jQuery portion of this code (thanks David Thomas)

this is my current code so far, I was wondering what else I need so that the results are returned.

            <div class="toolbar">
                <a href="javascript:void(0);" onclick='$("#addC<?=$_SESSION['user_id'];?>").toggle();'><p id="addC20" style="float: left"></p></a>
                <p style="float: right; position: relative; top: 0px; left: -10px;">Contact Manager</p>
            </div><!-- end toolbar -->
            <script>
                $(document).ready(function(){
                    $('#names a.names').click(function(){
                        var thisId = $(this).attr('id');
                        $('#detailsPane').load('dependencies/ajax/contacts.ajax.php #' + thisId);
                        return false;
                    })
                });
            </script>
            <div id="names">
                <h3>Contacts</h3>
                <ul id="post">
                <? while($row = mysql_fetch_array($contacts)) ?>
                    <li><a class="names" id="<?=$row['id'];?>"><?=$row['first_name'];?>, <?=$row['last_name'];?></a></li>
                </ul><!-- end post -->

            </div><!-- end names -->

            <div id="detailsPane">

            </div>
            <div class="cushion"></div>

From this, the names or contacts are pulled from my database in my while loop, but I think whats causing me logic and confusion is how the ajax.php will then grab the ID from the ‘a’ anchor and pass it into my new output. What code do I need to format the data in my detailsPane?

Answer 1

I see no need to do that .load() with a hash url segment instead of a plain old GET parameter:

$('#detailsPane').load('dependencies/ajax/contacts.ajax.php?id=' + thisId);

Then in contacts.ajax.php you will get it as such:

$id = $_GET['id'] ;

Obviously you will need to sanitize and validate the id but that’s not in this question’s scope.

Then, based on that id contacts.ajax.php should just print out any output you wish to show in #detailsPane, and .load() will take care of it.