Question

Basically I have a href that passes through the id of an image via json which looks like this:

http://localhost:4567/public/vote.html?image=50b4d006fa4634bb130000fe

this then creates/updates an image in mongo based on the id and updates if the user/visitor has voted.

at the moment i use silex to redirect after the code within that vote.html has been processed:

 return $app->redirect('popular.html'); 

i was wondering if it was possible to use jquery to process the above href without redirecting, so basically i could click vote and the number would change seamlessly without the user knowing they have been redirected.

answered

sorry for the vague question but my answer does come from the principle of that posted below.

i changed the href to assign a class of vote & the id of the image:

<a class="vote" id="' + image.id + '" href="#">

then added this to my $(document).ready function:

$(".vote").live('click', function() {
        $('span', this).toggle();
        $.ajax( site_url + 'vote.html?image=' + $(this).attr('id'));
    });

this in theory uses the id of the mongo object and appends it to the url for each time the object is clicked, processing the href without redirecting.

Answer 1

Yes, you can use a bit of jQuery to help you out. This is a very contrived example, as you have not provided any HTML markup examples for your vote buttons / images.

$(function() { // anything in here will happen once the DOM is ready
    $('.vote').click(function(e) { // assign click for each elem w/ class "vote" 
        e.preventDefault(); // prevent default action (if elem was an anchor)
        // Make the server request asynchronously
        var $this = this;
        $.ajax({
            type: "POST", // or "GET"; or use $.post()/$.get() 
            url: $(this).attr("href"), // the href of the anchor
            data: null // or JSON here (e.g. { 'id': 'abcde' })
        }).done(function(data) { // vote.html should be image data of some kind
            // update the DOM with the new vote image
            // possible example if response was base64 encoded png
            $($this).closest('image').attr("src", "data:image/png;base64," + data);
        });
    });
});