How to run jQuery to disable onclick before calling Dajaxice? Current solution is ugly

Question

I am trying to block the use of a button while Dajaxice/Dajax is processing. I need to guarantee that a second Dajaxice onclick call isn't made if it happens to take a long time before the Dajax to complete.

I've checked the Dajax/Dajaxice readthedocs, stackoverflow, and google couldn't find a solution. So I started hacking....

I started using Dajaxice in a basic button might go like this:

<button id="btn" onclick="Dajaxice.example.myexample(Dajax.process);">
    Click here!
</button>

But I want to remove the onclick attribute value while Dajax is processing. I first tried to remove the onclick in the call back function, but it's too late at that point since the callback doesn't get called until after the Dajaxice call:

<button id="btn" onclick="Dajaxice.example.myexample(my_js1_callback);">
    Click here!
</button>

<script>
    function my_js1_callback(data){
    $("#wkbtn").attr('onclick', ""); /* Too Late */
    Dajax.process(data);
    }
</script>

The issue is that the Dajaxice function myexample is called before the onclick attribute value is clear (as it needs to be or they would be no call). I want to clear the onclick before the Dajaxice function is executed.

In my latest attempt, I moved the Dajaxice call into the jQuery instead of in the onclick:

<button id="btn" onclick="my_dajaxice_myexample();">
    Click here!
</button>

<script>
    function my_js1_callback(data){
    Dajax.process(data); /* process callback */
    }
    function my_dajaxice_myexample(){
    $("#wkbtn").attr('onclick', ""); /* runs before Dajaxice */
        $(function(){Dajaxice.example.myexample(my_js1_callback);})
    }
</script>

It works, but seems ugly. It seems there has got to be a something better than this belt-and-suspenders overkill approach.

Any suggestions?

Edit: Updating based on Vash's answer:

<button id="btn">
    Click here!
</button>

with jQuery/Dajaxice code:

<script>
$('#btn').click(function(){

    $('#btn').attr("disabled", "disabled");
    /* other pre-Dajaxice changes here */
    Dajaxice.example.myexample(Dajax.process);
}); 
</script>

Expanding this a bit, I like having the possibility of replacing the "Dajax.process" usage in the above example with a function call to allow running post-Dajaxice call JavaScript code in this revised jQuery/Dajaxice code:

<script>
function my_callback(data){
    /* post-Dajaxice call, pre-Dajax execution changes here */
    Dajax.process(data); /* process callback */
    /* post-Dajax execution changes here */
}
$('#btn').click(function(){

    $('#btn').attr("disabled", "disabled");
    /* other pre-Dajaxice changes here */
    Dajaxice.example.myexample(my_callback);
});
</script>

Answer 1

I believe doing this should suffice:

Leave your HTML as is:

<button id="btn">
    Click here!
</button>

And with jQuery do this:

$('#btn').click(function(){

    $('#btn').attr("disabled", "disabled");

    if($('#btn').attr("disabled")) {
        Dajaxice.example.myexample(Dajax.process);
    }
});

A simple jsfiddle demonstrates this http://jsfiddle.net/37VTL/1/

It disables the button, then checks if the button is really disabled, and if it is, then executes the function. Even though it seems redundant to check if the button is disabled after you've disabled it, it's just a way to make sure your function runs the way you want it.