Calling Multiple Functions from onclick

Question

Okay, so I have a snippet of code from a website containing a button:

    <button type="button"
            onclick="laser(); $.post('sheepDB.php', { vic: vic, num: numVics });">
    Activate Her Powers!
    </button>

However, when I click the button the first time, the first function executes, but if I click it a second time, both the first function AND the Ajax call are executed. How do I get onclick to execute them sequentially? (laser() determines the values sent by the Ajax request, so it must be sequential).

Daniel Vandersluis · Accepted Answer · 2010-08-27 19:25:48Z

4

Javascript does execute sequentially. However, AJAX is asynchronous (hence the A), which means that Javascript execution continues while the AJAX request is taking place. If you trigger your onclick a second time before the first AJAX request completes, it is possible that the first AJAX request will not complete before the second click (and thus look like it's only happening once).

answered Aug 27, 2010 at 19:25

Daniel Vandersluis

94.7k23 gold badges174 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandip Subedi Over a year ago

I am running into same issues even with async-await .. any idea?

Lucky · Accepted Answer · 2013-01-01 07:15:30Z

Well first off all i would not put the code directly in onClick just attach the handler $(selector).click(). regardless your code wont do what you are trying to do... you need something like this as your handler:

$(selectorForButton).click(
  function(e){
  e.preventDefault(); // dont fire the normal event

  /* youll probably have to rework laser if it depends on `this` referring to the dom element    
   * clicked in this example lets say it returns a hash of vic and num vics...
   */
  var _this = $(this);
  var data = laser(this);
  // check if this is already sending a post request
  if(!_this.data('activated')){
     $.post('sheepDB.php', data, function(){
       // this is important - we need to set it to false so we now on the next click that
       // post innt in the process of doing its thing
        _this.data('activated', false);
     });
  }

  return false;
});

cj_battista · Accepted Answer · 2010-08-29 04:57:22Z

0

$(document).ready(function () {
   $('#yourButtonId').click(function() {
      // collect your values into a json object
      var someData = {
         x: '',
         y: '',
         z: ''
      };

      //execute post
      $.post('someUrl', someData, function(data, textStatus) {
         // callback
      });
   })
})

answered Aug 29, 2010 at 4:57

cj_battista

1

Collectives™ on Stack Overflow

Calling Multiple Functions from onclick

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related