My requirement: step 1: completed I have two visualforce pages, page 1 has a drop down select field, a checkbox and a button. When i click the button, page 2(rendered as pdf) is displayed as an iframe.
step 2: when i select the checkbox in page 1, I should be able to highlight the fields in the iframe.
Any thoughts or help on this would be greatly appreciated.
Thanks in advance!
Page 1:
<apex:page standardController="Opportunity" extensions="OppExt">
<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.min.js"/>
<apex:stylesheet value="{!$Resource.customCSS}" />
<html>
<script type="text/javascript">
function generateIFrame() {
var oppId = document.getElementById('{!$Component.oId}').innerHTML;
console.log(oppId);
var doc = document.getElementById("volvo").value;
var cBox = document.getElementById("check").checked;
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.OppExt.getIFrame}', JSON.stringify(oppId), JSON.stringify(doc), JSON.stringify(cBox),
function(result, event) {
if(event.type === 'exception') {
alert('In exception');
}
else if (event.status) {
var elmnt = document.getElementById("if");
elmnt.src = result;
}
else {
alert('In else');
console.log(event.message);
}
});
}
</script>
<!-- Begin Default Content REMOVE THIS -->
<div>
<apex:outputText label="Opportunity Name" style="color:#A9A9A9;font-size:20px" value="{!$CurrentPage.parameters.id}" id="oId"/>
</div>
<div>
<select id="car">
<option id="volvo" value="volvo">Volvo</option>
<option id="saab" value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<input id="check" type="checkbox" name="vehicle" value="yes" checked="false" /> I have a bike
</div>
<div>
<button id="generate" onclick="generateIFrame()">Generate</button>
</div>
<span>
<apex:iframe id="if"/>
</span>
</html>
</apex:page>
Page 2:
<apex:page renderAs="pdf" standardController="Opportunity" extensions="OppExt" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" >
<apex:stylesheet value="{!$Resource.customCSS}" />
<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.min.js"/>
<h1 id="header">Congratulations</h1>
<p id="p1">
This is your new Page: volvo
</p>
<apex:form >
Name: <apex:outputText id="oppName" value="{!Opportunity.Name}"/>
</apex:form>
</apex:page>
Controller Extension:
global class OppExt {
public static String chBox;
public string testBox = 'test';
public OppExt(){}
public OppExt(ApexPages.StandardController std){
}
@RemoteAction
global static string getIFrame(string oppId, string docName, string cBox){
String opportunityId = (String)System.JSON.deserialize(oppId, String.class);
String document = (String)System.JSON.deserialize(docName, String.class);
chBox = (String)System.JSON.deserialize(cBox, String.class);
String link;
link = 'https://na50.visual.force.com/apex/'+document+'?id='+opportunityId;
return link;
}
}
