function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lis WitalisLis Witalis 

jQuery doesn't work inside rendered outputpanel?

Here's my Visualforce page: 
<apex:page docType="html-5.0" sidebar="false" showHeader="false" standardStylesheets="false" controller="TestController">

    <apex:includeScript value="{! $Resource.jQuery }"/>

    <script type="text/javascript">
        jQuery.noConflict();

        jQuery(document).ready(function() {
            jQuery('[id$=polamonolaa]').bind( "click", function() {
              alert( "Test" );
            });
        })
    </script>

    <apex:form>
        <apex:commandLink action="{!showTest}" value="Show" reRender="panelTest"/>
        <br/>
        <apex:outputPanel id="panelTest">
            <apex:outputPanel id="panelTest2" rendered="{!showTestPanel2}">
                <apex:commandLink id="polamonolaa" reRender="panelTest" value="TOP"/>
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:form>
</apex:page>
Here's my controller: 
public class TestController {
    public Boolean showTestPanel2{get;set;}

    public TestController(){
        showTestPanel2 = false;
    }

    public void showTest(){
        showTestPanel2 = true;
    }
}

What I'm trying to do here is to show an alert on a button click. Unfortunately my script doesn't work when button is placed inside outputPanel id="panelTest2" which rendered attribute depends on showTestPanel2 variable. Any suggestions how to fix this issue? Moving my button outside inner panel is not an option.
Best Answer chosen by Lis Witalis
Rohit K SethiRohit K Sethi
Hi ,

You bind the Link event on page load, but the Link shown after the click, so we needed to bind the event when the element is shown.

User below code : 
function bindEvent(){
    jQuery('[id$=polamonolaa]').bind( "click", function() {
      alert( "Test" );
    });
}


<apex:form>
    <apex:commandLink action="{!showTest}" value="Show" reRender="panelTest" oncomplete="bindEvent();"/>
    <br/>
    <apex:outputPanel id="panelTest">
        <apex:outputPanel id="panelTest2" rendered="{!showTestPanel2}">
            <apex:commandLink id="polamonolaa" reRender="panelTest" value="TOP"/>
        </apex:outputPanel>
    </apex:outputPanel>
</apex:form>

Thanks.

All Answers

Rohit K SethiRohit K Sethi
Hi ,

You bind the Link event on page load, but the Link shown after the click, so we needed to bind the event when the element is shown.

User below code : 
function bindEvent(){
    jQuery('[id$=polamonolaa]').bind( "click", function() {
      alert( "Test" );
    });
}


<apex:form>
    <apex:commandLink action="{!showTest}" value="Show" reRender="panelTest" oncomplete="bindEvent();"/>
    <br/>
    <apex:outputPanel id="panelTest">
        <apex:outputPanel id="panelTest2" rendered="{!showTestPanel2}">
            <apex:commandLink id="polamonolaa" reRender="panelTest" value="TOP"/>
        </apex:outputPanel>
    </apex:outputPanel>
</apex:form>

Thanks.
This was selected as the best answer
Lis WitalisLis Witalis
Thank you so much! I would never thought about it.
Rohit K SethiRohit K Sethi
Pleasure of mine to tell u about it...
If you have any other problem, let me know.