Forum Moderators: open
Yeah, I'm messing with Ajax for the first time. I thought myself to be quite profecient with Javascript until I ran into this little issue. My apologies if this is in the archives but to tell the truth I don't really know what's wrong and therefore battle to search out the solution.
I created a normal new Javascript object. To that object I'm attaching the Ajax Object, a 'Post' Handler function and the onReadystate function.
The following code works perfectly in IE and Safari but Mozilla's not keen on my code. Everything's working 100% but I'm loosing Mozilla as soon as the onReadystateChange function is called.
Here's my code:
<script type="text/javascript">
<!--//
//***********************************************************************
//******************* CREATE AJAX OBJECT ********************************//***********************************************************************function ajaxObject( objectName, ajaxName ){
try{
// Try the generic object
objectName.ajaxRequest = new XMLHttpRequest();
objectName.ajaxRequest.name = ajaxName;
} catch(e){
// Else it's probably an older version of MSIE
var flag = false;
// Create an array of IE specific AJAX object calls - the latest first otherwise you have IE7 using an IE5.5 object
var domObj = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
// Loop through them until you get one that works
for(var i = 0; i < domObj.length; i++){
if(flag == false){
try{
if(objectName.ajaxRequest = new ActiveXObject(domObj[i])){
flag = true;
}
} catch(e){
continue;
}
} else break;
}
}}
//***********************************************************************
//******************* HANDLE AJAX ***************************************
//***********************************************************************function ajaxPost( formObject, urlString, fileToLoad ){
if(this.ajaxRequest!= null){
// Open the request, METHOD, THE FILE TO BE USED TO PARSE DATA, ASYNCHRONOUS (T/F)
this.ajaxRequest.open("POST", fileToLoad, true);
// Define where the request will be handled on state changes
this.ajaxRequest.onreadystatechange = this.handleResponseX;
// These headers need to be set
this.ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.ajaxRequest.setRequestHeader("Content-length", params.length);
this.ajaxRequest.setRequestHeader("Connection", "close");
// Send the request
this.ajaxRequest.send(urlString);
//return true;
}
}function handleResponse(){
// 0 - uninitialized
// 1 - loading
// 2 - loaded
// 3 - interactive
// 4 - completealert( "Status: " + this.readyState );
if( this.readyState == 4 ){
// check if the request was good/OK (200 status) or if there was an error (can be handled accordingly)
if(this.status == 200){
alert( this.responseText );
//setAndExecute();
}
}
}//***********************************************************************
//***********************************************************************
// SET-UP Subscribe Object://Method Templates:
function subscribe( formObject, fileToLoad ){
//Create the URL string:
email = tag.email.value;
urlString = "email=" + email;
//Call AJAX Function:
this.ajaxPost( formObject, urlString, fileToLoad );
//----
alert("return");
//No Submit:
return false;
}//Object Constructore
function newsletter(){
//Object Properties:
this.name = "subscribe";
//Object Methods:
this.subscribeNow = subscribe;
this.ajaxObject = ajaxObject;
this.ajaxPost = ajaxPost;
this.handleResponseX = handleResponse;//Create Ajax Object:
this.ajaxObject(this,'newsletter');
}// ********** IT ALLS STARTS HERE:
//Create Object
var subscribe = new newsletter();//-->
</script>
The HTML:
<form action="_subscribe.php" id="sub_newsletter" method="post" title="Newsletter" onsubmit="return subscribe.subscribeNow(this, '_subscribe.php'); void(0);">
<fieldset>
<input type="text" name="email" id="email" value="E-mail Address" onfocus="this.value='';" class="newsletterInput" />
<input type="submit" value="Join" />
</fieldset>
</form>
I hope my code's not too crappy. The issue I have at the moment comes in as soon as the instance of [handleResponse], in this case [handleResponseX] is called. In IE it works 100% but I'm loosing the object refrences in Mozilla. The code still goes throught the motions though, it invokes the function on each state change but I'm not refrenceing the right objects in Mozilla and can't get to the actual response sent back from the [_subscribe.php] file.
Oh yes. I did not include the php. It's just a text string at this stage.
Hell, I hope you can help me.
Use your errors well as they will be a big help to fixing the problem.
