retrieving variables with jquery ajax

Question

 <div class="lead_detail_box_routing">


<div class="lead_detail_box_left">location 1</div>
<div class="lead_detail_box_right">Route</div>
<div class="lead_detail_box_left">location 2</div>
<div class="lead_detail_box_right">Route</div>
<div class="lead_detail_box_left">location 3</div>
<div class="lead_detail_box_right">Route</div>
<div class="lead_detail_box_left">location 4</div>
<div class="lead_detail_box_right">Route</div>

<div id="results" style="text-align:center;"></div>  

</div>     <!-- end lead_detail and routing-->  

e.g. when user clicks on "route" I want my jquery-manual-routing.php to get the "3" ..

so far I have:

   <script type="text/javascript">
    $(document).ready(function() {
        $("a#route").click(function() {
            $("#results").load( "jquery-manual-routing.php", { route_to: ???? } );
            return false;
        });
    });    
    </script> 

so in my php script, when the user clicks on route next to location 3 I want to be able to grab $_GET['route_to'] =3;

Also note that my table already has the class assigned since I am using css to style it

The answer will be pure php echo

Answer 1

$(document).ready(function() { $("a#route").click(function(event) { link = $(event.target);

        $("#results").load( "jquery-manual-routing.php", { route_to: link.text() } );

        return false;
    });
});

That would call jquery-manual-routing.php?route_to=location 3

Answer 2

fill in the url of the anchor tags with the actual link you need then override the default click action with your jquery function

<a class="route" href="jquery-manual-routing.php?route_to=1">route to destination 1</a><br/>
<a class="route" href="jquery-manual-routing.php?route_to=2">route to destination 2</a><br/>
<a class="route" href="jquery-manual-routing.php?route_to=3">route to destination 3</a><br/>
<a class="route" href="jquery-manual-routing.php?route_to=4">route to destination 4</a> etc...

<script type="text/javascript">
    $("a.route").live('click', function() { // live is better
        $("#results").load( $(this).attr('href') );
        return false;
    });
</script> 

Answer 3

If going by the HTML you provided this is a possible solution:

<script type="text/javascript">
    $(document).ready(function() {
        $("div.lead_detail_box_right").click(function() {
            $("#results").load( "jquery-manual-routing.php", { route_to: $(this).prev().text().replace("location ", "") } );
        });
    });    
</script> 

Grab the previous element and get the number in the text. I used replace, you can also use split

Answer 4

Getting the number from the text: (this is the clicked div)

$(this).text().replace(/.*?(\d+)$/, '$1')

Getting it from the position of the div:

$('.lead_detail_box_left').index(this) + 1