evibesmusic
asked on
"Object doesn't support this property or method" error during AJAX call occurs only in IE?
Experts,
During an AJAX call I get the dreaded "Object doesn't support this property or method." error. The odd things is that I don't get this message in FireFox or any other browser, I only receive it in IE (I am using IE7).
Using FireFox and the FireBug toolbar, I see that my AJAX call is made successfully, all parameters are sent and received, and the HTML result set is updated on screen.
I've read that if the IDs of the <form> or <div> tags are the same that this may cause this error.
I can confirm by looking at the generated source code that none of the IDs for any of the <form> or <div> tags are duplicated. I have eliminated duplicate <form> or <div> IDs by using PHP to dynamically name each <form> and <div> element.
Additional Info - I am using the prototype js library to facilitate my AJAX requests.
Additional Info - I have been able to get other AJAX request to work in IE on the same site.
Can someone help me figure this out?
My js:
My PHP code which dynamically generates my forms:
During an AJAX call I get the dreaded "Object doesn't support this property or method." error. The odd things is that I don't get this message in FireFox or any other browser, I only receive it in IE (I am using IE7).
Using FireFox and the FireBug toolbar, I see that my AJAX call is made successfully, all parameters are sent and received, and the HTML result set is updated on screen.
I've read that if the IDs of the <form> or <div> tags are the same that this may cause this error.
I can confirm by looking at the generated source code that none of the IDs for any of the <form> or <div> tags are duplicated. I have eliminated duplicate <form> or <div> IDs by using PHP to dynamically name each <form> and <div> element.
Additional Info - I am using the prototype js library to facilitate my AJAX requests.
Additional Info - I have been able to get other AJAX request to work in IE on the same site.
Can someone help me figure this out?
My js:
favorite = function(form_name, div_name){ // Updates the contents of a div
var url = 'scripts/update.php';
var form = $(form_name);
var input = form['site'];
var input2 = form['report_name'];
var input3 = form['user_nuid'];
var input4 = form['add_delete'];
var input5 = form['div_id'];
var input6 = form['favorite'];
var pars={action:'favorite', site:$(input).getValue(), report_name:$(input2).getValue(), user_nuid:$(input3).getValue(), add_delete:$(input4).getValue(), div_id:$(input5).getValue(), favorite:$(input6).getValue()};
new Ajax.Updater(div_name, url, {method:'get', parameters: pars});
}
My PHP code which dynamically generates my forms:
while($show_it = mysql_fetch_array($get_it_query)){
//SET THE TABLE CSS STYLE
if($style == 1){$tclass = "row1"; $style = 0;}
else{$tclass = "row2"; $style = 1;}
//END SET THE TABLE CSS STYLE
echo'<div id="favorite'.$show_it['id'].'" style="width:600px;">
<div align="center" style="width:45%; float:left;" class="'.$tclass.'">
<a href="controller_download.php?cmd=file&id='.$show_it['id'].'&nuid='.$user.'" title="Download">'.$show_it['Name'].'</a>
</div>
<div align="center" style="width:15%; float:left;" class="'.$tclass.'">'.$show_it['Month'].'</div>
<div align="center" style="width:8%; float:left;" class="'.$tclass.'">'.$show_it['Year'].'</div>
<div align="center" style="width:8%; float:left;" class="'.$tclass.'">
<form id="favorite_form'.$show_it['id'].'" method="post">
<input name="site" type="hidden" value="finance" />
<input name="report_name" type="hidden" value="'.$show_it['Name'].'" />
<input name="user_nuid" type="hidden" value="'.$user.'" />
<input name="div_id" type="hidden" value="'.$show_it['id'].'" />
<input name="favorite" type="hidden" value="1" />
<input name="add_delete" type="hidden" value="delete" />
<img onclick="favorite(\'favorite_form'.$show_it['id'].'\', \'favorite'.$show_it['id'].'\')" title="Remove the '.$show_it['Name'].' report from Your Favorites" src="images/remove.png" border="0" style="cursor:pointer;" />';
echo'</form>';
echo'</div>';
echo'</div>';
}//END WHILE
ASKER
@Roonaan:
Same error in IE...works in FF and other browsers still. Any other suggestions?
favorite = function(form_name, div_name){ // Updates the contents of a div
var url = 'scripts/update.php';
var form = document.forms[form_name];
var input = form['site'];
var input2 = form['report_name'];
var input3 = form['user_nuid'];
var input4 = form['add_delete'];
var input5 = form['div_id'];
var input6 = form['favorite'];
var pars={action:'favorite', site:$(input).getValue(), report_name:$(input2).getV alue(), user_nuid:$(input3).getVal ue(), add_delete:$(input4).getVa lue(), div_id:$(input5).getValue( ), favorite:$(input6).getValu e()};
new Ajax.Updater(div_name, url, {method:'get', parameters: pars});
}
Same error in IE...works in FF and other browsers still. Any other suggestions?
favorite = function(form_name, div_name){ // Updates the contents of a div
var url = 'scripts/update.php';
var form = document.forms[form_name];
var input = form['site'];
var input2 = form['report_name'];
var input3 = form['user_nuid'];
var input4 = form['add_delete'];
var input5 = form['div_id'];
var input6 = form['favorite'];
var pars={action:'favorite', site:$(input).getValue(), report_name:$(input2).getV
new Ajax.Updater(div_name, url, {method:'get', parameters: pars});
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@Roonaan:
Tried both of your proposed solutions:
Using: var form = document.forms[form_name];
And adding the following to my form code: name="favorite_form'.$show _it['id']. '"
- then -
Using: var form = document.getElementById(fo rm_name);
I did not place the name tag in the form code.
Both yielded the same result in IE but still worked in all other browsers.
Tried both of your proposed solutions:
Using: var form = document.forms[form_name];
And adding the following to my form code: name="favorite_form'.$show
- then -
Using: var form = document.getElementById(fo
I did not place the name tag in the form code.
Both yielded the same result in IE but still worked in all other browsers.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@Roonaan:
The following code produces the same error in IE. It doesn't even seem to be evaluating the js statement below before throwing the "Object not supported/found" error.
The function executes properly and shows the success message in all other browsers.
favorite = function(form_name, div_name){ // Updates the contents of a div
var url = 'scripts/update.php';
if(url==''){alert("empty") ;}
var form = $(form_name);
var input = form['site'];
if(input==''){alert("empty ");}
var input2 = form['report_name'];
if(input2==''){alert("empt y");}
var input3 = form['user_nuid'];
if(input3==''){alert("empt y");}
var input4 = form['add_delete'];
if(input4==''){alert("empt y");}
var input5 = form['div_id'];
if(input5==''){alert("empt y");}
var input6 = form['favorite'];
if(input6==''){alert("empt y");}
var pars={action:'favorite', site:$(input).getValue(), report_name:$(input2).getV alue(), user_nuid:$(input3).getVal ue(), add_delete:$(input4).getVa lue(), div_id:$(input5).getValue( ), favorite:$(input6).getValu e()};
if(pars==''){alert("empty" );}
new Ajax.Updater(div_name, url, {
method:'get',
parameters: pars,
onFailure: function(favorite){alert(' Something went wrong...')},
onSuccess: function(favorite){alert(' Function Worked properly')}
});
}
The following code produces the same error in IE. It doesn't even seem to be evaluating the js statement below before throwing the "Object not supported/found" error.
The function executes properly and shows the success message in all other browsers.
favorite = function(form_name, div_name){ // Updates the contents of a div
var url = 'scripts/update.php';
if(url==''){alert("empty")
var form = $(form_name);
var input = form['site'];
if(input==''){alert("empty
var input2 = form['report_name'];
if(input2==''){alert("empt
var input3 = form['user_nuid'];
if(input3==''){alert("empt
var input4 = form['add_delete'];
if(input4==''){alert("empt
var input5 = form['div_id'];
if(input5==''){alert("empt
var input6 = form['favorite'];
if(input6==''){alert("empt
var pars={action:'favorite', site:$(input).getValue(), report_name:$(input2).getV
if(pars==''){alert("empty"
new Ajax.Updater(div_name, url, {
method:'get',
parameters: pars,
onFailure: function(favorite){alert('
onSuccess: function(favorite){alert('
});
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you!
-r-