7 Replies - 547 Views - Last Post: 21 November 2014 - 07:35 AM

#1 Mr_P   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 07-July 13

Run multiple $.get() from single change event

Posted 20 November 2014 - 04:31 AM

I am looking for the correct way to run more than 1 $.get() event from a single change event. The code I have posted only returns the first call to loadboxDstrsubcat.php?dstrdept.

I would be grateful if someone could point me in the right direction. I know there is the .when option, but I am still quite green to ajax so any help would be most welcome and enable me to move on. Thanks

$(function() {

$("#dstr_dept").chosen({
      width: "260px",
      placeholder_text_single: "Select Some Options"
    }).change(function() {

    $(this).after('<div id="loader"><imgages src="img/loading.gif" alt="loading files" /></div>');
     $.get('loadboxDstrsubcat.php?dstrdept=' + $(this).val(), function(data) {
      $("#box_dstr").html(data);
      $('#loader').slideUp(200, function() {
        $(this).remove();
        $("#box_dstr").trigger("chosen:updated");
      });
    });
    $(this).after('<div id="loader"><imgages src="img/loading.gif" alt="loading files" /></div>');
     $.get('loadboxAdrDstrsubcat.php?dstraddr=' + $(this).val(), function(data) {
      $("#dstr_address").html(data);
      $('#loader').slideUp(200, function() {
        $(this).remove();
        $("#dstr_address").trigger("chosen:updated");
      });
    });
  });
});


Is This A Good Question/Topic? 0
  • +

Replies To: Run multiple $.get() from single change event

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4208
  • View blog
  • Posts: 13,283
  • Joined: 08-June 10

Re: Run multiple $.get() from single change event

Posted 20 November 2014 - 07:43 AM

Quote

I know there is the .when option, but I am still quite green to ajax

thats unrelated. jQuerys .when() relates to its Deferreds, not AJAX in general.

anyways, you have set up a race condition on your loader (since both calls use it). Im not sure if you want to run both AJAX call parallel or subsequently. for the former case, they must not use the same loader. in the latter case you need to kind of chain them. something alike
// not entirely sure since the docs are offline atm.
$.get(url, successCallback1)
  // execute AJAX call #2 after call #1 but no matter of its outcome
  .always(function() {
    $.get(url, successCallback2);
  })
;


Was This Post Helpful? 0
  • +
  • -

#3 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6246
  • View blog
  • Posts: 24,014
  • Joined: 23-August 08

Re: Run multiple $.get() from single change event

Posted 20 November 2014 - 09:27 AM

Alternatively, you could use this async library to do the gets in parallel
Was This Post Helpful? 0
  • +
  • -

#4 Mr_P   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 07-July 13

Re: Run multiple $.get() from single change event

Posted 20 November 2014 - 12:44 PM

Thanks I shall give it a shot.
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4208
  • View blog
  • Posts: 13,283
  • Joined: 08-June 10

Re: Run multiple $.get() from single change event

Posted 21 November 2014 - 01:20 AM

however, be aware that the goal of the async library is not to simply execute code in parallel. its to start things in parallel and process the incoming results at once when all is done.
Was This Post Helpful? 0
  • +
  • -

#6 Mr_P   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 07-July 13

Re: Run multiple $.get() from single change event

Posted 21 November 2014 - 02:07 AM

Perhaps I should look at the .when option. Would that help do you think. Thanks
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4208
  • View blog
  • Posts: 13,283
  • Joined: 08-June 10

Re: Run multiple $.get() from single change event

Posted 21 November 2014 - 05:05 AM

It depends on what you want.

if youre on successive execution, better use a Promises/A+ compliant library since with ES6 Promises will be natively implemented and the difference between jQuerys Deferreds and Promises may lead to problems later.

besides that, I have already shown you an example of using successive ajax calls.
Was This Post Helpful? 0
  • +
  • -

#8 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6246
  • View blog
  • Posts: 24,014
  • Joined: 23-August 08

Re: Run multiple $.get() from single change event

Posted 21 November 2014 - 07:35 AM

This should perform the updates in parallel, independently, removing the loading div once both are complete.
$(function() {

$("#dstr_dept").chosen({
      width: "260px",
      placeholder_text_single: "Select Some Options"
    }).change(function() {
       
       $(this).after('<div id="loader"><images src="img/loading.gif" alt="loading files" /></div>');
       var value = $(this).val();
       async.parallel([
          function(cb) {
             $.get('loadboxDstrsubcat.php?dstrdept=' + value, function(data) {
                $("#box_dstr").html(data);
                $("#box_dstr").trigger("chosen:updated");
                cb(null);             
             });
          },
          function(cb) {
              $.get('loadboxAdrDstrsubcat.php?dstraddr=' + value, function(data) {
                 $("#dstr_address").html(data);
                 $("#dstr_address").trigger("chosen:updated");
                 cb(null);
              });
          }
       ], function() {
          $('#loader').slideUp(200, function() {
             $(this).remove();    
          });
       });
    });
});


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1