Ajax link to run codeigniter controller then update html

Question

Sorry for the most simplest of questions but I can't seem to get anything to work. It's the first time I've really played around with AJAX.

I'm developing in codeigniter and I have a link that when clicked runs the controller: photo function: like and allows the logged in user to like the photo then redirects the user back to the photo and displays a slightly different version of the button showing that the user likes the photo.

<a href="<?php echo site_url('photo/like'); ?>/<?php echo $photos['id'];?>" class="uk-button <?php if ( $liked == '1' ) : ?>uk-icon-heart uk-button-danger<?php else: ?>uk-icon-heart<?php endif; ?>" data-uk-tooltip title="<?php if ($liked == '1'):?>Likes<?php else:?>Like<?php endif; ?>"> <?php if ( $like_count > '0' ) { echo $like_count; } ?></a>

It works fine but I thought it would be cool to replace it with an ajax function so it's more of a fluid motion instead of navigating off the page and then back again.

Any help would be greatly appreciated.

Answer 1

$(".uk-button").click(function(e) {
  e.preventDefault();
  //Here you can add your ajax
    $.ajax({
     url: site_url + 'photo/like',
     data: { 
      liked : 1
     },
     type: 'POST',
     dataType: 'json',
     async : false,
     success: function(success_record) {
       console.log(success_record,":success_record");
       //You might receive your like count from PHP here
     }
    });
});

In your success record you would get your PHP record values. Based on that you can increment or decrement count in success function

Answer 2

You can do something like this:

$(document).ready(function()
{
    $('.likeLink').on('click', funciton()
    {
        var obj = $(this);
        var id = obj.attr('id'); //anything you want to pass to update your like somewhere

        $.ajax(
        {
            type: 'POST',
            url: 'YourFilePathWhereYouWillDoTheLike',
            data:
            {
                id: id,
            },
            cache: false,
            success: function(response)
            {
                obj.html("You have liked this!");
            }
        });

        return false;
    })
})