Ajax, jQuery and PHP function from an a link

Question

I'm aiming to have a link that you click, it runs a php function then changes text to say something else if it has been clicked and becomes disabled.

jQuery and Ajax are quite new to me so I'm not sure what I'm meant to be doing.

I do know that I should wait for the DOM to be loaded before having it run so the link is rendered. And I know that is possible to load url's using jQuery and Ajax together.

My PHP function returns a 1 if it was successful and a 0 if it failed for some reason.

<?php echo lfi_didit($user_id, $post_id); // this will echo 1 if successful ?>

What I would like is someone to press the text link saying "I Completed It" for it to then load the function without the page refreshing and when it has loaded the link to change to "Done" and it to be disabled.

Is this a big thing? or even possible? I php and javascript both load differently but I have seen this done on other sites, just not known how it was done and this is the only way I can think of!

Possible? Yes. A big thing? It takes many steps, none of which are particularly hard. You should start by finding and following jQuery and AJAX tutorials and check the documentation for additional details. — George Cummins, May 24 '13 at 15:41
@tymeJV already covered it for the most part, but take a look at this question for a more detailed & thorough example: http://stackoverflow.com/questions/5004233/jquery-ajax-post-example I would suggest searching on Stack for other examples if needed. — digitalsteez, May 24 '13 at 15:49

score 2 · Answer 1 · answered May 24 '13 at 15:42

There are plenty of topics covering this exact thing (AJAX, PHP, etc). Assuming you have a link:

<a href="#" id="someLink">Click me to run AJAX request!</a>

Then your jQuery can be along the lines of

$(document).ready(function() {
    $("#someLink").click(function(e) {
        e.preventDefault(); <--stop default link action

        $.ajax({ //ajax stuff
            ...
            ...
            success: function(data) {
                //update your page as needed in success function 
            }
        });
    });
});

Hope this gets you started on the right path.

Ajax, jQuery and PHP function from an a link

1 Answers1