apex:outputpanel onclick not click-able?

Question

Background

1) User enters in data

2) Presses a button (command link styled as a button) which does an upsert to the database.

I would like to mimic the native lightning green bar that displays on success.

What I have

1) The button to upload the data

<apex:commandLink action="{!updateInfo}" value="Save" styleClass="slds-button slds-button--neutral slds-float--left "reRender="outerPanel"/>

2) The following method on the controller

public void updateInfo(){
    try {
        update info;
        uploadStatus = True;
    } catch (Exception ex){
        uploadStatus = False;
        errMessage = ex.getMessage();
        System.debug('Error message' + ex);
    }
}

3) The following outputpanel that is rerendered on click of the button from 1.

<apex:actionFunction name="rerenderTopPanel" rerender="outerPanel"/>
<apex:outputPanel id='outerPanel' onclick="resetPanel">
    <apex:outputPanel style="background-color:green;width:100%;padding:10px;" rendered="{!uploadStatus}" onclick="resetPanel">Upload Successful!</apex:outputPanel>
</apex:outputPanel>

4) and the following javascript

<script>
    function resetPanel(){
            uploadStatus = false;
            rerenderTopPanel();
   }
</script>

Problem

Even though I have an onclick on both the outerPanel and the thing nested inside it on 4, I can't seem to click on it to reset the value to false. Can anyone help?

Answer 1

I have used and refactored your code to make it workable. Rather than javascript function to call, here calling the controller method via actionSupport and it works perfectly.

Controller

public class OutputController
{
    public Boolean uploadStatus {get;set;}
    public void updateInfo(){
        try {
            uploadStatus = True;
        } catch (Exception ex){
            uploadStatus = False;            
            System.debug('Error message' + ex.getMessage());
        }
    }

    public void resetStatus()
    {
        uploadStatus = false;
    }
}

Visualforce

<apex:page controller="OutputController">
    <apex:form>
        <apex:commandLink action="{!updateInfo}" value="Save" 
        reRender="outerPanel" styleClass="slds-button slds-button--neutral slds-float--left "/>

        <apex:outputPanel id="outerPanel">          
            <apex:outputPanel rendered="{!uploadStatus}" style="background-color:green;width:100%;padding:10px;">
                <apex:outputText value="Upload Successful-{!uploadStatus}" />
                <apex:actionSupport event="onclick" action="{!resetStatus}"  rerender="outerPanel" />
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:form>    
</apex:page>

This code is fully complied and you can add additional functionality based on your need, like update info; inside updateInfo() method.