Hey all,
Was hoping someone could give me a little hand with this ajax jQuery script. Basically, the php foreach loop will output a list of items, each with a unique it, and when the submit button next to the item is pressed it should grab the item ID, show a laoding gif and ajxify the php script. Half the time the ajax doesn't work though and when it does it shows the loading gif next to all the items. I think it is just to do with how I'm selecting the correct div, the ajax part works fine when it does. Basically I don't think I'm pulling the unique ID correctly but not really sure where I've gone wrong!
All help appreciated!!
Was hoping someone could give me a little hand with this ajax jQuery script. Basically, the php foreach loop will output a list of items, each with a unique it, and when the submit button next to the item is pressed it should grab the item ID, show a laoding gif and ajxify the php script. Half the time the ajax doesn't work though and when it does it shows the loading gif next to all the items. I think it is just to do with how I'm selecting the correct div, the ajax part works fine when it does. Basically I don't think I'm pulling the unique ID correctly but not really sure where I've gone wrong!
All help appreciated!!
Code:
<?php if(isset($records)) : foreach($records as $row) : ?>
<div class="book id_<?php echo $row->booksId; ?>">
<div class=""><a href="books/<?php echo $row->booksSlug; ?>"><?php echo $row->booksTitle; ?></a>
<div class="finished">
<?php echo form_open('members/index/remove_reading');?>
<input type="submit" id="update_reading" value="Finished!" /><span class="ajax_loader"></span>
<input type="hidden" id="id" name="id" value="<?php echo $row->booksId; ?>">
<?php echo form_close(); ?>
</div>
</div><!-- div.book -->
<?php endforeach; ?>
<?php endif ;?>
<!-- Ajax UPDATE READING -->
<script type="text/javascript">
$('#update_reading').click(function(){
var book_id = $('#id').val();
$('.id_' + test + ' span.ajax_loader').empty().html('<img src="site_images/ajax-loader.gif" class="ajax_loader" alt="Loading Icon" />');
var form_data = {
id: book_id,
ajax: '1'
};
$.ajax({
url: "<?php echo site_url('members/index/remove_reading'); ?>",
type: 'POST',
data: form_data,
success: function(msg) {
$('.id_' + test).html(msg);
}
});
return false;
});
</script>