change value of link running php code

Question

i want run a php code when a user click a link and change temporarily value of link with output returned by script without reloading page and redirect user to another page

for example if a users click on button :

Click Me!

a code php run for example script.php

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
    $.get("script.php");
    return false;
}
</script>

<a href="#" onclick="doSomething();">Click Me!</a>

for example if output of script( $result ) is: 30

then 30 will replaces button: "Click Me!" without reloading page

so at the end after the script is executed i have temporarily instead of "Click Me!" number 30 and if is possible also add a animation gif or something of similar so as: wait wait blinking during execution of script thanks

Answer 1

Try this, create a class with two methods uW (user wait) uWC (user wait cancel). This class can be reused for future as well

var Util = {
uW:function(id) {
            $("#"+id).html("<img src='path to animation GIF' />");        
},
uWC:function(id,data) {
        $("#"+id).html(data) ;        
}
}

Now your function will looks like this

function doSomething() {
Util.uW('clickme'); // clickme is ID of your anchor tag
$.ajax({
 url: "script.php",
 context: document.body,
  success: function(data ){
    Util.uWC('clickme',data );
  }
});

Answer 2

This might be what you are looking for. I am guessing you want to replace Click Me! with the value returned(30). If not, you can user data inside the function to replace whatever u want

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$el=$(this);
$.get("script.php",function(data){$el.html(data)});
return false;
}
</script>

<a href="#" onclick="doSomething(this);">Click Me!</a>

Answer 3

<a href="#" id="clickme">Click Me!</a>

And the javascript code:

$(function(){
    $('#clickme').click(function(){
        $(this).load('script.php');
        return false;
    });
});

Answer 4

You almost have your answers in your question. Use ajax. http://www.w3schools.com/ajax/default.asp you are also using jquery. Jquery has excellent documentation on ajax