Jump to content
Larry Ullman's Book Forums

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

Link to comment
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
Link to comment
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?

Link to comment
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);
}

Link to comment
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
Link to comment
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..

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...