function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
dotnetericdotneteric 

Strange Behavior - same code in 2 places renders differently

This one is really strange.  I have the following javascript function with embedded VF standard components on a VF page:

 

 
function getField(fieldname) {
	var fieldLabel;
	var fieldCell1;
	var fieldCell2;
	var fieldCell3; 
	var fieldCell4;
	var fieldCell5;
	
	if (fieldname == 'Loan_Tranche_Type_1__c') {
		fieldLabel = 'Loan Tranche 1';
		fieldCell1 = '<apex:outputPanel rendered="{!NOT(isEdit)}" layout="block" styleClass="shadeHeader cellNormal cellAlignCenter"><apex:outputField value="{!lli.Loan_Tranche_Type_1__c}"/></apex:outputPanel><apex:inputField value="{!lli.Loan_Tranche_Type_1__c}" rendered="{!isEdit}" styleClass="formInputElement shadeHeader"/>';
		fieldCell2 = '<apex:outputPanel rendered="{!NOT(isEdit)}" layout="block" styleClass="shadeHeader cellNormal cellAlignCenter"><apex:outputField value="{!lli.Loan_Tranche_Type_2__c}"/></apex:outputPanel><apex:inputField value="{!lli.Loan_Tranche_Type_2__c}" rendered="{!isEdit}" styleClass="formInputElement shadeHeader"/>';
		fieldCell3 = '<apex:outputPanel rendered="{!NOT(isEdit)}" layout="block" styleClass="shadeHeader cellNormal cellAlignCenter"><apex:outputField value="{!lli.Loan_Tranche_Type_3__c}"/></apex:outputPanel><apex:inputField value="{!lli.Loan_Tranche_Type_3__c}" rendered="{!isEdit}" styleClass="formInputElement shadeHeader"/>';
		fieldCell4 = '<apex:outputPanel rendered="{!NOT(isEdit)}" layout="block" styleClass="shadeHeader cellNormal cellAlignCenter"><apex:outputField value="{!lli.Loan_Tranche_Type_4__c}"/></apex:outputPanel><apex:inputField value="{!lli.Loan_Tranche_Type_4__c}" rendered="{!isEdit}" styleClass="formInputElement shadeHeader"/>';
		fieldCell5 = '<div class="formInputElement"></div>';
	}
	else if (fieldname == 'Customer_Id__c') {
		fieldLabel = 'Loan Tranche 1';
		fieldCell1 = '<apex:outputPanel rendered="{!NOT(isEdit)}" layout="block" styleClass="shadeHeader cellNormal cellAlignCenter"><apex:outputField value="{!lli.Loan_Tranche_Type_1__c}"/></apex:outputPanel><apex:inputField value="{!lli.Loan_Tranche_Type_1__c}" rendered="{!isEdit}" styleClass="formInputElement shadeHeader"/>';
		fieldCell2 = '<apex:outputPanel rendered="{!NOT(isEdit)}" layout="block" styleClass="shadeHeader cellNormal cellAlignCenter"><apex:outputField value="{!lli.Loan_Tranche_Type_2__c}"/></apex:outputPanel><apex:inputField value="{!lli.Loan_Tranche_Type_2__c}" rendered="{!isEdit}" styleClass="formInputElement shadeHeader"/>';
		fieldCell3 = '<apex:outputPanel rendered="{!NOT(isEdit)}" layout="block" styleClass="shadeHeader cellNormal cellAlignCenter"><apex:outputField value="{!lli.Loan_Tranche_Type_3__c}"/></apex:outputPanel><apex:inputField value="{!lli.Loan_Tranche_Type_3__c}" rendered="{!isEdit}" styleClass="formInputElement shadeHeader"/>';
		fieldCell4 = '<apex:outputPanel rendered="{!NOT(isEdit)}" layout="block" styleClass="shadeHeader cellNormal cellAlignCenter"><apex:outputField value="{!lli.Loan_Tranche_Type_4__c}"/></apex:outputPanel><apex:inputField value="{!lli.Loan_Tranche_Type_4__c}" rendered="{!isEdit}" styleClass="formInputElement shadeHeader"/>';
		fieldCell5 = '<div class="formInputElement"></div>';
	}
	else 
		alert('field ' + fieldname + ' could not be found');
	
	return null;
}
 
 
It's basically an if statement with one "else if".  Both the if and else if have the same exact codeblock.  Here's how it's rendering:
 
function getField(fieldname) {
 var fieldLabel;
 var fieldCell1;
 var fieldCell2;
 var fieldCell3; 
 var fieldCell4;
 var fieldCell5;
 
 if (fieldname == 'Loan_Tranche_Type_1__c') {
  ;
  fieldCell1 = '<span id="j_id0:j_id2:j_id4"><span id="j_id0:j_id2:j_id5">Common</span></span>';
  fieldCell2 = '<div id="j_id0:j_id2:j_id8" class="shadeHeader cellNormal cellAlignCenter"><span id="j_id0:j_id2:j_id9">Trade Customer</span></div>';
  fieldCell3 = '<div id="j_id0:j_id2:j_id12" class="shadeHeader cellNormal cellAlignCenter"><span id="j_id0:j_id2:j_id13">Revolver</span></div>';
  fieldCell4 = '<div id="j_id0:j_id2:j_id16" class="shadeHeader cellNormal cellAlignCenter"><span id="j_id0:j_id2:j_id17">LC</span></div>';
  fieldCell5 = '&lt;div class="formInputElement"&gt;&lt;/div&gt;';
 }
 else if (fieldname == 'Customer_Id__c') {
  fieldLabel = 'Loan Tranche 1';
  fieldCell1 = '<div id="j_id0:j_id2:j_id20" class="shadeHeader cellNormal cellAlignCenter"><span id="j_id0:j_id2:j_id21">Common</span></div>';
  fieldCell2 = '<div id="j_id0:j_id2:j_id24" class="shadeHeader cellNormal cellAlignCenter"><span id="j_id0:j_id2:j_id25">Trade Customer</span></div>';
  fieldCell3 = '<div id="j_id0:j_id2:j_id28" class="shadeHeader cellNormal cellAlignCenter"><span id="j_id0:j_id2:j_id29">Revolver</span></div>';
  fieldCell4 = '<div id="j_id0:j_id2:j_id32" class="shadeHeader cellNormal cellAlignCenter"><span id="j_id0:j_id2:j_id33">LC</span></div>';
  fieldCell5 = '&lt;div class="formInputElement"&gt;&lt;/div&gt;';
 }
 else 
  alert('field ' + fieldname + ' could not be found');
 
 return null;
}
 
Notice that the "fieldLabel" line in the if statement block is completely botched although it doesn't contain any VF tags.  Also, the "fieldCell1" line renders differently (incorrectly creates a span tag instead of a div tag) than the same exact line in the else if block.  
 
What can be causing this?  What should I look for?
Message Edited by dotneteric on  03-26-2010 08:40 AM


stephanstephan
Not sure what you're trying to accomplish with this approach, but embedding VF in JS like this is likely to be fraught with issues. Are you sure this isn't something you can't accomplish outside of JavaScript?
 
In this case I suspect that the issue is that the parser is getting confused trying to render an outputPanel inside of a script like this. One thing you might try, though, is simply adding some inert Javascript line at the point where yours is getting stripped out. i.e.:
 
var foo = true;
 
That way it will only strip out the inert line, and not one you care about.
 
...stephan