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> 
  • Very hard to help without the code. Please post your code. – Chris Duncombe Oct 24 '13 at 11:27
  • Some code added. – Rui Rocha Oct 24 '13 at 11:38
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>
  • Wow man, thanks it works now! I was starting to panic about this, thank you very much! – Rui Rocha Oct 24 '13 at 12:47
  • @RuiRocha You are welcome! – Sergej Utko Oct 24 '13 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 '14 at 22:43
  • @kbentsen You are welcome! – Sergej Utko Feb 13 '14 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.