Apex Code Development You need to sign in to do that
Don't have an account?
Ozymandias Input fields in custom component with modal dialog doesn't bind to component controller
I've been trying to implement a custom component that makes use of the modal dialog described in this article. The modal dialog has input fields that are bound to the custom component controller. The component code kind've looks like this:
<apex:component controller="myCustomComponentController">
... YUI scripts...
<div id="searchDialog">
...
<apex:actionRegion>
...
<apex:inputText value="{!searchField1}"/>
<apex:inputText value="{!searchField2}"/>
<apex:inputText value="{!searchField3}"/>
<apex:commandButton value="Search" action="{!doSearch}" rerender="searchResults"/>
...
</apex:actionRegion>
</div>
</apex:component>
The issue I'm running into is that once I put the actionRegion in the modal dialog div, it doesn't seem to copy the values in the inputText fields to the controller when I click on the Search button. When I remove the modal dialog functionality (i.e. the search fields and buttons can be seen always), it works fine.
Does anyone have any idea why it behaves this way and if it is possible to fix it?
While I haven't use the YUI libraries specifically, I have used this technique many times in the past, particularly on pages to be used on mobile devices, and its always behaved correctly for me.
When you say that you remove the modal dialog functionality, does that mean that you push the input text elements back up into the visualforce page, or does the component markup change somehow?
Hi bob_buzzard,
Thanks for taking the time to look into this.
When I say "remove modal dialog functionality", I mean that I remove all javascript that makes the "searchDialog" div behave like a modal dialog. It just becomes a regular div that's always seen. The component markup remains the same and the input text fields are still bound to variables on the custom component controller.
To verify whether the modal dialog stuff was causing the problem, I stripped down the component so that the only thing it did was rerender an outputText element with the contents of the input text fields when the search button was clicked. When the javascripts using the YUI library were there, the outputText remained empty. When I removed it, the outputText would update to whatever was in the input text fields. I even tried switching to jQuery to implement the modal dialog, but it still behaved the same way.
Seeing as you were able to do it before without any issues, maybe it's just something simple that I just happened to overlook.
Just to update, I've implemented a simple modal dialog of my own using css and javascript to show and hide the div and it works. Apparently, something in the YUI and jQuery libraries are screwing things up, but I have no idea why since I'm not a javascript/ajax expert. Worst case, I'll just have to make do without the nifty features that the YUI dialog offers. However, if anyone knows of a library with modal dialogs that does work with custom components and controllers, I'd appreciate it you could let me know.
That was the conclusion I was coming to based on your previous post. In my case I've been using my own javascript rather than YUI/JQuery/DOJO etc. I guess it must interfere with the scripting that posts back the form.
I have used DOJO along with divs to popup/hide a confirmation/error layer, which didn't have any adverse effects. These weren't modal though.