We help IT Professionals succeed at work.

"Object doesn't support this property or method" error during AJAX call occurs only in IE?

evibesmusic
evibesmusic asked
on
1,029 Views
Last Modified: 2012-02-16
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

Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2006

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

-r-

Author

Commented:
@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});
}
CERTIFIED EXPERT
Top Expert 2006
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
@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.
CERTIFIED EXPERT
Top Expert 2006
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
@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')}
                           });
}
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Thank you!

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.