[SOLVED] Scripts conflicting with eachother

[Brandon Jaeger]

Hey guys,

 

I have a basic Ajax HTTP request script (the one from the sticky here I think) and it seems to not work with some other scripts.

 

Here's the HTTP request one:

// start ajaxrequest.js


// Following is a javascript function that makes a httprequest - AJAX. This is the AJAX bit and all that is needed in that manner.
// Only in this one we won't be using XML in our response, we will accept and handle
// pure text and html and display this response directly to the user within the
// desired <div id> tags. It can even be used to include pure html files as a substitute
// solution to the "old" frames method where as no php or other scripting language is nessesary on the server.
// but use it with care - it is not a search engine supported method and indexing will fail. Workaround for this is not included here

function MyAjaxRequest(target_div,file,check_div)
{
var MyHttpRequest = false;
var MyHttpLoading = '<p>Loading...</p>'; // or use an animated gif instead: var MyHttpLoading = '<img src="loading.gif" border="0" alt="running" />';
var ErrorMSG = 'Sorry - No XMLHTTP support in your browser, buy a newspaper instead';

if(check_div)
{
var check_value = document.getElementById(check_div).value;
}
else
{
var check_value = '';
}



if(window.XMLHttpRequest) // client use Firefox, Opera etc - Non Microsoft product
{
try
{
MyHttpRequest = new XMLHttpRequest();
}
catch(e)
{
MyHttpRequest = false;
}
}
else if(window.ActiveXObject) // client use Internet Explorer
{
try
{
MyHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
MyHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
MyHttpRequest = false;
}
}
}
else
{
MyHttpRequest = false;
}



if(MyHttpRequest) // browser supports httprequest
{
var random = Math.random() * Date.parse(new Date()); // make a random string to prevent caching

var file_array = file.split('.'); // prepare to check if we have a query string or a html/htm file
if(file_array[1] == 'php') // no query string, just calling a php file
{
  var query_string = '?rand=' + random;
}
else if(file_array[1] == 'htm' || file_array[1] == 'html') // calling a htm or html file
{
  var query_string = '';
}
else // we have presumable a php file with a query string attached
{
  var query_string = check_value + '&rand=' + random;
}


MyHttpRequest.open("get", url_encode(file + query_string), true); // <-- run the httprequest using GET


// handle the httprequest
MyHttpRequest.onreadystatechange = function ()
{
if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}
else
{
document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
}
}
MyHttpRequest.send(null);
}
else 
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}
}
// end of "AJAX" function


// Here follows a function to urlencode the string we run through our httprequest, it has nothing to do with AJAX itself
// If you look carefully in the above httprequest you se that we use this url_encode function around the file and query_string
// This is very handy since we are using GET in our httprequest and for instance
// any occurrance of the char # (from textboxes etc) will brake the string we are sending to our file - we don't want that to brake!
// It will also convert spaces to +

function url_encode(string)
{
var string;
var safechars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/-_.&?=";
var hex = "0123456789ABCDEF";
var encoded_string = "";
for(var i = 0; i < string.length; i++)
{
var character = string.charAt(i);
if(character == " ")
{
encoded_string += "+";
}
else if(safechars.indexOf(character) != -1)
{
encoded_string += character;
}
else
{
var hexchar = character.charCodeAt(0);
if(hexchar > 255)
{
encoded_string += "+";
}
else
{
encoded_string += "%";
encoded_string += hex.charAt((hexchar >> 4) & 0xF);
encoded_string += hex.charAt(hexchar & 0xF);
}
}
}
return encoded_string;
}

// end .js file

 

Here's the one its not working with:

/*
DezinerFolio.com Simple Accordians.

Author  : G.S.Navin Raj Kumar
Website : http://dezinerfolio.com

*/

/*
* The Variable names have been compressed to achive a higher level of compression.
*/

// Prototype Method to get the element based on ID
function $(d){
return document.getElementById(d);
}

// set or get the current display style of the div
function dsp(d,v){
if(v==undefined){
	return d.style.display;
}else{
	d.style.display=v;
}
}

// set or get the height of a div.
function sh(d,v){
// if you are getting the height then display must be block to return the absolute height
if(v==undefined){
	if(dsp(d)!='none'&& dsp(d)!=''){
		return d.offsetHeight;
	}
	viz = d.style.visibility;
	d.style.visibility = 'hidden';
	o = dsp(d);
	dsp(d,'block');
	r = parseInt(d.offsetHeight);
	dsp(d,o);
	d.style.visibility = viz;
	return r;
}else{
	d.style.height=v;
}
}
/*
* Variable 'S' defines the speed of the accordian
* Variable 'T' defines the refresh rate of the accordian
*/
s=7;
t=10;

//Collapse Timer is triggered as a setInterval to reduce the height of the div exponentially.
function ct(d){
d = $(d);
if(sh(d)>0){
	v = Math.round(sh(d)/d.s);
	v = (v<1) ? 1 :v ;
	v = (sh(d)-v);
	sh(d,v+'px');
	d.style.opacity = (v/d.maxh);
	d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';
}else{
	sh(d,0);
	dsp(d,'none');
	clearInterval(d.t);
}
}

