Solved

Run multiple $.get() from single change event

Posted on 2014-11-20
4
126 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 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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now