Question

I am currently using JQuery Ajax to retrieve and display some data as follows.

/* PHP to select data and create Unordered list */

   <?php

    echo "<ul class=\"ctyul\">";
      while ($rowC = mysql_fetch_array($result))
     {
     echo "<li class=\"ctyli\"><a href=\"#"."&" .rawurlencode($rowC['PLAN']) ."\"" .">"   . $rowC['PLAN'] .  "</a></li>";
     };
     echo "</ul>";

     ?>

/* JQuery to select the li of obove list */

       $('Div.ctydiv ul.ctyul li.ctyli').click(function(){

       urlqueryC = location.href;
       urlpartsC = urlqueryC.split('&');
       urlcounty  = urlpartsC[1]; 

       $.ajax({
       url: 'php/cpdetails.php?search-n='+urlcounty,
       success: function (data) {
               $('#Pinfo').html(data);
            }
           });

When the user clicks on the List item it appends the $row[Plan] to the url, I then use the appended ‘PLAN’ name to retrieve a data set with another PHP script (cpdetails.php? search-n=urlcounty) and display the data in a div.

This all works, but it takes two clicks to display the data, first one to add the ‘PLAN’ name to the url and the second click displays the data.

I would like to do this in one click.

How can I get the $row[Plan] name to the Ajax call without using the url as the way to pass the PLAN name .

Answer 1

Attach the click handler to the link and get the href attribute:

(nicer HTML)

<ul class="ctyul">
<?php while(($rowC = mysql_fetch_array($result))): ?>
    <li class="ctyli"><a href="#<?php echo rawurlencode($rowC['PLAN']) ?>"><?php echo $rowC['PLAN'] ?></a></li>
<?php endwhile; ?>
</ul>

and JS:

$('Div.ctydiv ul.ctyul li.ctyli a').click(function(e){
    e.preventDefault();
    urlcounty  = $(this).attr('href').substr(1); 

    $.ajax({
        url: 'php/cpdetails.php?search-n='+urlcounty,
        success: function (data) {
            $('#Pinfo').html(data);
        }
    });
 });