Solved

Multiple Ajax Queries on one page

Posted on 2013-06-25
6
281 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 500 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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)

840 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