Close the popup window without reload the whole page

Question

I have a pop-up window (div) displayed when I click on outPutLink by calling a javascript function

<apex:outputLink value="javascript:pop();" id="pl" disabled="false">pop</apex:outputLink>

when the div appears, it is includes a commandButton that close the popup div using javascript function too.

<apex:commandButton id="plClose" value="Close" onclick="javascript:hidePop();" />

but when I click on close, the whole page reloaded.

this is the js block

  <script>
  var $j = jQuery.noConflict();
  $j(document).ready(function(){

  });

  function hidePop(){
    $j('.pop-form').fadeOut("slow");
  }

  function pop(){
    $j(".pop-form").toggle();
  }

Answer 1

apex:commandButton calls server even if action is not specified. In that case properties bound to form fields are updated in the controller, what may involve changes in the page content. As an example consider the below page bound to the standard Account controller:

<apex:page standardController="Account">
    The chosen name is: {!Account.Name}
    <apex:form>
        <apex:inputField value="{!Account.Name}"/>
        <apex:commandButton value=" Update the page " />
    </apex:form>
</apex:page>

Although no custom controller methods are defined or bound to the button, pressing it reloads the page, what in turn causes the message at the top to be updated.

To prevent the standard action, you can return false in the onclick action or call event.preventDefault(). For more details see the related question on Stackoverflow.