?
Solved

Multiple Ajax Queries on one page

Posted on 2013-06-25
6
Medium Priority
?
287 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

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

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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

601 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