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

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 286
  • Last Modified:

Multiple Ajax Queries on one page

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
gesmuk
Asked:
gesmuk
  • 3
  • 3
2 Solutions
 
GaryCommented:
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
 
gesmukAuthor Commented:
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
 
GaryCommented:
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
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!

 
gesmukAuthor Commented:
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
 
GaryCommented:
You declare a different name
xmlhttp_second=new XMLHttpRequest();
0
 
gesmukAuthor Commented:
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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now