...

View Full Version : AJAX and external scripts



rswyatt
12-22-2006, 06:20 PM
I have an AJAX call onChange of a select box.

I'm, via the 'get' method, submitting to a php page and returning the results in a <div id='thediv'></div>

The problem is - outside of the script I'm retrieving - are some scripts that run some navigation and other things of which one is an event handler.

The problem is that AFTER I make the AJAX request, the event handler no longer functions. (the event handler is handling a menu)...

How can I 'refresh' or 're-load' or whatever the external jscripts that have nothing to do with the AJAX script?

MANY thanks in helping me solve this!

My AJAX is simply the below:



function createQCObject() {
var req;
if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Problem creating the XMLHttpRequest object');
}
return req;
}

// Make the XMLHttpRequest object
var http = createQCObject();
function displayDiv(path) {

var ran_no=(Math.round((Math.random()*9999)));
http.open('get', path);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
checkForJavascript(http.responseText);
var response = http.responseText;
if(response) {
document.getElementById("newsDiv").innerHTML = http.responseText;
}
}
}
http.send(null);
}

Ancora
12-22-2006, 06:50 PM
Rich:

When you wrote: "the event handler no longer functions," did you mean that the next time you select an item from the select list, the AJAX call is not made?

rswyatt
12-22-2006, 07:02 PM
Rich:

When you wrote: "the event handler no longer functions," did you mean that the next time you select an item from the select list, the AJAX call is not made?

Mike:

No - sorry for the confusion.

The select button still works great. The problem is with any external scripts that handle other parts of the page.

To give more insight into what is going on:

I have a left navigation being handled by an external .js.

In the index.php I am including a module to handle the page. In that php exists the AJAX function referenced above. When the function is called it retrieves itself via the function with the appropriate 'get' variables.

That part works great. It reloads and the appropriate content is shown.

The problem, however, is that after I make a selection, and the AJAX call is made, the left nav no longer functions (for example - on hover it does hover but then does not "un-hover" after mouse-out)...

So - I'm guessing that event handler is no longer being recognized by IE7 once I make the AJAX call. (by the way - this functions fine in FireFox 2, Opera and IE6)... Very weird.

Ancora
12-22-2006, 07:11 PM
Rich:

Yes, sorry for the confusion. I'm afraid I still don't understand. But, your AJAX code is a bit, "different" from what I use. Things seem to be out of order, and believe it or not the "get" is supposed to be uppercase and the "true" is missing from the open call.

Just for the heck of it, try using my pro-forma AJAX code:



var AdminResponse = "";

function parseSettings(){

alert(AdminResponse);
//**** Your parsing code here ****
}

function obtainSettings(){

var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
AdminRequest.onreadystatechange = function()
{
if (AdminRequest.readyState == 4)
{
if (AdminRequest.status == 200)
{
AdminResponse = AdminRequest.responseXML;
parseSettings();
}
else {
alert('Error Admin.xml File '+ AdminRequest.statusText);
}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
AdminRequest.open("GET", "Admin.xml"+forceGET, true);
AdminRequest.send(null);
}


Making an AJAX call should have no effect on an external .js file. None. So, try it with the above code and see if that fixes it.

rswyatt
12-22-2006, 07:27 PM
Mike,

I tried your script.. I like it better, very nice. :-)

HOWEVER, still - after the call is made, I'm still unable to get the left nav to work properly. It still hangs as though it isn't catching window events anymore. Hmmm.

rswyatt
12-22-2006, 07:31 PM
I think I may have found a problem... I'm making the AJAX call within an include file in PHP... Here is how it is laid out:

index.php (includes header.php) and if $_GET var matches then include the module (news.inc.php)...

news.inc.php contains the AJAX code. The PATH that is being referenced and fetch happens to also be news.inc.php... Perhaps I need to move the AJAX stuff back to index.php and NOT include news.inc.php in the index, instead, call it via AJAX and have the results display in the DIV...

Do you suppose that is where I went wrong?

Ancora
12-22-2006, 07:37 PM
Rich:

I think that there must be an ID or name that is conflicting, and the trouble doesn't happen until an ID or name is called somewhere in your AJAX code.

I'd search the document and make a list of all IDs and all names. And then do the same for that external menu script. I'll bet that you'll find a conflict.

This is very strange. If all your .php file is doing is echoing some text to be displayed in a div on the page, that couldn't be more innocuous.

Ancora
12-22-2006, 07:40 PM
Rich:

I just saw your post. I wouldn't include the AJAX code in index.php. I don't think you are supposed to call the calling page. I'd move that to a separate .php file.

Ancora
12-22-2006, 07:43 PM
Rich:

Why not just call the news.php file with the JavaScript AJAX code? Why worry about checking for $_GET or anything else. Call the .php file that delivers the news.

rswyatt
12-22-2006, 08:04 PM
Rich:

Why not just call the news.php file with the JavaScript AJAX code? Why worry about checking for $_GET or anything else. Call the .php file that delivers the news.

That is what I've decided to do.

I've included the AJAX in the index.php... The select box is now located there.
onChange for the select box calls your AJAX function which calls the news.inc.php for news display.

I've completely changed the name of the displaying div and I still get problems in IE7... what is the matter with this dumb browser? IE7 is the only one that hangs after the AJAX function gets called.

Ancora
12-22-2006, 08:15 PM
Rich:

You know what? I'd create another document without the menu, and test it. Also, I'd put a copy of the news.php file in the same directory as this simple test file. Just a plain, simple php document with the select list, the div, and AJAX code, and have it call the news.php, with both files in the same folder.

I'll bet the problem disappears.

rswyatt
12-22-2006, 08:18 PM
Rich:

You know what? I'd create another document without the menu, and test it. Also, I'd put a copy of the news.php file in the same directory as this simple test file. Just a plain, simple php document with the select list, the div, and AJAX code, and have it call the news.php, with both files in the same folder.

I'll bet the problem disappears.

I think I miscommunicated again... :)

