3

Situation

I have a simlpe visualforce page, where inside a pageblocksection i have put a html Button.

<apex:page controller="myTestPage" >
    <apex:form rendered="{!AND(NOT(isError))}" >
        <apex:pageBlock title="Inserisci i dettagli del documento">
        <button id="upload-button" >Upload</button>
        </apex:pageBlock>
    </apex:form>
</apex:page>

and the controller

public with sharing class myTestPage {
    public boolean isError{get;set;}
}

this is generating a refresh everytime that i click the button... and I dont understand why is happening this. Anyone can explain to me please?

This basic structure I have to use, with Jscript and AJAX, but the refresh of the page is blocking me on the work.

anyone has any idea to suggest me a reason and how to avoid this behaviour?

thanks in advance;

5

Here is a link that explains how html treats buttons and difference between <button> and <input type="button">

Form buttons created by <button> element are treated as form submitter so they refresh page. Browsers treat

<button id="upload-button" >Upload</button>

as

<button id="upload-button" type="submit" >Upload</button>

That means default value of type is treated as Submit if type is not specified. And Submit operation is expected to refresh page by its definition.

However below syntax can be used to tell browser explicitly that don't treat this button as submitter

<button id="upload-button" type="button" >Upload</button> 

You can use below code to resolve your problem:

<apex:page controller="myTestPage" >
    <apex:form rendered="{!AND(NOT(isError))}" >
        <apex:pageBlock title="Inserisci i dettagli del documento">
        <button id="upload-button" type="button" >Upload</button>
        </apex:pageBlock>
    </apex:form>
</apex:page>
  • thanks, for the input... i looked the link, and made me thought, what you said about... one of the parameters of the <button> is the Type, which has values (button,reset,submit) I found that if i set the Type="Button", the issue vanish, and there is no interference, is not generated any refresh. If you adapt your answere to this, i can accept it as solution. – Klodj_Meta Jun 9 '16 at 11:42
  • Improved answer to provide better explanation. – Mukesh Verma Jun 9 '16 at 11:54
0

What you're seeing it the normal behaviour of HTML. Ignoring Visualforce and just writing it in HTML, you'll get the same behaviour unless you use preventDefault() to stop the form submission:

<html>
<script>
    document.write("Rendered at " + new Date());
    function uploadButtonHandler(evt) {
        evt.preventDefault(); console.log('stopped reload');
    }
</script>
<form>
    <button id="upload-button" onclick="uploadButtonHandler(event)">Upload</button>
</form>
</html>
  • Thanks, @Aidan. What i seen was that when i used <apex:form> this behaviour came out. Looking on the infos gave me by "Mukesh Verma", i found that if i set the Type of the button as Button, it does not do any refresh. – Klodj_Meta Jun 9 '16 at 11:49

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.