AJAX problem, please help me!

[benqus]

Hello everybody!

I have a serious problem with my diploma work!

So here it is:
My ajax.js file cannot be executed. It does nothing when I click on the buttons... Here's the ajax.js code:4

function opensave(type){
	url="open.php";
	content=replacer("editor");
	var xmlhttp=if(window.XMLHttpRequest){
		new XMLHttpRequest();
	} else if(){
		new ActiveXObject("Microsoft.XMLHTTP");
	};
	xmlhttp.onreadystatechange=stateChanged();
	if(type="read"){
		xmlhttp.open("GET",url,true);
		url+="?open=r&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value;
		xmlhttp.send(null);
	} else if(type="write"){
		xmlhttp.open("POST",url,true);
		setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlhttp.send("open=w&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value+"&content="+content);
	};
	function stateChanged(){
		if (xmlhttp.readyState==4){
			processdata(xmlhttp.responseText);
		};
	};
};//********************************************************************************************
function replacer(id){
	str=document.getElementById(id).value.replace(/"/g,"%dquot%");
	return str;
};//********************************************************************************************
function processdata(response){
	response=response.split("<!--//split-->")
	document.title=response[0];
	content=response[1].replace("%dq", /"/q);
	document.getElementById("editor").innerHTML=content;
};//********************************************************************************************

The page which is linked to, doesn't want to "call" it. These methods were implemented in the other JS file, but it messed up the whole thing, so I've separated them.

My buttons, which calls the "opensave" method are:

<input type="button" value="OPEN" class="buttons" onclick="opensave('r')" /><br />
			<input type="button" value="SAVE" class="buttons" onclick="opensave('w')" /><br />

My php file - where these buttons are - contains no DTD. Could that be a problem? I've used "Transitional" DTD, but them my PHP did wanted to work properly. Did nothing with DTD. Didn't loaded the image, didn't execute the JavaScript...

Please help, coz this is a big part of my diploma work, and I've got only 26 days to finish it with a big presentation too... :P

Thank u guys and girls! =)

Be nice everybody! =)

[pritaeas]

Sounds too obvious, but did you put a link to the .js file in the html head ?

[Graphix]

Your code is a bit confusing, you should really add spaces and comments on what the hell you are doing, even with the simplest things. Anyway, a few errors in your script:

>> You are not allowed to end a if () { ...code... } with a ;
Adjust this in the entire script

So this is wrong

if (...condition...) {

};

And this is correct:

if (...condition...) {

}

>> Line 10 - It needs to be == instead of = . = is used to assign a value to a variable, == to compare two variables

>> Line 1 and 2 of your form - It needs to be onclick="opensave('read')" or onclick="opensave('write')"

>> Line 11 & 12 - They need to be switched, first you make the url, then you open the request, not the other way around

>> Line 24, 28 and 34 - Comments need to be closed, rather use:
/**************************************/

>> Line 26 - You forgot a quote

~G

[benqus]

Of corse! =)
Here's the code:

<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="ajax.js"></script>

Thanks!

[benqus]

@ ~G:

I didn'T forgot a quote in the 26th line, coz that's regexp... Actually that worked fine before, when I didn't wanted to use AJAX, only form posts with normal http request without ajax.

Yea, I was wasn't paying attention to that == ... =)

You can comment a single line with " // "...

and the if(){ ...code... } can be ended with the ;. It works in the other code properly... =)

so when I click on one of the buttons, still nothing happens... The other file is working nicely, but this ajax.js isn't. Like it wouldn't be there.

