Question

I have a data table populated from a MySQL database via PHP. The first column is a flag feature so when the pin icon on any particular row is clicked the database is updated to either ‘y’ or ‘n’ for this field. I am then able to sort on this column bringing all my flagged rows to the top of the table. Since my table is rather large, I decided to do this via Ajax. However, it only works for the first call then becomes inactive. The database is not updated after the first request either.

here is the HTML/PHP.

<td align="center" id="pin_record">
<?php // Flag Column    
if ($row['flag'] == 'n'){ ?>        
    <a class="flag_image" href="list_all_quotes.php?id=<?php echo $row['quotes_id'].'_y'; ?>">
    <img src="../images/flag_off.gif" border="0" width="17" height="17" alt="Flag Off">
<?php } elseif ($row['flag'] == 'y'){ ?>
    <a class="flag_image" href="list_all_quotes.php?id=<?php echo $row['quotes_id'].'_n'; ?>">
    <img src="../images/flag_on.gif" border="0" width="17" height="17" alt="Flag On">
<?php } ?>
</a>
</td>

and here is the jQuery

function ajax_init()
{
    $('#pin_record a:first-child').on("click",(flag_record));
}

function flag_record()
{
    var id_pin = this.href.replace(/.*=/,'');
    var id_array = id_pin.split("_"); // split the quote id and pin
    var id = id_array[0];
    var pin = id_array[1];
    this.id = 'flag_link_'+id;
    $.getJSON('deletequote.php?ajax=true&id='+id+'&pin='+pin,set_flag);
    return false;
}

function set_flag(data)
{
    if(!data.success)return alert(data.serverMessage);
    var href = '<a class="flag_image" href="list_all_quotes.php?id='+data.id+'_'+data.pin+'">';
    $('#flag_link_'+data.id)
    .replaceWith(href+data.flagimg);
}

$(document).ready(ajax_init);

I am quite new to using Ajax so any help would be greatly appreciated.

Many thanks,
Kris

Answer 1

You request is being cached. Break the cache by using a unique URL:

'deletequote.php?ajax=true&id='+id+'&pin='+pin,set_flag+"&now="+new Date()