Improve company productivity with a Business Account.Sign Up

x
?
Solved

Multiple Ajax Queries on one page

Posted on 2013-06-25
6
Medium Priority
?
288 Views
Last Modified: 2013-06-26
Hi guys,

I'm building an Android app using jquery mobile, and I need to make several Ajax calls on one page.

The first call looks like this:

<script> window.onload=showUser ;

 function showUser(str)
 {

 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   
   
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("blog").innerHTML=xmlhttp.responseText;
	 
     }
   }
 xmlhttp.open("GET","http://mysite.com/Mobile_App/m_news.php",true);
 xmlhttp.send();
 }
 </script>

Open in new window


This works fine and returns the date from m_news.php.

I'm struggling to figure out how I add another query on this same page.

When I copy the same code above, but change the ElementId and URL, the second one works, but it breaks the first one.

Now, I do understand why this is happening, but how do I make two or more different Ajax calls on the same page?
0
Comment
Question by:gesmuk
  • 3
  • 3
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39276664
Change the true to false
Ajax calls are normally asynchronous i.e. once you initiate the first one your code carries on and executes the second one immediately - so your second call could actually come back first.
Changing to false blocks your js until a response is received - you do not normally want this because for a start there may not be a response if there is a problem with the server.

You have jquery in your tags so why not use the jquery ajax function and chain your calls.
0
 

Author Comment

by:gesmuk
ID: 39277283
Hi there.

I've changed the true to false, and still the same issue i'm afraid.

If I have the above code twice, then only the second one will display the result.

I must admit that i'm fairly new to jquery (historically more of a PHP/HTML developer), can you give me an example of how the above would look with the jquery ajax function?
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39277952
Have you got a live link to the page?

This is an example, I don't know your second url or what you are doing with the returned data
$.ajax({
	type:'GET',
	url:'/Mobile_App/m_news.php',
	success:function(response) {
		// First ajax has finished successfully
		// Proceed to the next one
		$.ajax({
			type:'GET',
			url:'/Mobile_App/next_page.php',
			success:function(response) {
			// Second ajax has finished successfully
			}
		});
	}
});

Open in new window

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:gesmuk
ID: 39277996
That makes sense, thanks for posting that up.

At the moment, I'm displaying the returned data in a DIV, as follows:

document.getElementById("news").innerHTML=xmlhttp.responseText;

Open in new window


I think the problem will come with using "xmlhttp.responseText" more than once on the page, as both of the ajax calls will return this same variable, won't they?

So how do I distinguish which return is which, if they are both called "xmlhttp.responseText"?
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 2000 total points
ID: 39278018
You declare a different name
xmlhttp_second=new XMLHttpRequest();
0
 

Author Comment

by:gesmuk
ID: 39278164
Ah, that makes sense (sorry, should have realised that last point....it's been a long day!)

Managed to get it all sorted now by declaring a different name for each request.

Much appreciated guys!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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…
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 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…

595 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