Apex Code Development You need to sign in to do that
Don't have an account?
cduncombe44 IE9 issue with JS and actionFunction
I really hope someone can help me because I have been banging my head over this one for far too long. I have a VF page to override the contact view. Its tabbed and most tabs are made of their own cutom component.
On this particular component, I have a list of wrapperClass custom objects so users can mass copy Insurances (custom object). The popup allows them to choose which contact to copy the insurances to, and when you click select, the JS calls a function on the parent page that simply calls an actionFunction to insert the new records, and refreshes the list and adds a page message. Works great with every browser except IE. I really wish I could just force users to not use IE, but not an option at this point.
I have looked over the boards and tried every suggestion I could find from previous posts. I have taken out the showHeader="false", I have tried nesting the entire page in <body> tags, I tried immediate="true" in the actionFunction, I have added the following to the controller
Apexpages.currentPage().getHeaders().put('X-UA-Compatible', 'IE=8');
Nothing seems to work. It is actually closing the window, but it is not calling the actionFunction and rerendering the page at all. I just dont know how to fix this please help
Popup VF Page
<apex:form id="form">
<table cellpadding="5px" cellspacing="0" style="margin: 10px;">
<tr>
<td colspan="3" align="center"><apex:commandButton value="Select" action="{!save}" oncomplete="fun();" rerender="panel1,panel2"/> <apex:commandButton value="Cancel" onclick="window.top.close();" /></td>
</tr>
<tr>
</tr>
<tr>
<td width="50px"></td>
<td width="400px" class="cts_th">Which Family Member(s) would you like to copy selected Insurances to?</td>
<td width="50px"></td>
</tr>
<tr>
<td width="20px"></td>
</tr>
<tr>
<td width="20px"></td>
</tr>
<tr></tr>
</table>
<table cellpadding="5px" cellspacing="0" style="margin: 10px;">
<apex:repeat value="{!conWrappers}" var="con">
<tr>
<td width="50px" align="right"><apex:inputCheckbox value="{!con.checked}" id="check"/></td>
<td width="200px">{!con.cntact.Full_Name__c}</td>
</tr>
</apex:repeat>
</table>
<apex:outputpanel id="panel2">
<apex:pageblock id="block">
<apex:inputHidden value="{!saved}" id="saved"/>
<apex:inputHidden value="{!sel}" id="sel"/>
</apex:pageblock>
</apex:outputpanel>
</apex:form>
<script>
function fun() {
var item = document.getElementById('page:form:block:saved');
if(item.value == 'false'){
alert('You didn\'t choose anyone');
}
if(item.value == 'true') {
Close();
}
}
function Close() {
var winMain=window.opener;
if (null==winMain)
{
winMain=window.parent.opener;
}
item = document.getElementById('page:form:block:sel');
var sel = item.value;
winMain.userSelected(sel);
}
</script>
Snippets from Parent Page
<apex:actionfunction name="copyInsurance" action="{!copyInsurance}" immediate="true" rerender="insurances,table,dataTable"/>
<apex:inputhidden value="{!sel}" id="selected"/>
<script>
function userSelected(sel) {
var tag = document.getElementById('{!$Component.com.block.section.selected}');
tag.value = sel;
copyInsurance();
closePopup();
}
function closePopup() {
if (null!=newWin) {
newWin.close();
}
}
</script>
Its pretty straight forward and works perfectly on every other browser. Just dont get it. Please help
Chris
SOOOOOO.... I am really embarrassed to admit that I found this issue. I am more embarrassed because I spent hours pounding my head against the wall trying to fix it, and here was the issue.
function closeMe() {
var winMain=window.opener;
if (null==winMain)
{
winMain=window.parent.opener;
}
var item = document.getElementById('page:form:block:sel');
var sel = item.value;
winMain.userSelected(sel);
}
I didn't have the var in the original function. How stupid of me. I still don't get why all the other browsers worked ok, but only IE was messing up due to this. Are the other browsers just that much more intuitive?? Regardless, I appreciate the help. Thanks again ForceCoder
All Answers
I have had issues that I only see in IE with actionFunctions before when there is something else in the in the page with an id that is same as the actionFunction's name.
For example, the following could cause problems in IE.
button id="copyInsurance" AND
actionFunction name="copyInsurance"
Quick fix is to just change the actionFunction name to "copyInsuranceJs" and calls to it to copyInsuranceJs().
When your JS calls to copyInsurance(), IE thinks that you are referring to the the button element. You'd get something like "Object doesn't support this property or method". You'd be able to see it in the script debugger for IE, if you set a breakpoint at the function call and evaulate the name of the function you'll see that it is actually a button, or whatever.
That was a good thought, but I changd the names, and still nothing. I just don't get it. I'm sure its going to end up being something very small and dumb that I have overlooked, but it's very frustrating as it works perfectly in every other browser.
Any more ideas out there?
Chris
Could it have somethingt o do with the fact that this is a component in the VF page, and not part of the VF page itself? Is the JS having trouble finding the element becasue of this? Why would this only be happening in IE?
It seems like it shouldn't be having problems due to it being a component if it works in other browsers. Have you tried to viewing the generated source in the browser? Maybe something else, such as the outer element being rendered, has a duplicate ID. I know that the IDs that get generated in the HTML by SF can be different than one it specified in the VF for apex tags.
When I debug the page i found the following for the Id's that are generated...
<input name="page:j_id274:j_id275:com:block:section:selected" id="page:j_id274:j_id275:com:block:section:selected" type="hidden" value="undefined"/>
function userSelected(sel) {
var tag = document.getElementById('page:j_id274:j_id275:com:block:section:selected');
tag.value = sel;
performCopyInsurance();
closePopup();
}
It is interesting though that the input is undefined, so perhaps the value from the popup page isnt being passed correctly? But if I go to the popup page and debug, the id's there match as well
<input name="page:form:block:sel" id="page:form:block:sel" type="hidden" value=""/>
function fun() {
var item = document.getElementById('page:form:block:saved');
if(item.value == 'false'){
alert('You didn\'t choose anyone');
}
if(item.value == 'true') {
Close();
}
}
function Close() {
var winMain=window.opener;
if (null==winMain)
{
winMain=window.parent.opener;
}
item = document.getElementById('page:form:block:sel');
var sel = item.value;
winMain.userSelected(sel);
}
So again, I just don't get why it will work in every browser except IE. Baffling to me
SOOOOOO.... I am really embarrassed to admit that I found this issue. I am more embarrassed because I spent hours pounding my head against the wall trying to fix it, and here was the issue.
function closeMe() {
var winMain=window.opener;
if (null==winMain)
{
winMain=window.parent.opener;
}
var item = document.getElementById('page:form:block:sel');
var sel = item.value;
winMain.userSelected(sel);
}
I didn't have the var in the original function. How stupid of me. I still don't get why all the other browsers worked ok, but only IE was messing up due to this. Are the other browsers just that much more intuitive?? Regardless, I appreciate the help. Thanks again ForceCoder
Awesome! Glad you figured it out.