PDA

View Full Version : mootools vs AJAX (co***ict?)



AresGR
03 Apr 2011, 05:37 PM
Hello,

I have a problem with my code which only appears in ie (more specifically on ie8, I haven't tested it on any other versions yet). I have absolutely no problems with firefox (v4) or Chrome (v10). I am trying to use the standalone version of the RokBox plugin (http://www.rockettheme.com/extensions-joomla/rokbox (http://www.rockettheme.com/extensions-joomla/rokbox)), which uses mootools-release-1.11.js.
The use of rokbox in my application is necessary for me in order to easily display some linked files with a fancy pop-up box and more importantly to use the "gallery" property so that my links can be grouped together and shown in order by just clicking some "next" button... To explain this (I 'll try to be as thorough as possible so that you get what happens):
1)I am using an index.php file which is as you can guess of course the "index".
2)I am calling some functions to compose a query for my database.
3)I am using AJAX to send those queries in another file called values.php.
4)This file takes the data from my database and echoes them.
5)The echoed values are returned and echoed in index.php as options (dropdown list).
6)When the user selects a value on a field some new queries are composed and AJAX is called again but this time it sends data to another file called results.php which echoes back the found matches to a specified div on index.php. (And also calls values.php again to pass new queries).
7) The data returned from the results contain a link to another file called details.php.
8)I am using RokBox to make these links open in a fancy pop-up box with arrows that point to the next or previous link based on the gallery that was generated by RokBox.

Now here's some parts of my code:

index.php header section (attention:some of this code is commented):


<script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script>
<!--<script type="text/javascript" src="../rokbox/mootools-core-1.3.1-full-compat.js"></script>-->
<!--<script type="text/javascript" src="../rokbox/mootools-1.2.5-core-nc.js"></script>-->
<script type="text/javascript" src="../rokbox/rokbox.js"></script>
<link href="../rokbox/themes/mynxx/rokbox-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../rokbox/themes/mynxx/rokbox-config.js"></script>

<script type="text/javascript" src="myscript.js"></script>
<script type="text/javascript" src="allfields.js"></script>
myscript.js (part of it):


function AJAX(i,query){
/* Establish AJAX connection */
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
try{
xmlhttp[i]=new XMLHttpRequest();
}catch(err){ alert("ERROR IN AJAX["+i+"]: "+err)}
}
else
{// code for IE6, IE5
xmlhttp[i]=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp[i].onreadystatechange=function() //line 21
{//alert("check");
if (xmlhttp[i].readyState==4 && xmlhttp[i].status==200)
{
document.getElementById("opt"+i).innerHTML=xmlhttp[i].responseText;
if(i==-1) mybox(); //I'm re-calling RokBox here so that it can recognize the new items
}
}
/* Send data to php file */
// alert("Field: "+obj[i].field+" \n Query: "+query);
if(i!=-1){
xmlhttp[i].open("POST","values.php",true);
xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp[i].send('query='+query+'&field='+obj[i].field+'&i='+i);
}else{
xmlhttp[i].open("POST","../results.php",true);
xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp[i].send('query='+query);
}

}
Now the problem:
On every first run of this webpage using ie I get the following error generated by the try-catch commands:

ERROR IN AJAX[0]: TypeError: Object doesn't support this property or methodThen everything freezes... IE itself throws me the following error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Timestamp: Sat, 2 Apr 2011 12:34:07 UTC


Message: 'xmlhttp[...]' is null or not an object
Line: 21
Char: 4
Code: 0
URI: http://.............../advanced/myscript.js

Line 21 is marked on the script code with comments. These errors do not reoccur when the page is reloaded (and as I already said it only happens with ie). So, by this error (and after some debugging) I get that for some reason the AJAX methods are not called as ought to be when I use the tag:

<script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script>on my index's head section. So... AJAX cannot work with using mootools?

After some research, I found that mootools which uses the $ sign to start it's operations, co***icts with other libraries (such as jQuery) using the same sign ($) for their own reasons. Now I found that the way to fix this is by using jQuery.noco***ict() after your jQuery script. There's only one little thing: I DON'T use jQuery, so where is the co***ict?:mad:
I also tried updating mootools to a newer release (as you can see from the comments in head section) but I realized that RokBox can't work with other versions.

I am pretty desperate with this, and I would really appreciate any solutions you can offer with your experience or any suggestions you think would help. You can check the issue your self by visiting my link:

http://e-tech.ath.cx/ares/project%20testing/advanced/index.php