Dynamic Ajax MySQL List with Clickthrough

Question

I have a list from MySQL which I would like to add links to. When clicked the link will load information regarding the item. EG I have a database with a list of cars and specifications. When clicking an item in the list, properties regarding the car will load. So far I have managed to get it working for the first list item, but not sure how to iterate this to the other options:

Code I am using to achieve this:

$(document).ready(function () {
    $('#clickthrough2').click(function () {
        $.post('referrer-ajax2.php', {
            clickthrough: $('#clickthrough').val(),
            ref_date_from2: $('#ref_date_from2').val(),
            ref_date_to2: $('#ref_date_to2').val()
        },
        function (data) {
            $('#car1').html(data);
        });
    });     
});

HTML:

<div id="car1" class="statdivhalf2">
<h4>Select Car</h4>

<div class="statgrid">
    <?php
    $result=$ mysqli->query($sql); 
    if($result->num_rows === 0) { echo 'No Cars in selected time period.'; } 
    else { while ($row = $result->fetch_array()) { 
    ?>
    <input type="hidden" id="ref_date_from2" value="<?php echo $date_from; ?>" />
    <input type="hidden" id="ref_date_to2" value="<?php echo $date_to; ?>" />
    <input type="hidden" id="clickthrough" value="<?php echo $row['car_name'] ?>" />
    <a><div id="clickthrough2" class="col-5-6"><?php echo $row['car_name'] ?></div></a>

    <div class="col-1-6">
        <?php echo $row[ 'quantity']; ?>
    </div>
    <?php } } ?>
</div>
</div>

HTML After:

<div id="car1" class="statdivhalf2">
    <h4>Car Details</h4>

<div class="statgrid">
    <?php
    $result=$ mysqli->query($sql); 
    if($result->num_rows === 0) { echo 'No Cars in selected time period.'; } 
    else { while ($row = $result->fetch_array()) { 
    ?>
    <input type="hidden" id="ref_date_from2" value="<?php echo $date_from; ?>" />
    <input type="hidden" id="ref_date_to2" value="<?php echo $date_to; ?>" />
    <input type="hidden" id="clickthrough" value="<?php echo $row['car_details'] ?>" />
    <a><div id="clickthrough2" class="col-5-6"><?php echo $row['car_details'] ?></div></a>

    <div class="col-1-6">
        <?php echo $row[ 'quantity']; ?>
    </div>
    <?php } } ?>
</div>
</div>

If someone could help point me in the correct direction I would be very grateful. Love using jQuery but trying to understand it better.

EDIT: I have been scouring Google and have found lots of examples of running queries following the click of 1 button - such as this - but I cannot find out how to iterate that process to a series on mysql generated links

Answer 1

You are in the right direction. As you are iterating on the results from your DB, it will not be good to use an id for each element as one the full HTML is generated you will actually have multiple elements with the same id and this is the problem. Instead use classes to identify the elements. So, instead of this:

<input type="hidden" id="ref_date_from2" value="<?php echo $date_from; ?>" />
<input type="hidden" id="ref_date_to2" value="<?php echo $date_to; ?>" />
<input type="hidden" id="clickthrough" value="<?php echo $row['car_name'] ?>" />
<a><div id="clickthrough2" class="col-5-6"><?php echo $row['car_name'] ?></div></a>

User something like this, where id's have been changed to classes and the link has an id with the row identifier and wrapped it all in a div with a unique id for easy access:

<div id="car-<?php echo $row['car_id'];?>">
   <input type="hidden" class="ref_date_from2" value="<?php echo $date_from; ?>" />
   <input type="hidden" class="ref_date_to2" value="<?php echo $date_to; ?>" />
   <input type="hidden" class="clickthrough" value="<?php echo $row['car_name'] ?>" />
   <a><div id="<?php echo $row['car_id'];?>" class="clickthrough2 col-5-6"><?php echo $row['car_name'] ?></div></a>
</div>

Then, for the click event you can use:

$(document).ready(function () {
    $('.clickthrough2').click(function () {
        // get car id
        carId = $(this).attr('id'); // get the car id to access each class element under the car div container

        $.post('referrer-ajax2.php', {
            clickthrough: $('#car-'+carId+' .clickthrough').val(),
            ref_date_from2: $('#car-'+carId+' .ref_date_from2').val(),
            ref_date_to2: $('#car-'+carId+' .ref_date_to2').val()
        },
        function (data) {
            $('#car1').html(data);
        });
    });     
});