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
san5augsan5aug 

outputPanel is rendering, but its content is not visible.

Hi,

I am trying to include one js file dynamically in component. For this I have created a boolean property .I am setting its value through commandbutton. But its not working. Please help.
Component Code
<apex:outputPanel id="jQueryPanel">
<apex:outputPanel rendered="{!includejQuery}" >

    <apex:includeScript value="https://code.jquery.com/jquery-1.10.2.min.js" />
        <script type="text/javascript">
    		alert('{!includejQuery}');
    	</script> 
    </apex:outputPanel>
</apex:outputPanel>

<apex:commandButton status="statusProcess"  value="New" action="{!showPopup}" rerender="jQueryPanel" />

Controller Code

public boolean includejQuery {get;set;}

 public void showPopup(){
    	includejQuery = true;
    
	}
	
	public void closePopup() {         
        includejQuery = false;
    }

I am getting alert 'true" after clicking command button. But there is no scipt included. When I search HTML source of this page it shows blank jQueryPanel as below. I am wondering from where this alert is comming if there is nothing in source.

Page Source. 
<span id="MirHome:form1:j_id358:j_id391:2:j_id393"><span id="MirHome:form1:j_id358:j_id391:2:j_id393:j_id394:jQueryPanel"></span>

Ankit AroraAnkit Arora
Make that boolean property false by default and then try, am in a doubt that JS loads with the page load and you've to reRender them to get the refreshed values. It will not solve your problem but still will give a push. Let me know.
Grazitti TeamGrazitti Team
Hi,

We have implemented your code in our developer box  and have not find any issue in it.

The jquery is rerendering properly on button click.  Please see screen shot below.

User-added image


Please mark as best answer if it solves your problem.

Regards,
Grazitti Team,
www.grazitti.com
san5augsan5aug
Grazitti Team: you are right. I can see this file in my developer console. 

I want to include a js file dynamically. When I add this file statically as below, things are working fine.
<apex:outputPanel id="jQueryPanel">
    <apex:includeScript value="https://code.jquery.com/jquery-1.10.2.min.js" />
<apex:outputPanel rendered="{!includejQuery}" >
        <script type="text/javascript">
    		alert('{!includejQuery}');
    	</script> 
    </apex:outputPanel>
</apex:outputPanel>

but when I try to add this file dynamically as below, things are not working.
<apex:outputPanel id="jQueryPanel">

<apex:outputPanel rendered="{!includejQuery}" >
         <apex:includeScript value="https://code.jquery.com/jquery-1.10.2.min.js" />
        <script type="text/javascript">
    		alert('{!includejQuery}');
    	</script> 
    </apex:outputPanel>
</apex:outputPanel>

Please help.