function opensave(type, box){
	alert(type);  //no alertbox when method (onclick event) is called!!!
	var xmlhttp;
	url="open.php";
	content=replacer("editor");
	if(window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	} else if(){
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=stateChanged();
	if(type=="r"){
		url+="?open=r&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value;
		xmlhttp.open("GET",url,true);
		xmlhttp.send(null);
	} else if(type=="w"){
		xmlhttp.open("POST",url,true);
		setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlhttp.send("open=w&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value+"&content="+content);
	}
	function stateChanged(){
		if (xmlhttp.readyState==4){
			processdata(xmlhttp.responseText);
		}
	};
	document.getElementById(box).style.visibility="hidden";
};//********************************************************************************************/
function replacer(id){
	str=document.getElementById(id).value.replace(/"/g,"%dquot%");
	return str;
};//********************************************************************************************/
function processdata(response){
	response=response.split("<!--//split-->")
	document.title=response[0];
	content=response[1].replace("%dquot", /"/q);
	document.getElementById("editor").innerHTML=content;
};//********************************************************************************************/

and the html:

<input type="button" value="OPEN" class="buttons" onclick="opensave('r'), 'filebox'" /><br />
<input type="button" value="SAVE" class="buttons" onclick="opensave('w'), 'filebox'" /><br />

[Graphix]

>> Your HTML should be:

<input type="button" value="OPEN" class="buttons" onclick="opensave('r', 'filebox')" /><br />
<input type="button" value="SAVE" class="buttons" onclick="opensave('w', 'filebox')" /><br />

Note that the arguments need to be in the ()

>> Line 35 - it needs to be var content

~G

PS: I suggest you use alerts in each step of the function to see where it goes wrong, check every variable and step with an alert. Also, it is smart to add comments:

function opensave(type, box){
	alert(type);  //no alertbox when method (onclick event) is called!!!

        /* Creating xmlhttp object */

	var xmlhttp;
	var url = "open.php";
	var content=replacer("editor");
	if(window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	} else if(){
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=stateChanged();
	if(type=="r"){

                /* Making the url */

		url+="?open=r&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value;
		xmlhttp.open("GET",url,true);
		xmlhttp.send(null);

	} else if(type=="w"){

                /* Opening request */
		xmlhttp.open("POST",url,true);
		setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                /* Sending the POST data */
		xmlhttp.send("open=w&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value+"&content="+content);
	}

        /* Setting the box invisible */
	document.getElementById(box).style.visibility="hidden";
}

/* This function handles the statechange */

	function stateChanged(){
		if (xmlhttp.readyState==4){
			processdata(xmlhttp.responseText);
		}
	}

/* This function replaces a string and then returns that */

function replacer(id){
	str=document.getElementById(id).value.replace(/"/g,"%dquot%");
	return str;
}

/* This function processes the data retrieved from the request */

function processdata(response){
	response=response.split("<!--//split-->")
	document.title=response[0];
	var content2 = response[1].replace("%dquot", /"/q);
	document.getElementById("editor").innerHTML = content2;
}

[benqus]

I've changed the code:

function opensave(type, box){
	alert(type+", "+box);
	var xmlhttp;
	url="open.php";
	var content=document.getElementById(id).value.replace(/"/g,"%dquot%");
	if(window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	} else if(window.ActiveXObject("Microsoft.XMLHTTP")){
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	} else if(window.ActiveXObject("Msxml2.XMLHTTP")){
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	xmlhttp.onreadystatechange=stateChanged();
	if(type=="r"){
		url+="?open=r&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value;
		xmlhttp.open("GET",url,true);
		xmlhttp.send(null);
	} else if(type=="w"){
		xmlhttp.open("POST",url,true);
		setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlhttp.send("open=w&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value+"&content="+content);
	}
	function stateChanged(){
		if (xmlhttp.readyState==4){
			var response=responseText.split("<!--//split-->")
			document.title=response[0];
			response[1].replace("%dquot", /"/q);
			document.getElementById("editor").innerHTML=content;
		}
	};
	document.getElementById(box).style.visibility="hidden";
};//********************************************************************************************/

and I've corrected the mistyped html also, but it still won't work... =(( Since this is a new webapplication, I'm totally f@cked up without a working ajax... =((

The alert box is not showing, so it isn't working at all...

[benqus]

It still doesn't work... The alert isn't appearing...

function opensave(type, box){
	alert(type+", "+box);
	var xmlhttp;
	var url="open.php";
	var content=document.getElementById(id).value.replace(/"/g,"%dquot%");
	if(window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	} else if(window.ActiveXObject("Microsoft.XMLHTTP")){
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	} else if(window.ActiveXObject("Msxml2.XMLHTTP")){
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	xmlhttp.onreadystatechange=stateChanged();
	if(type=="r"){
		url+="?open=r&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value;
		xmlhttp.open("GET",url,true);
		xmlhttp.send(url);
	} else if(type=="w"){
		xmlhttp.open("POST",url,true);
		setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlhttp.send("open=w&filename="+document.getElementById("filename").value+"&extension="+document.getElementById("extension").value+"&content="+content);
	}
	function stateChanged(){
		if (xmlhttp.readyState==4){
			var response=responseText.split("<!--//split-->")
			document.title=response[0];
			response[1].replace("%dquot", /"/q);
			document.getElementById("editor").innerHTML=content;
		}
	};
	document.getElementById(box).style.visibility="hidden";
};

and the html is:

<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="ajax.js"></script> //different location than the other

...

<input type="button" value="OPEN" class="buttons" onclick="opensave('r', 'filebox')" /><br />
			<input type="button" value="SAVE" class="buttons" onclick="opensave('w', 'filebox')" />

[Graphix]

Ok, Iil be nice, I have modified your code so that it works. Your RegExp are WRONG and are a part of the error! Modify them so that they work. If there are any errors left in the script, also post the entire HTML form, then I will test it myself.

Keep adding alerts after every line to see where it all goes wrong, this is the number 1 rule at debugging your AJAX!!!!! Check every variable.

Check the following lines: 42,53 and 71. Those are the regexp lines.

Here you go...:

function opensave(type, box){
	alert(type+", "+box);
	
	// Creating xmlhttp object
	
	var xmlhttp = false;
	if(window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	} else if(window.ActiveXObject("Microsoft.XMLHTTP")){
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	} else if(window.ActiveXObject("Msxml2.XMLHTTP")){
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	
	// If the object was created succesfully:
	
	if (xmlhttp = true) {
	
	 if (type=="r") { // If the file needs to be read
	 
	    // Retrieving form values:
		
		var filename = encodeURIComponent(document.getElementById("filename").value);
		var extension = encodeURIComponent(document.getElementById("extension").value);
		
		// Setting url
		
	    var url="open.php"
		url += "?open=r&filename=" + filename + "&extension=" + extension;
		
		// Sending request
		
		xmlhttp.open("GET",url,true);
		xmlhttp.send(0);
		
		// If the request is done, show the results:
		
		xmlhttp.onreadystatechange=function(){
		  if (xmlhttp.readyState == 4){
			var response = xmlhttp.responseText.split("<!--//split-->")
			document.title=response[0];
			// This is incorrect, modify it so that it works: response[1].replace("%dquot", /"/q);
			document.getElementById("editor").innerHTML=content;
		  }
		}
		
	 } else if (type=="w") { // If something needs to be written in the file
	    
		// Retrieving form values:
		
		var filename = encodeURIComponent(document.getElementById("filename").value);
		var extension = encodeURIComponent(document.getElementById("extension").value);
		var content = encodeURIComponent(document.getElementById(id).value.replace(/"/g,"%dquot%")); // Not sure wether this works, check it yourself
		
		// Setting url
		
	    var url="open.php"
		url += "open=w&filename="+ filename +"&extension="+ extension +"&content="+content;
		
		// Sending request
		
		xmlhttp.open("GET",url,true);
		xmlhttp.send(0);
		
		// If the request is done, show the results:
		
		xmlhttp.onreadystatechange=function(){
		  if (xmlhttp.readyState == 4){
			var response = xmlhttp.responseText.split("<!--//split-->")
			document.title = response[0];
			// This is incorrect, modify it so that it works: response[1].replace("%dquot", /"/q);
			document.getElementById("editor").innerHTML = response;
		  }
		}
	 }
	} else { // If the browser does not support ajax
	
	alert("Your browser does not support AJAX!");
	
	}
	document.getElementById(box).style.visibility="hidden";
}
alert("Code Works, no syntax errors!");