Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Run multiple $.get() from single change event

Posted on 2014-11-20
4
Medium Priority
?
137 Views
Last Modified: 2014-11-21
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 mist welcome. 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");
      });
    });
  });
});

Open in new window

0
Comment
Question by:peter-cooper
  • 2
4 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 40454841
Test this :
$(function() {
	$("#dstr_dept").chosen({
		placeholder_text_single: "Select Some Options"
	}).change(function() {
		$.ajaxSetup({async:"false"});
		alert("first GET"); // remove me once you got it
		$(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");
			});
		});
		alert("second GET"); // remove me once you got it
		$(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");
			});
		});
		alert("happy end"); // remove me once you got it
	});
});

Open in new window

0
 
LVL 2

Expert Comment

by:itnifl
ID: 40455039
Not sure if this will work, but you can try something like the following for a asynchronous result(just pseudo code here):
$.when(
  $.get('your stuff here', function() {
	//your stuff here
  });
).then(
  $.when(
	  $.get('your stuff here', function() {
		//your stuff here
	  });
  ).then(
    //and so forth
  );
);

Open in new window


If this is a bit nasty, you can try the following - also asynchronous:
$.get( "example1.php", function() {
  alert( "success1" );
}).done(function() {
    $.get( "example2.php", function() {
		alert( "success2" );
	}).done(function() {
		//and so forth
	});
});

Open in new window


Haven't tested these actually, just guessing :)
0
 

Author Comment

by:peter-cooper
ID: 40456847
@leakim
Works a treat thanks. Only question I have is, is it ok to have the loader named the way it is? ie, same id? thx
0
 

Author Closing Comment

by:peter-cooper
ID: 40457951
Thank you for your help
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question