Apex Code Development You need to sign in to do that
Don't have an account?
mauricio.ramos@corpital javascript function not working with pagblocktable
Hello,
I have a pageblocktable that for one of the fields I have a lookup that I am trying to override with my own custom lookup. Basically I have an input text and a link with an image to resemble the SF lookup. I havea onclick event on the command link and I am calling a JS function in a script tag but for some reason it is not working. If I comment out the line where I assign the elementById then the popo page is opened, but when I uncomment the var assignment lines then nothing happens as if there was an error. below is the relevant pieces of the code and I have commented out some lines since it is not working. I dont know if the issue is because of the table where the function does not know which value from which row to assign but I am very incompetent when it comes to JS..
<script>
function prodLookup()
{
// var txtId = document.getElementById($Component.thePage.theForm.SOIpgblk.tablePnl.SOIList.prodCol.prodRgn.fProd).value; //this doesnt work
/ /var txtId = document.getElementById("fProd").value; //this doesnt work
// var x= document.getElementById("fLineType").selectedIndex;
// var y= document.getElementById("fLineType").options;
//var lineType = document.getelementById(y[x].text); //uncommented this doesnt work either.
// alert('To select a Product, first select the Line Type: ' + y);
alert('didnt work!' );
baseURL = "/apex/customProdSearchPopup?"; // how do I assign the variables above to this url????
var pop = window.open(baseURL, "lookup", 350, 480, "width=350,height=480,toolbar=no,status=no,directories=no,menubar=no,resizable=yes,scrollable=no", true);
// doUpdateProdData();
}
</script>
the call from the visualforce field I think is OK because if I comment out everything the alert(didnt work!) pop up is shown, so means the method gets called. see below
<apex:column headerValue="Line type" id="ltcol">
<apex:actionRegion id="lnTypeRgn" renderRegionOnly="false">
<apex:inputField value="{!SOI.Line_Type__c}" id="fLineType" required="true" >
<apex:actionSupport event="onblur" reRender="detailPanel" action="{!loadSOIDs}" >
<apex:param name="currSOIid" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
<apex:param name="currSOILT" value="{!SOI.Line_Type__c}" assignTo="{!currLineType}"/>
</apex:actionSupport>
</apex:inputField>
</apex:actionRegion>
</apex:column>
<apex:column headerValue="Product" id="prodCol">
<apex:actionRegion id="prodRgn">
<apex:inputText value="{!SOIProdTxt}" id="fProd" />
<apex:commandLink onclick="prodLookup()" reRender="detailPanel,tablePnl,fDiscAmt,fTotalPrice,fProfit,colProfit">
<apex:image value="{!$Resource.lookupIcon}"/>
</apex:commandLink>
</apex:actionRegion>
Hi, thanks for the reply, but actually I have tried your suggestion. And made some changes as I will not use the entered text on the input field to pass in as parameter, but I do need the value rom the neighbouring picklist and pass that into the pop up. The problem is that the alert is showing that the selected index of the picklist is ALWAYS 1, and then the var lineType is always null.
<apex:column headerValue="Line type" id="ltcol"> <apex:actionRegion id="lnTypeRgn" renderRegionOnly="false"> <apex:inputField value="{!SOI.Line_Type__c}" id="fLineType" required="true" > <apex:actionSupport event="onblur" reRender="detailPanel" action="{!loadSOIDs}" > <apex:param name="currSOIid" value="{!SOI.Id}" assignTo="{!currSOIid}"/> <apex:param name="currSOILT" value="{!SOI.Line_Type__c}" assignTo="{!currLineType}"/> </apex:actionSupport> </apex:inputField> </apex:actionRegion> </apex:column> <apex:column headerValue="Product" id="prodCol"> <apex:actionRegion id="prodRgn"> <apex:inputText value="{!SOIProdTxt}" id="fProd" onFocus="this.blur()" /> <apex:commandLink onclick="prodLookup()" reRender="detailPanel,tablePnl,fDiscAmt,fTotalPrice,fProfit,colProfit"> <apex:image value="{!$Resource.lookupIcon}"/> <script> function prodLookup(){ var i= document.getElementById('{!$Component.fLineType}').selectedIndex; var ops= document.getElementById('{!$Component.fLineType}').options; var lineType = document.getElementById(ops[i].text); //if uncommented this doesnt work either. //for testing purposes: alert(lineType); //this comes up NULL!!!! baseURL = "/apex/customProdSearchPopup?LineType=" + lineType; var pop = window.open(baseURL, "lookup", 350, 480, "width=350,height=480,toolbar=no,status=no,directories=no,menubar=no,resizable=yes,scrollable=no", true); if (window.focus) { pop.focus(); } return false; } function closeLookupPopup() { if (null!=pop) { pop.close(); } // doUpdateProdData(); } </script> </apex:commandLink> </apex:actionRegion> </apex:column> <apex:column headerValue="Description"> <apex:actionRegion id="rgnDesc" renderRegionOnly="false" > <apex:inputField value="{!SOI.Description__c}" id="fDescr" > <apex:actionSupport event="onfocus" reRender="detailPanel" action="{!loadSOIDs}" > <apex:param name="currSOIid" value="{!SOI.Id}" assignTo="{!currSOIid}"/> <apex:param name="currSOILT" value="{!SOI.Line_Type__c}" assignTo="{!currLineType}"/> </apex:actionSupport> </apex:inputField> </apex:actionRegion> </apex:column>All Answers
Hi,
Try to use the JavaScript function at the bottom from where it is called. I think you forgot to mention the merge and single quotes while using the document.getElemetById. Try the below code as reference:
<apex:page controller="SamePageController" tabstyle="Lead" standardStylesheets="false" >
<apex:sectionHeader title="Create Extranets">
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection columns="3" title="Extranet Information">
<apex:outputLabel style="font-weight:bold;" value="Extranet Name" for="exname"/>
<apex:inputText id="exname" required="true" onkeydown="grabExName()">
<script type="text/javascript">
function grabExName()
{
var ex = document.getElementById('{!$Component.exname}').value;
alert(ex);
}
</script>
</apex:inputText>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:sectionHeader>
</apex:page>
Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.
Hi, thanks for the reply, but actually I have tried your suggestion. And made some changes as I will not use the entered text on the input field to pass in as parameter, but I do need the value rom the neighbouring picklist and pass that into the pop up. The problem is that the alert is showing that the selected index of the picklist is ALWAYS 1, and then the var lineType is always null.
<apex:column headerValue="Line type" id="ltcol"> <apex:actionRegion id="lnTypeRgn" renderRegionOnly="false"> <apex:inputField value="{!SOI.Line_Type__c}" id="fLineType" required="true" > <apex:actionSupport event="onblur" reRender="detailPanel" action="{!loadSOIDs}" > <apex:param name="currSOIid" value="{!SOI.Id}" assignTo="{!currSOIid}"/> <apex:param name="currSOILT" value="{!SOI.Line_Type__c}" assignTo="{!currLineType}"/> </apex:actionSupport> </apex:inputField> </apex:actionRegion> </apex:column> <apex:column headerValue="Product" id="prodCol"> <apex:actionRegion id="prodRgn"> <apex:inputText value="{!SOIProdTxt}" id="fProd" onFocus="this.blur()" /> <apex:commandLink onclick="prodLookup()" reRender="detailPanel,tablePnl,fDiscAmt,fTotalPrice,fProfit,colProfit"> <apex:image value="{!$Resource.lookupIcon}"/> <script> function prodLookup(){ var i= document.getElementById('{!$Component.fLineType}').selectedIndex; var ops= document.getElementById('{!$Component.fLineType}').options; var lineType = document.getElementById(ops[i].text); //if uncommented this doesnt work either. //for testing purposes: alert(lineType); //this comes up NULL!!!! baseURL = "/apex/customProdSearchPopup?LineType=" + lineType; var pop = window.open(baseURL, "lookup", 350, 480, "width=350,height=480,toolbar=no,status=no,directories=no,menubar=no,resizable=yes,scrollable=no", true); if (window.focus) { pop.focus(); } return false; } function closeLookupPopup() { if (null!=pop) { pop.close(); } // doUpdateProdData(); } </script> </apex:commandLink> </apex:actionRegion> </apex:column> <apex:column headerValue="Description"> <apex:actionRegion id="rgnDesc" renderRegionOnly="false" > <apex:inputField value="{!SOI.Description__c}" id="fDescr" > <apex:actionSupport event="onfocus" reRender="detailPanel" action="{!loadSOIDs}" > <apex:param name="currSOIid" value="{!SOI.Id}" assignTo="{!currSOIid}"/> <apex:param name="currSOILT" value="{!SOI.Line_Type__c}" assignTo="{!currLineType}"/> </apex:actionSupport> </apex:inputField> </apex:actionRegion> </apex:column>Solution was to use dom nomenclature to reference the values that were needed to be passed to the javascript, as highlighted in red below:
<apex:column headerValue="Product" id="prodCol">
<apex:actionRegion id="prodRgn">
<apex:inputText value="{!SOI.Product_Name__c}" id="fProd" onFocus="this.blur()" />
<apex:commandLink onclick="prodLookup(this.parentNode.parentNode.cells[1].getElementsByTagName('select')[0].options[this.parentNode.parentNode.cells[1].getElementsByTagName('select')[0].selectedIndex].value);" reRender="fProd">
<apex:image value="{!$Resource.lookupIcon}"/>
<apex:param name="currSOI" value="{!SOI.id}" assignTo="{!currSOIid}"/>
</apex:commandLink>
</apex:actionRegion>
</apex:column>
Hope this helps someone in similar crisis.