The problem is not that the whole page hangs... I get the results I'm looking for in the display div. The problem is that after I make a change in the SELECT box and then get the correct output - my left nav no longer works properly.

Ancora
12-22-2006, 08:29 PM
Rich:

I understand, but what troubles me is that I don't think this news.php file should EVER be an include. There's just no reason for that. I'll bet that you have it in the "include" folder, the one specified by phpInfo(). I think that if you test a "clean" page, no paths, no includes, and rename the testing news file to news.php, that the problem will disappear.

Heck, you might just try putting a copy of news.php in the root directory. Change the name of the copy to that, news.php and get rid of the news.inc.php.

I think that calling a file in the "include" folder, just might be causing IE7 to scratch its head.

rswyatt
12-22-2006, 08:41 PM
Right - ok.

I think I see what you're saying.

In index.php I've dropped the include(/modules/news.inc.php) however the AJAX is calling the path ('/modules/news.inc.php?myvar=blah')

Ok - so I tried what you said. I threw it all into one page.. No dice. This left nav still has a fit.

I think it is in relationship to the sfmenu.js file which is handling the left navigation... I think it is pooping out after I do the ajax.

Ancora
12-22-2006, 08:48 PM
Rich:

Okay. I understand that this happens in IE7 only, but test your clean page with Firefox. First clear the JavaScript console before you load the clean page.

And just for the heck of it, see if Firefox is reporting some "warnings" if not an actual error.

The JavaScript console is under "Tools" on the menu bar.

Sometimes it will report a warning that it doesn't consider to be an error, yet, IE7 might just be treating it as an error.

rswyatt
12-22-2006, 08:56 PM
None. Arg.

Ancora
12-22-2006, 09:03 PM
Rich:

Okay, let me see if I understand the steps.

You have index.php. In the Head section, you have somthing like this:

<script type="text/javascript" src="menuCode.js"></script>
<script type="text/javascript" src="myAJAX.js"></script>


In your .open AJAX method, you are calling, a separate, distinct .php file, like this:

Request.open("GET", "news.php?something=somethingelse", true);

Is all of that correct?

rswyatt
12-22-2006, 09:05 PM
That is true, yes.

Ancora
12-22-2006, 09:11 PM
Rich:

Have you looked in the menu.js code for any lines that might look like:

if (IE), or if (document.all) ?

Any lines that might be IE specific. Maybe the code has lines that detect the browser version, like

navigator.appName, anything beginning with navigator.

Maybe, it just needs to have it modified to specifically recognize IE7.

rswyatt
12-22-2006, 09:47 PM
// JavaScript Document
sfHover = function() {

var sfEls = document.getElementById("leftnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent)
{
window.attachEvent("onload", sfHover);
}


This is the contents

Ancora
12-22-2006, 10:00 PM
Rich:

That's some very old code. Or at least, it looks like it.

I've seen so many problems with the attachEvent thing.

I would delete, or at least comment out:



if (window.attachEvent)
{
window.attachEvent("onload", sfHover);
}


and just put instead:



onload=sfHover;

Ancora
12-22-2006, 10:01 PM
onload=sfHover is cross-browser

Ancora
12-22-2006, 10:08 PM
Rich:

Also, whenever I use getElementsByTagName I use the lower case:

You might also chage this line to lower case LI


var sfEls = document.getElementById("leftnav").getElementsByTagName("LI");


or, to see if that line is the problem, put an alert and display the length.



var sfEls = document.getElementById("leftnav").getElementsByTagName("LI");
alert(sfEls.length);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {


if the alert displays 0, you've found the problem.

rswyatt
01-02-2007, 06:20 PM
Mike - I've been out on vacation - thanks for the replies.

Ok - so now here we are:

I've made LI lowercase and in the body element I've placed sfHover(); in the onload.

LI and li both return 34. It is handling the fly-out just fine - for some reason it isn't catching the onmouseout...

Ancora
01-02-2007, 06:48 PM
Rich:

Edit that RegExp to this:



sfEls[i].onmouseout=function() {
this.className=this.className.replace(/\s{1,}sfhover$/,"");

rswyatt
01-02-2007, 07:29 PM
Tried that... I've done some more searching and it appears IE7 - if structure is changed programmatically - the CSS rules need to be refreshed with a document.recalc();... I've put that in 20 different places to no avail.

The onmouseout IS firing and IS setting the classname back to blank... so now it is just that IE7 is not refreshing the rules?

rswyatt
01-02-2007, 07:37 PM
FIXED!

I did some more research and found this site on Suckerfish dropdown menus:

http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/ (http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/)

putting #leftnav li:hover, #leftnav.sfhover { position: static} fixed it... IE7 loves it now. YAY - what a deal.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum