Friday, December 20, 2013

Action function causing Object doesn't support this property or method in IE8

Anyone love IE? Ha ha ha... I don't like it because IE love to catch my code...uppss :) I have this web application that fusion of Salesforce and JQuery.It quite happy to run in Chrome and Firefox but not in Internet Explorer.It give this:
Message: Object doesn't support this property or method Line: 1934 Char: 1 Code: 0
I spend the whole day staring at my screen.The code is doing rating by change the  color  and save to database.It run in another two browsers but somehow it show error in IE bar.There two code snippets that run with same function however the first one is not hitting the error, but the second one yes.
 First code

<apex:outputpanel id="Price">
 <div id ="Price1" class="{!IF(Rating['Price Detail'].Rating_Color__c=='Yellow','light light-yellow',
     IF(Rating['Price Detail'].Rating_Color__c=='Red','light light-red',
     IF(Rating['Price Detail'].Rating_Color__c=='Green','light light-green','light light-grey')))}"  title="{!IF(Rating['Price Detail'].Rating_Color__c=='Yellow','Yellow',
     IF(Rating['Price Detail'].Rating_Color__c=='Red','Red',
     IF(Rating['Price Detail'].Rating_Color__c=='Green','Green','Grey')))}">
</div>
</apex:outputpanel>
<apex:actionfunction action="{!RatingValue}" name="Price" rerender="Price">       
 <apex:param assignto="{!ColorValue}" name="x" value=""/>
 <apex:param assignto="{!Category}" name="z" value=""/>
 <apex:param assignto="{!ChangeValue}" name="y" value="Price"/>
</apex:actionfunction>
Second code

<apex:outputpanel id="Quality1">
<div id="Quality" class="{!IF(Rating['Quality Detail'].Rating_Color__c=='Yellow','light light-yellow',
     IF(Rating['Quality Detail'].Rating_Color__c=='Red','light light-red',
     IF(Rating['Quality Detail'].Rating_Color__c=='Green','light light-green','light light-grey')))}"  title="{!IF(Rating['Quality Detail'].Rating_Color__c=='Yellow','Yellow',
     IF(Rating['Quality Detail'].Rating_Color__c=='Red','Red',
     IF(Rating['Quality Detail'].Rating_Color__c=='Green','Green','Grey')))}">
</div>
</apex:outputpanel>   
<apex:actionfunction action="{!RatingValue}" name="Quality" rerender="Quality1">       
<apex:param assignto="{!ColorValue}" name="x" value=""/>
<apex:param assignto="{!Category}" name="z" value=""/>
<apex:param assignto="{!ChangeValue}" name="y" value="Quality"/>  
</apex:actionfunction>
By glancing, you won't notice the differences.I checked all the element one by one but could not figure it out until I got hunch on the code below.Note that actionFunction name= "Quality" and  div id="Quality".I change it to different name, and the error is gone.html will generate actionFunction to javascript function, could it be the name is conflict and cause the error?So far I think that way.

<apex:actionfunction action="{!RatingValue}" name="Quality" rerender="Quality1"> <!--code detail inside--> </apex:actionfunction>

 <div id="Quality">
<!--code detail inside--> </div>
Note:Please don't hate IE, they just try to make the code clean and provide peaceful in the code.

No comments:

Post a Comment