6

Another problem has come uppon me. I have a button which shows a form with a list of inputFields with a map as a value. Since I have to populate the Keys before I show the form, I was giving me an error saying such key didn't exist. I've changed the display:none I had to rendered={!state} whenever state is true the form pops up, nothing wrong here. The problem is all my jQuery stuff I have that was working with display:none now is gone! Is there any way to use jQuery in a rendered state form?

     <script type="text/javascript">
     var j$ = jQuery.noConflict();
     j$(document).ready(function() {
        j$("[class$=costType]").find('input').bind("change", function(event, ui) {
            if(j$(this).val()=='Value'){
                j$("[class$=typeA]").closest('tr').css('display','none');
                j$("[class$=typeB]").closest('tr').css('display','');
            }
            else{
                j$("[class$=typeA]").closest('tr').css('display','');
                j$("[class$=typeB]").closest('tr').css('display','none');
            }

        });
</script>
        <apex:outputPanel>
    <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!state}"/>
        <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!state}">
          <apex:pageBlock title="BlaBla">
           <apex:pageBlockSection title="General Information" columns="2">

                    <apex:selectRadio styleClass="someType" label=" " value="{!choice}">
                        <apex:selectOptions value="{!items}"/>
                    </apex:selectRadio>
                    <apex:inputField styleClass="typeA"  value="{!Value__c}"/>

                    <apex:inputField styleClass="typeA" value="{!Value__c}"/>

                    <apex:inputField styleClass="typeB" value="{!Value__c}"/>

           </apex:pageBlockSection>         
            </apex:pageBlock>                  
        </apex:outputPanel>
    </apex:outputPanel> 
2
  • Very hard to help without the code. Please post your code. Oct 24, 2013 at 11:27
  • Some code added.
    – Rui Rocha
    Oct 24, 2013 at 11:38

1 Answer 1

7

You can try to pack your jQuery code to the function and execute this function only if the panel is rendered:

<script>
function doStuff(){
    j$("[class$=costType]").find('input').bind("change", function(event, ui) {
        if(j$(this).val()=='Value'){
            j$("[class$=typeA]").closest('tr').css('display','none');
            j$("[class$=typeB]").closest('tr').css('display','');
        }
        else{
            j$("[class$=typeA]").closest('tr').css('display','');
            j$("[class$=typeB]").closest('tr').css('display','none');
        }
    });
}
</script>

<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!state}"/>
    ....
    <!-- put this definition to the end on the panel -->
    <script>
        doStuff();
    </script>
</apex:outputPanel>
4
  • Wow man, thanks it works now! I was starting to panic about this, thank you very much!
    – Rui Rocha
    Oct 24, 2013 at 12:47
  • @RuiRocha You are welcome! Oct 24, 2013 at 13:01
  • @mast0r Thanks, this helped me figure out why my jQuery behavior stopped working on an element after it has been refreshed via AJAX.. all I needed to do was wrap the jQuery definition in a Javascript function, then called said function within the element. Thanks again!
    – kbentsen
    Feb 12, 2014 at 22:43
  • @kbentsen You are welcome! Feb 13, 2014 at 7:16

You must log in to answer this question.

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