Apex Code Development You need to sign in to do that
Don't have an account?
BrianWK Javascript to update a values in a td within a outputpanel or Center text in panel
Hey folks, I'm having some real difficulty here.
Here's what I'm trying to do. My goal is to have very quick client-side "warnings and errors" messages display on a VF page. Going to controller and back everytime users are entering data simply takes way too long.
I'm already using Javascript on that page to handle some client-side calculation. So I'm planning on also using Javascript to Identify when a data error has occured and then display text within a output panel. I want this text red, bold and centered on the page.
I've been able to get the text to display in an output panel, be bold and red - but I can never get it to be centered.
Here's a slimmed down version of what I got.
<apex:page standardcontroller="Contract_Product__c" extensions="Contract_Product_Add_Extension_jquery" id="page">
<apex:form rendered="{!Master.AccountID != null && Master.Lock_Status__c != 'Locked' || $Profile.Name == 'System Administrator'}" id="ProductForm">
<apex:outputpanel id="SelectContractProducts" layout="none">
<apex:pageblock id="ContractProductsBlock" title="Select Contract Products" rendered="{!Display}">
<apex:outputpanel id="Warnings" >
<table width="100%" id="WarningsTable">
<tr id="WarningsRow">
<td id="WarningsCells">
</td>
</tr>
</table>
</apex:outputpanel>
</apex:pageblock>
</apex:ouputpanel>
</apex:form>
</apex:page>
If I remove the WarningsTable (and all chidlren) I can update the OutputPanel "Warnings" succesfully with
document.getElementById('{!$Component.page.ProductForm.ContractProductsBlock.Warnings}').innerHTML
However trying to update the table I've been unsuccessful in getting the Table, Row, or Cell IDs. The only reason I'm using a table is to get the text to be centered.
Anyone provide some guidance? I either need to get the text centered in the output panel so it's centered within the pageblock or I need to get to the TD value so I can add and delete warnings.
Ok, let's remove the table and try centering the text in the output panel:
All Answers
See if this helps:
Thanks for the reply.
I'm not having an issue getting the values centered when using a table. The problem is that when my warnings are in a table I can't get them updated with javascript. These are client-side updates so everytime a user is entering data in the form I'm checking for errors and want to list the errors in nice red bold text in the top center of the page block.
So my issue is:
1. Cannot update the TD value of the table. The table allows me to easily center and format but cannot get the values to update with Javascript. The $Components are never found when the page gets rendered
2. Cannot center text when putting values just in the output panel.
This is just a weird issue. I can update the values in the OutputPanel with javascript - but I can't center the text. I can center the text if I put the values in a table but I can't update the values in the table.
So I'm looking for a solution for either centering the text in the outputpanel or updating the values in the table.
Ok, let's remove the table and try centering the text in the output panel:
Bingo!
Thanks. I tried text-align: center and never got it to be centered.
You added display:block what is that style doing to the outputpanel? Would not having that be why the text-align:center wasn't working on its own?
text-align applies to 'block' elements. The apex:outputpanel actually renders as a span. display:block fixes this :)