6

I have a visualforce page with quite a few apex:inputField elements on it.

When the value of one of the inputfields is changed, I want to put that value into an output text area elsewhere on the page.. but I don't (and basically, can't) want to save the whole object in the background.

I have used an apex:actionSupport to watch for the onChange event, and it rerenders a component, which has the outputText on it.

The input text looks like this:

<apex:inputField value="{!Invoice__c.Country__c}">
    <apex:actionSupport event="onchange" reRender="invoiceData" />
</apex:inputField>

and the component on the same page looks like this:

<apex:outputPanel id="invoiceData">
    <c:invoiceDataComponent countryCode="XYZ" />
</apex:outputPanel>

The component then has a controller, and defines an apex:attribute binding to a variable (countryCode) into which I'd like to shove the value of the country text box.

But I cannot, for the life of me, work out what to put at XYZ above, to get the text in the inputField. If I could just put javascript in there, I'd put an ID on the input and use:

document.getElementById('inputID').value

But when I tried this, it just passed the string above in literally. This is quite frustrating!

Improve this question
2
  • Have you tried putting countryCode="{!Invoice__c.Country__c}"?
    – eyescream
    Oct 25, 2012 at 15:12
  • I have indeed. But there is no value in this field at this point..?
    – Simon Lawrence
    Oct 26, 2012 at 9:28

3 Answers 3

Reset to default
3

I would suggest just updating your component to:

<apex:outputPanel id="invoiceData">
    <c:invoiceDataComponent countryCode="{!Invoice__c.Country__c}" />
</apex:outputPanel>

I believe by adding the ActionSupport to your your code should already be updating the value on the controller, so when your component rerenders it should have the updated value.

Improve this answer
2
  • I have tried this, but I think the problem is, this VF page is for creating the underlying record, therefore, at this point (when the first inputfield is being populated) there isn't even a record in memory in the controller.. I've tried instantiating an empty record in the controller constructor, but - via debugging - when the inputfield fires onChange, the field in this object isn't being set.
    – Simon Lawrence
    Oct 26, 2012 at 9:26
  • Technically I guess you were right here. I ended up going through this tutorial (salesforce.com/docs/developer/cookbook/Content/…) a couple of times, before eventually going for the "remove everything else from the page until the simplest components work again" and lo-and-behold, eventually I found a setup that worked as above, using the ActionSupport. I think, in the end, it was simply nesting the "form", "block", "actionregion" tags in the correct fashion(??!)
    – Simon Lawrence
    Oct 26, 2012 at 13:42
3

If you're up for stepping out of apex land, jQuery is great javascript library at this sort of thing. Assuming you have this input and output elements:

<apex:outputPanel id="output">Initial Value</apex:outputPanel>
<apex:inputText id="input" value="{!inputText}"/>

You could create a jquery function that copies value from one to the other on the change event

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
j$ = jQuery.noConflict();
j$().ready(function() {
  j$("[id$='input']").change(function() {
    j$("[id$='output']").html(j$("[id$='input']").val());
  });
});
</script>

JQuery has an amazing amount of sample code and tutorials including salesforce related examples. It's definitely worth the investment.

Improve this answer
2

First make sure that the field is correctly getting assigned to the component's controller (add system.debug() statements around where you do the assignment and look through the debug logs.

The issue is probably that the code is not being assigned to the controller where the attribute draws it's value. I don't believe actionSupport submits the form with the value.

It's easily enough done by javascript, I'd use jQuery myself, but you can still:

Parent page (don't use actionSupport):

<apex:inputField value="{!Invoice__c.Country__c}" onChange="$('.inputField').val($(this).val());" />

In the component:

<apex:inputField value="" styleClass="inputField" />
Improve this answer
2
  • When I finally save the form, the fields are all properly assigned, but when the onChange action fires, and I evaluate Country__C - it hasn't ("yet") received a value, is this because the onChange doesn't prompt a full round trip to the server?
    – Simon Lawrence
    Oct 26, 2012 at 9:32
  • 1
    Correct - onChange just says 'execute this bit of JavaScript', and if that doesn't itself hit the server, them the server will remain unhit.
    – metadaddy
    Oct 30, 2012 at 7:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .