Link to home
Start Free TrialLog in
Avatar of evibesmusic
evibesmusicFlag for United States of America

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:

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});
}

Open in new window


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

Open in new window

Avatar of Roonaan
Roonaan
Flag of Netherlands image

What happens if you replace var form = $(form_name); with var form = document.forms[form_name];

-r-
Avatar of evibesmusic

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).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});
}
SOLUTION
Avatar of Roonaan
Roonaan
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@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(form_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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@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("empty");}
  var input3 = form['user_nuid'];
  if(input3==''){alert("empty");}
  var input4 = form['add_delete'];
  if(input4==''){alert("empty");}
  var input5 = form['div_id'];
  if(input5==''){alert("empty");}
  var input6 = form['favorite'];
  if(input6==''){alert("empty");}
  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()};
  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')}
                           });
}
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you!