//Expand Timer is triggered as a setInterval to increase the height of the div exponentially.
function et(d){
d = $(d);
if(sh(d)<d.maxh){
	v = Math.round((d.maxh-sh(d))/d.s);
	v = (v<1) ? 1 :v ;
	v = (sh(d)+v);
	sh(d,v+'px');
	d.style.opacity = (v/d.maxh);
	d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';
}else{
	sh(d,d.maxh);
	clearInterval(d.t);
}
}

// Collapse Initializer
function cl(d){
if(dsp(d)=='block'){
	clearInterval(d.t);
	d.t=setInterval('ct("'+d.id+'")',t);
}
}

//Expand Initializer
function ex(d){
if(dsp(d)=='none'){
	dsp(d,'block');
	d.style.height='0px';
	clearInterval(d.t);
	d.t=setInterval('et("'+d.id+'")',t);
}
}

// Removes Classname from the given div.
function cc(n,v){
s=n.className.split(/\s+/);
for(p=0;p<s.length;p++){
	if(s[p]==v+n.tc){
		s.splice(p,1);
		n.className=s.join(' ');
		break;
	}
}
}
//Accordian Initializer
function Accordian(d,s,tc){
// get all the elements that have id as content
l=$(d).getElementsByTagName('div');
c=[];
for(i=0;i<l.length;i++){
	h=l[i].id;
	if(h.substr(h.indexOf('-')+1,h.length)=='content'){c.push(h);}
}
sel=null;
//then search through headers
for(i=0;i<l.length;i++){
	h=l[i].id;
	if(h.substr(h.indexOf('-')+1,h.length)=='header'){
		d=$(h.substr(0,h.indexOf('-'))+'-content');
		d.style.display='none';
		d.style.overflow='hidden';
		d.maxh =sh(d);
		d.s=(s==undefined)? 7 : s;
		h=$(h);
		h.tc=tc;
		h.c=c;
		// set the onclick function for each header.
		h.onclick = function(){
			for(i=0;i<this.c.length;i++){
				cn=this.c[i];
				n=cn.substr(0,cn.indexOf('-'));
				if((n+'-header')==this.id){
					ex($(n+'-content'));
					n=$(n+'-header');
					cc(n,'__');
					n.className=n.className+' '+n.tc;
				}else{
					cl($(n+'-content'));
					cc($(n+'-header'),'');
				}
			}
		}
		if(h.className.match(/selected+/)!=undefined){ sel=h;}
	}
}
if(sel!=undefined){sel.onclick();}
}

 

Does anyone have a clue as to why the two are conflicting with eachother?

 

Thanks

Brandon

[F1Fan]

What do you mean they're conflicting? Are you getting error messages? Have you checked if they are using any of the same function names, global variables, or event listeners?

[Brandon Jaeger]

I'm a complete noobie when it comes to Ajax and JS, so please bear with me! I'm not sure what event listeners are.

 

I'm not getting any error messages. When I add the second script, the first one stops working entirely. That's all.

[F1Fan]

Do they BOTH work by themselves? If something fails with JS, it will kill everything. So they may not be conflicting, it just may be that the second file has a problem.

[Brandon Jaeger]

Yup. They both work fine when they're separated.

[F1Fan]

OK. I have no idea what these do, so please include your HTML/PHP code as well. Also, JS will almost definitely be generating errors, you just may not see them on the page. I can't remember how to do this in IE, but in FF, before you load the page, click on "Tools," then "Error Console." Once you have it open, clear all the errors that are in there. Then load your page and see what errors show up. If you don't understand the errors, post them with your code.

[Brandon Jaeger]

Okay well this is weird... It's now working for some reason. I had some CSS errors showing up in the error console (ty for showing me that useful tool, btw), so I fixed them, and it worked!

 

Thanks! You've basically fixed my problem for me, F1

[F1Fan]

Glad to help. I use that error console all the time. If you're using FF, try out the "All-in-One Sidebar" FF add-on. It allows you to have the error console (as well as many other things) in a side bar right next to your page. That way on one window you have your page and the error console. Very handy. http://firefox.exxile.net/aios/index.php

[Brandon Jaeger]

Thanks, I'll try it

 

I figured out the error. It was as you said, a duplicate function name.

 

In the accordion JS file there's a function called $ and also one in prototype.js. Is it safe to rename the function name accordingly in one of them?

 

Edit: What's the easiest way to pack a JS file?

[F1Fan]

Check to see what the two functions do. If they do the same thing, just delete one of them. If not, rename one. But be careful to check for all references to the one you rename and change those references to the new name.

 

What do you mean "pack" a JS file?

[Brandon Jaeger]

Pack as in compress or compile maybe. I guess this one requires it to run.

[Brandon Jaeger]

Nevermind. I'm dumb.

 

This is what happens when you stay up for 24+ hours.

 

Thanks, dude.

[F1Fan]

LOL! That happens to me all too often.