Solved

Multiple Ajax Queries on one page

Posted on 2013-06-25
6
283 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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!

 

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

Industry Leaders: 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!

Question has a verified solution.

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

Suggested Solutions

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)

734 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