Don't have an account?

Browse by Topic

+ Start a Discussion

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" />

<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>

.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>

<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>

</table>

</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>

</table>

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

}

May 24, 2013
·
Like
0
·
Follow
0

Best Answer chosen by Admin (Salesforce Developers)

Wizno @ Configero
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...

May 24, 2013
·
Like
0
·
Dislike
0

This was selected as the best answer

Avidev9
Well problem is when you do a rerender the HTML gets changed and hence JQUERY wasnt able to identify the elements and cant do any change/action.

So to make sure it works, try to call the JS function again from oncomplete event of your commandbutton/action function

May 27, 2013
·
Like
0
·
Dislike
0

JN22
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.

May 28, 2013
·
Like
0
·
Dislike
0

Avidev9
well I dont think this will work. Your js function takes in two parameters and you never sent those value to the function when you are calling it from onComplete

May 28, 2013
·
Like
0
·
Dislike
0

JN22
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!

May 29, 2013
·
Like
1
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Javascript & VF Page Issue

All Answers

You need to sign in to do that.