Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
sonal

Ajax Or Javascript Problem

Recommended Posts

I have two forms on my index page. Both of these forms uses ajax to fetch and display data on the page from different php scripts. Both works great individually, showing results as expected. But, when I put both of them at the same time one of them is not showing resulting data. I have used addEventListener in my javascript to add events and my ajax part of both scripts use ajax.send(null) at the end of a function sending data off to php. What can be the problem? What am I missing?

 

thanx in advance

Share this post


Link to post
Share on other sites

You're probably using the same Ajax object for both forms, which you can't do.

For example:

 

var ajax = getXMLHttpRequestObject(); // ajax is the appropriate Ajax object for the browser.

document.forms[0].onsubmit = function () {

 // Use ajax.open, ajax.send, etc. here.

};

document.forms[1].onsubmit = function () {

 // Use ajax.open, ajax.send, etc. here.

};

 

If you write code like this, the method and event listener calls set up for forms[0] will be overriden by the method and event listener calls for forms[1].

The solution is to create two Ajax objects, one for each form.

For example, at the top of your code, write:

 

var ajax = getXMLHttpRequestObject();
var ajax2 = getXMLHttpRequestObject();

 

Use ajax for one form and ajax2 for the other. Problem solved.

  • Upvote 1

Share this post


Link to post
Share on other sites

Thanks a lot, HartleySan for your reply.

Although, I have used different ajax objects in both forms they don't seem to work together. Still the problem is as it is. Each html file works great individually, but when I keep both of them on the same page, only one of it works.

 

I also have included third js-ajax-php script on the same page. So, now this one works and the other two stopped working. How do I do that?

Share this post


Link to post
Share on other sites

Obviously, the last Ajax object your instantiating is somehow overriding the other ones.

Please give us some of your code to look at (and please only provide the relevant code and place it between CODE tags).

Thank you.

Share this post


Link to post
Share on other sites

I thought so. I should explain in detail what I'm upto. I want to display "quotable quotes" on index page. To do that I'm fetching quotes through ajax and putting that js script into my "header" html page. code for that:

 


/*
* return json data from quotelist.php using ajax.
*
*/



window.onload = function() {

'use strict';

var quoteDisp = document.getElementById('qquote');

var jAjax = getXMLHttpRequestObject(); //This is defined in another file. Which is working nicely.
jAjax.onreadystatechange = function() {
if(jAjax.readyState == 4) {
if((jAjax.status >= 200 && jAjax.status < 300) || (jAjax.status == 304)) {
var output = jAjax.responseText;
//alert(output);
document.getElementById("qquote").innerHTML = output;
}
else {
//alert("Error" + jAjax.statusText);
}
}
}; //End of onreadystatechange anonumous function.

jAjax.open('GET', 'quotelist.php', true);
jAjax.send(null);

};


 

//first form to display book names by title. It shows autolist as user keys in title, and then displays a book details selected from the list.

Following two files are included on index page through a "main.php" script, which shows different pages collected by index page. I hope this makes sense. This scripts are online at www.myreadinglog.net. Although the front page shows only quotes displayed on left side bar under "quotable quotes". Two other forms can be seen by a logged in user only. both of php scripts return XML data.



//functio to handle ajax response:
function handleAjaxResponse(e) {
'use strict';
if(typeof e == 'undefined') e = window.event;
var ajax = e.target || e.srcElement;

if(ajax.readyState == 4 ) {
if ((ajax.status >=200 && ajax.status < 300) || ajax.status == 304) {

if(ajax.responseXML) {
//display result.
}
}


function sendValue() {
var searchTerm = document.getElementById('searchTerm');
searchTerm = searchTerm.value;
if(searchTerm.length > 3) {
var ajax = getXMLHttpRequestObject();
ajax.onreadystatechange = handleAjaxResponse;
//ajax.open('GET', 'isbn31.php?searchterm=' + encodeURIComponent(searchTerm.value), true);
ajax.open('GET', 'isbn31.php?searchterm=' + encodeURIComponent(searchTerm), true);

ajax.send(null);
// return false;
}
}


window.onload = function() {

'use strict';
U.addEvent(document.getElementById('searchTerm'), 'keyup', sendValue); //addEvent function is in a separate file under U object, works fine.


}

 

Third script for second form file. It displays book details fetched through ISBN. Only one result is returned and displayed using ajax.

 



function getData(e) {
'use strict';
if(typeof e == 'undefined') e = window.event;
var Iajax = e.target || e.srcElement;

Iajax.onreadystatechange = function() {

	if(Iajax.readyState==4) {
		if((Iajax.status >= 200&& Iajax.status<300) || (Iajax.status==304)) {

			 if(Iajax.responseXML) {

				//display result
}
}
}

function sendVal() {
 var IsearchTerm = document.getElementById('searchterm');
 IsearchTerm = IsearchTerm.value;
 var Iajax = getXMLHttpRequestObject();
 Iajax.onreadystatechange = getData;
Iajax.open('GET', 'newisbn.php?searchterm=' + encodeURIComponent(IsearchTerm), true);

	Iajax.send(null);
 // return false;
}

window.onload = function() {
U.addEvent(document.getElementById('searchterm'), 'blur', sendVal);
U.addEvent(document.getElementById('isbn'), 'blur', sendVal);
U.addEvent(document.getElementById("isbn"), 'submit', sendVal);
}

Share this post


Link to post
Share on other sites

Some of your code seems a bit odd, and I'm wondering whether it will work as intended, but to address the immediate problem, in three different scripts, you have three different anonymous functions assigned to the window.onload event handler. That's your problem.

 

Somehow combine all the stuff you want to do in all three anonymous functions into one function, and you should at least get all of your Ajax objects existing. As for whether they will actually work or not, I am kind of curious myself.

  • Upvote 1

Share this post


Link to post
Share on other sites

Hi HartleySan, thanks for your suggestion. I did what you said (combine all different stuff into one file, making a new function for each task). AND MAGIC.. it's working, as I expected it to work. Good.. I like all these stuff about js, ajax and php really much..

 

But I would like to know, what of my code seems a bit odd? Will you please share your looks/concerns or anything that I'm doing wrong in above code?

Thanks again..

Share this post


Link to post
Share on other sites

I'm a bit busy at the moment, so when I have time later, I'll make suggestions. More than anything, I'd unify your code and simplify it a lot. It seems like you grabbed a lot of code from other sites, which all do things differently, and honestly, it's pretty messy. Anyway, I'll make recommendations at a later time.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...