Solved

Run multiple $.get() from single change event

Posted on 2014-11-20
4
131 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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

710 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