2

I am using this piece of code to make text button on web page

<a href='#' onclick="new Ajax.Updater('history', '/responsesG', {parameters: {name: '%s', port: '%s', profil: '201', action: 'profile'}, 
    insertion: Insertion.Top}
        ); return false;">Do something</a>

since it is costly call I would like to prevent user from multiple clicking it since it makes asynchronous call and they get for instance 3 responses for same thing (since response last for 3 to 5 seconds) i tried option

asynchronous: false

with same success(failure). How can I do it?

Edit:

<a href="#" onclick="diagnostika('mac_adresa');return false;">-Mac address</a>
<script type="text/javascript">
function diagnostika(akcija) {
            if(!this.clicked) {
                this.clicked = true;
                button = this;
                new Ajax.Updater('history', '/responsesG', {
                    parameters: {
                        name: '%(name)s',
                        port: '%(port)s',
                        action: akcija},
                    insertion: Insertion.Top,
                    onComplete: function() {
                    button.clicked = false;}});}
                return false;};
</script>

This is what I implemented in the end.

5 Answers 5

3

Give your link a unique ID attribute, e.g:

<a href="#" id="foo">Do something</a>

Then in your JavaScript you can do this:

$("foo").observe("click", function() {
  this.disabled = true;
  new Ajax.Updater("history", "/responsesG",
                   { parameters: { name: "%s",
                                   port: "%s",
                                   profile: "201",
                                   action: "profile" },
                   insertion: Insertion.Top });
  return false;
});
2
  • with this I still get 3 call is user click 3 times link while waiting for first one to finish
    – Ib33X
    Jun 3, 2009 at 6:45
  • i gues that this.disabled = true; should disable button only button is still button after it?
    – Ib33X
    Jun 3, 2009 at 7:36
2

You'll need to add something like:

if(!this.clicked) {
    this.clicked = true;
    button = this;
    new Ajax.Updater('history', '/responsesG', {
        parameters: {
            name: '%s',
            port: '%s',
            profile: '201',
            action: 'profile'
        },
        insertion: Insertion.Top,
        onComplete: function() {
            button.clicked = false;
        }
    });
}

return false;

But, really, bring this out of an inline onClick so that it's easier to read.

3
  • Thank you for the edit, I don't know how to do multi-line code.
    – Adam Luter
    Jun 2, 2009 at 17:36
  • there is typo onCompleted: function() it is onComplete: function()
    – Ib33X
    Jun 3, 2009 at 7:46
  • Fixed, thank you. I like others use of the disabled too, but that may or may not be what you want. This, though, gives you the basic idea.
    – Adam Luter
    Jun 3, 2009 at 14:05
0

Disable (or even hide) the link in the onclick handler, and then reenable or show it when you get a response.

0

send the onclick to your own function, disable the button, start a timer that will re-enable the button then do the Ajax.Updaer.

0

return a global flag onclick, that is set to false once a request goes out, and back to true when it comes back

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.