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 '14 at 12:16
  • do you see JS any error in IE, Safari or Chrome? Aug 28 '14 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 '14 at 12:19
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 '14 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 '14 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 '14 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 '14 at 12:56
  • I tried your code as it is and it doens't work ! I don't know why !
    – SF_user
    Aug 28 '14 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 '14 at 12:51

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.