Hi all,
I am trying to do something very simple, a user clicks a link and a mini-form with a file upload input appears somewhere below it.
However, my ajax code is not cooperating. Instead, it loads the entire current (i think) page. I had this issue again some time ago and i managed to fix it, however for the life of me i can’t remember how i did it.
Code:
function ajaxRequest(targetUri, parameters, cbFunction){
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = cbFunction;
request.open("POST", targetUri, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(parameters);
}
function addImage(){
parameters = "action=ajaxRequest";
ajaxRequest("http://www.mysite.com/gallery/addImage.php", parameters, function(){
if((request.readyState == 4) && (request.status == 200)){
document.getElementById("formContainer").innerHTML = request.responseText;
}
});
}
And my PHP file, for the sake of simplicity (im pretty sure the problem is not with this file):
echo 'hi';
Link & placeholder:
<a href="javascript:addImage()">Add Image</a>
<div id="formContainer"></div>
I think i have narrowed down the problem to the… path. In this page http://bit.ly/dXrGY6 it all works fine if you click the first or second link, for a file that is in the same directory. Using a path to a file in another directory makes it malfunction again (third link). I am using absolute paths to files in other directories in another section of my site and it works fine (click the little flags): http://bit.ly/fCmmjy . I dont know why it doesn’t work here…
I can’t figure out what is wrong. Any ideas?
Any help is much appreciated!
edit: i had a small mistake in the url’s which caused me to edit a bit the last paragraph