Question

I have been struggling with this for days. This works, but does not pass the correct variable to the page ( testMap.php ). I use data from my DB and hovering over the link does show the correct variables in the URL, but for whatever reason jquery is always grabbing the first variable in the loop. Any suggestions?

<?php
    $myname = $_SESSION['username'];
    global $database;
    $stmt = $database->connection->query("SELECT * FROM ".TBL_FLIGHTS." WHERE username='$myname'");

        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            $date       = $row['date'];
                    $starting   = $row['starting'];
                    $ending     = $row['ending'];
                    $route      = $row['route'];
                  echo "<a class=\"route\" href=\"start=$starting&end=$ending\"><p class=\"pBlue\">$date - $starting - $ending - $route</p></a>";
                  ?>
        <div id="start" style="visibility:hidden"><?php echo $starting; ?></div>
        <div id="end" style="visibility:hidden"><?php echo $ending; ?></div>
        <?
    }

    ?>


<script type="text/javascript">
$(document).ready(function() {
    var start = $('#start').text();
    var end = $('#end').text();

    $(function() {
      $(".route").click(function(evt) {
         $("#mymap_canvas").load("testMap.php?start="+start+"&end="+end )
         evt.preventDefault();
      })
    })

});
</script>

Answer 1

Indeed; you need to capture the start and end values within the click event and choose the start and end values that are nearby to the route that was clicked.

Possibly what you want:

$(".route").click(function(evt) {
    var start = $(this).siblings(".start").text();
    var end = $(this).siblings(".end").text();
    $("#mymap_canvas").load("testMap.php?start="+start+"&end="+end )
    evt.preventDefault();
}); // I believe you are missing a semicolon here and at the end, too

But unless I’m missing something you could really just build that href via php (like you already are except complete it with the full path and query string) and then execute it like this:

$(".route").click(function(evt) {
    // Load the href of the route anchor into 'mymap_canvas'
    $("#mymap_canvas").load($(this).attr("href"));
    event.preventDefault();
    return false; // Prevent the normal click behavior
});

No more hidden start and end! But be sure to update your original anchor tag to look like this:

<a class=\"route\" href=\"testMap.php?start={$starting}&end={$ending}\">...</a>