0

I'm using the code below :

<apex:outputPanel id="myID" style="display: none;">
...
</apex:outputPanel>

<apex:commandButton value="Display" onclick="display()"/>

<script type="text/javascript">
    function display() {
        document.getElementById('{!$Component.myID}').style.display = 'block';
    }
</script>

This code works fine with Firefox but not with IE, Safari or Chrome.

I found that Doctype may be the problem but I don't know how to solve this issue.

I tried to add doctype attribute on <apex:page> tag but it doesn't work.

3
  • 2
    How about quotes for the block? style.display = "block"; Aug 28, 2014 at 12:16
  • do you see JS any error in IE, Safari or Chrome? Aug 28, 2014 at 12:16
  • @mast0r : sorry it was a mistake, I use '. I updated my post. @AtulRajguru9 : nothing ! And if I manually set the display: 'block' in the console, my panel appears.
    – SF_user
    Aug 28, 2014 at 12:19

3 Answers 3

1

I think the solution is very easy: you need to "cancel" any further actions after clicking on the button. Just add return false after calling your function on the button:

<apex:commandButton value="Display" onclick="display(); return false;"/>

Without that the page will be reloaded after clicking on the button, because you dont have action parameter:

If an action isn't specified, the page simply refreshes.

Doc: Apex CommandButton Action parameter

2
  • I tried and my panel doesn't appear ! Thanks.
    – SF_user
    Aug 28, 2014 at 12:51
  • 1
    @SF_user For me works well in IE9. You may have some other elements on the page that are corrupt. Aug 28, 2014 at 13:22
1

If you are not having a rerender attribute in the commandbutton your whole page may be refreshing, causing you to not see the JavaScript update.

As a temporary fix try putting reRender="nothing" in your commandButton. Where 'nothing' is a non existent HTML id. You can change it to a valid id as well if you want to.

Below works fine on FF,Chrome and IE11

<apex:page >
<apex:outputPanel id="myID" style="display: none;">
Hello World
</apex:outputPanel>

<apex:form>
<apex:commandButton value="Button" onclick="display()" rerender="nothing"/>
</apex:form>
<script type="text/javascript">
    function display() {
        document.getElementById('{!$Component.myID}').style.display = 'block';
    }
</script>
</apex:page>
3
  • I tried and my panel doesn't appear ! Thanks.
    – SF_user
    Aug 28, 2014 at 12:52
  • 1
    What did you try? The above piece of code works exactly as it is. Try it separately by creating a new page.
    – AslamK
    Aug 28, 2014 at 12:56
  • I tried your code as it is and it doens't work ! I don't know why !
    – SF_user
    Aug 28, 2014 at 13:08
0

<apex:outputPanel>'s default behavior is to create a <span> in HTML. It could be you're having a problem by trying to make an inline component behave like a block. Depending on the content inside a <span> it can sometimes misbehave (like putting block elements inside of it).

If you change the your outputPanel to use layout="block", you will get a <div>, which might behave in a more friendly way when you go to modify the CSS dynamically.

So try it like this, instead:

<apex:outputPanel layout="block" id="myID" style="display: none;">
...
</apex:outputPanel>
1
  • I tried and it doesn't work ! Thanks.
    – SF_user
    Aug 28, 2014 at 12:51

You must log in to answer this question.

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