You need to sign in to do that
Don't have an account?
Javascript & VF Page Issue
Hello,
I have a custom VF page that contains Javascript to toggle through a set of images (red, yellow, green) and assigns value based on the image. There is also a section in my controller that assigns a variable to render sections of the VF page, based on whether or not the user selects a certain stage. Without the render code in my controller, the Javascript works as expected. However, when I use the sections of my controller to render the appropriate section, it works as expected but the Javascript stops working. Can anyone fgure out why based on my VF page and Controller below:
VF Page:
<apex:page standardController="Opportunity" tabStyle="Opportunity" ShowHeader="TRUE" extensions="OppMgmtController" action="{!testom}">
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" />
<!--Javascript section to handle red/yellow/green ball toggle for qualifier status-->
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function () {
$j('.icon').click(function () {
$j(this).hide();
var next = $j(this).next();
if (next.length == 0)
next = $j(this).parent().find('.icon').first();
next.show();
setFieldValue(next.attr("name"), next.attr("id")); //Pass the name and id of selected icon to function
});
});
function setFieldValue(name, color){
var selector = "." + name; //The selector is the styleClass for the hidden field
if(color == "R"){
$j(selector).val("0");
}else if(color == "Y"){
$j(selector).val("1");
}else if(color == "G"){
$j(selector).val("2");
}
}
</script>
<style type="text/css">
#StatusIcon
{
position: relative;
}
.icon
{
position: relative;
margin: auto;
top: 0px;
left: 0px;
display: none;
}
.icon.default
{
display: block;
}
</style>
<apex:form >
<apex:repeat value="{!oppmgr}" var="opp">
<table align="right" columns="3" width="100%">
<tr>
<td align="right" width="75%">
<apex:commandLink id="Stage1" value="Stage 1 - Identify Target" action="{!Stage1}" rerender="NewQualifiers"/>
</td>
<td width="20%" style="border: 2px solid silver;padding:none">
<hr style="height:15px; border:none;
margin:0;" align="left" width="0%"/>
</td>
<td width="5%">
0%
</td>
</tr>
<tr>
<td align="right" width="75%">
<apex:commandLink id="Stage2" value="Stage 2 - Qualify Target" action="{!Stage2}" rerender="NewQualifiers"/>
</td>
<td width="20%" style="border: 2px solid silver;padding:none">
<hr style="height:15px; border:none;
margin:0;" align="left" width="0%"/>
</td>
<td width="5%">
0%
</td>
</tr>
</table>
<apex:outputPanel id="NewQualifiers">
<apex:outputPanel rendered="{!IF((Stage1Qual=True || (Stage1Qual=False && Stage2Qual=False && Stage3Qual=False && Stage4Qual=False && Stage5Qual=False)),'true','false')}">
<table width="100%">
<tr >
<td colspan="5">
<div class="SectSubHeader">STAGE 1 - IDENTIFY TARGET</div><br></br>
</td>
</tr>
<tr valign="middle" >
<td colspan="4"><br/></td>
</tr>
<tr valign="middle" >
<td width="5%" align="center">
<div id="StatusIcon" >
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP7" class="icon default" id="R" name="s1q1n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP8" class="icon" id="Y" name="s1q1n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP6" class="icon" id="G" name="s1q1n"/>
</div>
</td>
<td width="1%">
<apex:inputField value="{!opp.S1Q1_New__c}" styleClass="s1q1n" style="visibility:hidden; width:10%;"/>
</td>
</tr>
<tr valign="middle">
<td width="5%" align="center">
<div id="StatusIcon" >
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP7" class="icon default" id="R" name="s1q2n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP8" class="icon" id="Y" name="s1q2n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP6" class="icon" id="G" name="s1q2n"/>
</div>
</td>
<td width="1%">
<apex:inputField value="{!opp.S1Q2_New__c}" styleClass="s1q2n" style="visibility:hidden; width:10%;"/>
</td>
</tr>
</table>
<br/><br/>
</apex:outputPanel>
<apex:outputPanel rendered="{!Stage2Qual}">
<table width="100%">
<tr >
<td colspan="5">
<div class="SectSubHeader">STAGE 2 - QUALIFY TARGET</div><br></br>
</td>
</tr>
<tr valign="middle" >
<td colspan="5"><br/></td>
</tr>
<tr valign="middle" >
<td width="5%" align="center">
<div id="StatusIcon" >
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP7" class="icon default" id="R" name="s2q1n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP8" class="icon" id="Y" name="s2q1n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP6" class="icon" id="G" name="s2q1n"/>
</div>
</td>
<td width="1%">
<apex:inputField value="{!opp.S2Q1_New__c}" styleClass="s2q1n" style="visibility:hidden; width:10%;"/>
</td>
</tr>
<tr valign="middle">
<td width="5%" align="center">
<div id="StatusIcon" >
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP7" class="icon default" id="R" name="s2q2n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP8" class="icon" id="Y" name="s2q2n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP6" class="icon" id="G" name="s2q2n"/>
</div>
</td>
<td width="1%">
<apex:inputField value="{!opp.S2Q2_New__c}" styleClass="s2q2n" style="visibility:hidden; width:10%;"/>
</td>
</tr>
<tr valign="middle">
<td width="5%" align="center">
<div id="StatusIcon" >
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP7" class="icon default" id="R" name="s2q3n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP8" class="icon" id="Y" name="s2q3n"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP6" class="icon" id="G" name="s2q3n"/>
</div>
</td>
<td width="1%">
<apex:inputField value="{!opp.S2Q3_New__c}" styleClass="s2q3n" style="visibility:hidden; width:10%;"/>
</td>
</tr>
</table>
<br/><br/>
</apex:outputPanel>
</apex:outputPanel>
</apex:repeat>
</apex:form>
</apex:page>
Controller:
public class OppMgmtController{
public List<Opportunity_Stage_Manager__c> oppmgr {get; set;}
private final Opportunity opp;
public OppMgmtController(ApexPages.StandardController myController) {
oppmgr = new List<Opportunity_Stage_Manager__c>();
opp=(Opportunity)myController.getrecord();
system.debug('#########opp#########' + opp);
}
Opportunity_Stage_Manager__c oppmgr2 = new Opportunity_Stage_Manager__c();
public void testom(){
system.debug('****************');
system.debug('****************:'+oppmgr2);
oppmgr2.Opportunity__c = opp.id;
oppmgr.add(oppmgr2);
system.debug('########################');
}
public PageReference save() {
string opportunityID=ApexPages.currentPage().getParameters().get('id');
List <Opportunity_Stage_Manager__c> lt1=[SELECT id
FROM Opportunity_Stage_Manager__c
WHERE Opportunity__c =:opportunityID];
if(lt1.size()>0)
{
ApexPages.Message myMsg = new ApexPages.Message(ApexPages.severity.WARNING, 'Opportunity Management Already Exists on This Opportunity. Please Delete or Edit the Existing Scorecard');
ApexPages.addMessage(myMsg);
return null;
}
Else
insert oppmgr;
{
PageReference RetPage = new PageReference('/apex/OppStageMgrEdit2?id=' + oppmgr[0].id);
RetPage.setRedirect(true);
return RetPage;
}
}
public boolean Stage1Qual {get; set;}
public boolean Stage2Qual {get; set;}public void Stage1() {
Stage1Qual = true;
Stage2Qual = false;
Stage3Qual = false;
Stage4Qual = false;
Stage5Qual = false;
}
public void Stage2() {
Stage1Qual = false;
Stage2Qual = true;
Stage3Qual = false;
Stage4Qual = false;
Stage5Qual = false;
}
}
The issue is with the rendering/reRendering. I don't remember the solution but I know where to find it. I was listening to the podcast on a recent plane trip, and I know they go over how to overcome it.
It is #17 on the list,
https://itunes.apple.com/us/podcast/developers-sessions/id478700566
Developing Applications with jQuery
ReleasedSep 11, 2011
jQuery is the most popular JavaScript library in use today. Why? Because it makes working with pages to create rich user experiences incredibly simple. Join us as we show you how to do...
All Answers
The issue is with the rendering/reRendering. I don't remember the solution but I know where to find it. I was listening to the podcast on a recent plane trip, and I know they go over how to overcome it.
It is #17 on the list,
https://itunes.apple.com/us/podcast/developers-sessions/id478700566
Developing Applications with jQuery
ReleasedSep 11, 2011
jQuery is the most popular JavaScript library in use today. Why? Because it makes working with pages to create rich user experiences incredibly simple. Join us as we show you how to do...
So to make sure it works, try to call the JS function again from oncomplete event of your commandbutton/action function
OK. I tried changing my commandLink function to the following:
<apex:commandLink id="Stage1" value="Stage 1 - Identify Target" action="{!Stage1}" rerender="NewQualifiers" onComplete="setFieldValue();"/>
However, it still does not work. Some of the examples I have seen have used an actionFunction, but I tried that as well and could not get it to work. Any other ideas I can try or am I doing this wrong? Thanks.
Wizno,
Thanks. I got a chance to go through the podcast and the solution was in #17 around the 36:00 minute mark. I had to create a function around my JS and then call that JS in an Apex:actionFunction. So now when I reRender, it calls the JS function. Thanks!