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

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.