CODEWITHSUNDEEP
javascriptjqueryajax
AlirezaAP
AlirezaAP

Reputation: 25

Ajax running inside another one, by click event

Hi, this is my jQuery Ajax code. 1st Ajax calculates price, 2nd one process the buying. Everything is fine, except when I change inputs in form and run calculate again, 2nd ajax runs twice or as many times as I change input!.

I mean, it sends the prev data(s) too. Although, duplicate data is handled well on server, but due to large db of real website, it might lead to server overload.

I used event.stopPropagation() and event.stopImmediatePropagation(), but obviously it sends the first data, not the last one. Also, I don't think that promises might work for me.

(function($) {

var calc = false;
var buy  = false;
var cost = '';
var ids  = '';

$( '.buy-body' ).on( 'click', '.buy-calc', function(event){
    
    cost = '';
    ids  = ''; // Maybe after every click they go empty again, but no
    calc = true;
    buy  = false; // data and var for ajax goes here

    $.ajax({
        type : "POST",
        data : { something },
        dataType   : "JSON",
        url        : ajaxurl,
        beforeSend : function() {
            // Btn Disabled
            event.preventDefault(); },
        success    : function( response ) {
            
            // Animate price and disable calc btn
            console.log( response.data );
        },
        complete : function(){
            calc = false;
            
                // Ajax call for buying
                    $( '.buy-body' ).on( 'click', '.buy-btn', function(event){
                        
                        event.preventDefault();
                        
                        buy = true;
                        if ( buy === false || calc === true ) return;
                        // Some var
                        var price  = cost;
                        var c_ids = ids;

                        $.ajax({
                            type : "POST",
                            data : { some data },
                            dataType   : "JSON",
                            url        : ajaxurl,
                            beforeSend : function() {
                                // Btn disabled },
                            success    : function( resp ) {

                                // Alert to user
                                console.log( resp );
                            },
                            complete : function(){
                                buy = false;
                                // Btn disabled
                            }
                        });
                    });
            // END of Buy Ajax
        } // END of Complete
    }); // END of Calc Ajax
});})( jQuery );

Upvotes: 2

Views: 35

Answers (1)

tao
tao

Reputation: 90188

You only need to register the second event handler once, outside of the first one:

(function($) {
  var calc = false;
  var buy = false;
  var cost = '';
  var ids = '';
  $('.buy-body')
    .on('click', '.buy-calc', function(event) {
      cost = '';
      ids = ''; // Maybe after every click they go empty again, but no
      calc = true;
      buy = false; // data and var for ajax goes here
      $.ajax({
        type: "POST",
        data: {
          something
        },
        dataType: "JSON",
        url: ajaxurl,
        beforeSend: function() {
          // Btn Disabled
          event.preventDefault();
        },
        success: function(response) {
          // Animate price and disable calc btn
          console.log(response.data);
        },
        complete: function() {
          calc = false;
        } // END of Complete
      }); // END of Calc Ajax
    })
    .on('click', '.buy-btn', function(event) {
      event.preventDefault();
      buy = true;
      if (buy === false || calc === true) return;
      // Some var
      var price = cost;
      var c_ids = ids;
      $.ajax({
        type: "POST",
        data: {
          some data
        },
        dataType: "JSON",
        url: ajaxurl,
        beforeSend: function() {
          // Btn disabled },
          success: function(resp) {
            // Alert to user
            console.log(resp);
          },
          complete: function() {
            buy = false;
            // Btn disabled
          }
        }
      });
    });
})(jQuery);

Upvotes: 3

Related Questions