jquery ajax call runs multiple times

Question

I'm having a problem when I click my generate cards button multiple times(it generates a new set of cards randomly on every click) and then I click on any of my buttons that sort it will run multiple ajax calls instead of just the latest generated array. It will pass in every array of cards that has been generated not just the most recent one, sort of like it's keeping a queue.

console log will output, "sending color sort", "sending color sort", "sending color sort", etc. *For as many times as i've clicked my generate_cards* button

How can I have it so the sort function only runs once.

<input type="button" value="Generate Cards" id="generate_cards"> </input>
<input type="button" class="sorter" value="Color Sort" id="color_sort"> </input>
<input type="button" class="sorter" value="Shape Sort" id="shape_sort"> </input>

Generate Cards:

 $('#generate_cards').click(function() {
          $.ajax({
          url: ''+set,
          async: false,
          type: 'POST',
          dataType: 'html',
          success: function(data) {
          var obj = JSON.parse(data);
         //sent array to sorting function :
          sorting(obj);
          var tmpl = $("#formInfo_tmpl").html();
          var html = Mustache.to_html(tmpl, obj);
          pool_window.html(html);
          initilizejs();

          },
          error:function(jqXHR, textStatus, errorThrown){
          alert("Error type" + textStatus + "occured, with value " + errorThrown);
                                   }
          });

card sort function

function sorting(cards) {

$('.sorter').on("click", function() {
var cards_window = $("#sealed_pool");
var sort_type = $(this).attr('id');
//just give me the first word:
sort_type = sort_type.replace(/(\w+).*/,"$1");

console.log('sending'+sort_type);

      $.ajax({
      url: '',
      async: false,
      type: 'POST',
      data: ({'cards':cards, 'sort_type':sort_type}),
      dataType: 'html',
      success: function(data) {
         var obj = JSON.parse(data);
        if(sort_type =='color_sort')
              {
        var tmpl = $("#color_sort_tmpl").html();
              }
         if(sort_type =='shape_sort')
              {
        var tmpl = $("#formInfo_tmpl").html();
              }
            var html = Mustache.to_html(tmpl, obj);
            cards_window.html(html);
        initilizejs();

      },
               error:function(jqXHR, textStatus, errorThrown){
                                   alert("Error type" + textStatus + "occured, with value " + errorThrown);
                               }
      });

});

}

Dr.Molle · Accepted Answer · 2014-02-04 03:24:00Z

2

remove the previous click-listener before you add a new:

$('.sorter')
  .off("click")
  .on("click", function() {
    //code
  });

answered Feb 4, 2014 at 3:24

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

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

Comments

dev4092 · Accepted Answer · 2014-02-04 04:36:33Z

0

You need to use setInterval within the document ready function, like this: $(document).ready(function() {setInterval(doAjax, 5000);});

answered Feb 4, 2014 at 4:36

dev4092

2,9111 gold badge18 silver badges15 bronze badges

Collectives™ on Stack Overflow

jquery ajax call runs multiple times

Generate Cards:

card sort function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Generate Cards:

card sort function

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related