h:commandButton is not invoking bean method

Question

I am trying to do some work when the h:commandButton is clicked. I am using jsf 2.2 as I am sending multipart data. I have 3 commandButtons in my form, The first 2 are working fine whereas the 3rd commandButton is not working.

This is my jsf page code:

 <h:form id="userSetup" enctype="multipart/form-data" >

                    <div style=" margin-left: 250px; padding-top: 10px;width: 150px;margin-top: 100px;">
                        <img id="profile-picture" src="http://www.aspirehire.co.uk/aspirehire-co-uk/_img/profile.svg" height="120"  width="120"></img>
                        <button  onclick="addProfilePicture();return false;" class="cff-button"  style="margin-top: 10px;margin-left: -10px;white-space: normal;width: 150px;">Add Profile Picture</button>
                    </div>


                    <br/><br/>
                    <h:inputFile   id="profilePicture"  value="#{uploader.profilePicture}" a:hidden="true" onchange="displayImage(this)">
                        <f:validator validatorId="imageValidator"></f:validator>
                    </h:inputFile>

                 <div class="user-input-div">
                    <h:messages id="response-message" style="color: red"></h:messages>

                    <h:inputText id="skills" a:placeholder="Skills" class="cff-inputText " ></h:inputText>
                <br/><br/>
                <button class="cff-button " style=" white-space: normal"  onclick="toggleCertificateInput('#{certificateInput.clientId}',true);return false">Add Certificate</button>
                <br/><br/>

                <h:panelGroup id="certificate-input"  layout="block" binding="#{certificateInput}" a:hidden="true" >
                    <h:inputText id="certificateName" value="#{uploader.certificateName}" class="cff-inputText" a:required="true" a:placeholder="Certificate Name" binding="#{certificateName}">
                        <f:validator validatorId="stringValidator"></f:validator>
                    </h:inputText>
                    <h:inputText id="certificateLink" value="#{uploader.certificateLink}" class="cff-inputText" a:placeholder="Link" binding="#{certificateLink}">
                        <f:validator validatorId="urlValidator"></f:validator>
                    </h:inputText>
                    <h:commandButton value="Save Certificate" class="cff-button" action="#{uploader.saveCertificate()}" >
                        <f:ajax  execute="certificateName certificateLink response-message"  onevent="function hide(data){ if(data.status === 'success'){ toggleCertificateInput('#{certificateInput.clientId}',false) }  }"  render="userSetup:certificate-output certificateName certificateLink response-message"></f:ajax>
                    </h:commandButton>
                    <button class="cff-button" onclick="toggleCertificateInput('#{certificateInput.clientId}',false);return false">Cancel</button>
                </h:panelGroup>


                <h:panelGroup id="certificate-output-div" binding="#{certificateOutput}">
                 <h:dataTable  var="certificate" id="certificate-output" value="#{uploader.certificates}">
                    <h:column>
                        <h:outputText id="certificate-output-name" value="#{certificate.certificateName}    " class="certificate-name"></h:outputText>
                        <h:outputLink  id="certificate-output-link"  class="cff-link" value="         #{certificate.link}">view certificate</h:outputLink>
                        <span id="remove" onclick="removeCertificate('#{removeCertificate.clientId}');" class="remove">           &times;</span>
                        <h:commandButton  a:hidden="true" binding="#{removeCertificate}" id="removeCertificate" action="#{uploader.removeCertificate(certificate)}" value="Remove" class="cff-button" >
                            <f:ajax execute=" certificate-output  certificate-output-link certificate-output-name " render="userSetup:certificate-output response-message"></f:ajax>
                        </h:commandButton>
                    </h:column>
                </h:dataTable>
                </h:panelGroup>


                //This command button is not working
                <h:commandButton  class="cff-button" action="#{uploader.saveAndContinue()}" value="Save and Continue">
                    <f:ajax execute="@form"></f:ajax>
                </h:commandButton>
                    </div>  



            </h:form>

This is my model code:

    @ManagedBean(name="uploader")
@ViewScoped
public class userDataUploader {

   private String about_Yourself;
   private String skills;
   private List<Certificates> certificates;
   private Part profilePicture;
   private String certificateName;
   private String certificateLink;
   @ManagedProperty(value="#{userData}")
   private User userData;


   @PostConstruct
   public void init(){

       certificates =  new ArrayList<Certificates>();
   }

    public List<Certificates> getCertificates() {
        return certificates;
    }

    public void setCertificates(List<Certificates> certificates) {
        this.certificates = certificates;
    }



    public Part getProfilePicture() {
        return profilePicture;
    }

    public void setProfilePicture(Part profilePicture) {
        this.profilePicture = profilePicture;
    }

    public String getAbout_Yourself() {
        return about_Yourself;
    }

    public void setAbout_Yourself(String about_Yourself) {
        this.about_Yourself = about_Yourself;
    }

    public String getSkills() {
        return skills;
    }

    public void setSkills(String skills) {
        this.skills = skills;
    }

    public User getUserData() {
        return userData;
    }

    public void setUserData(User userData) {
        this.userData = userData;
    }

    public String getCertificateName() {
        return certificateName;
    }

    public void setCertificateName(String certificateName) {
        this.certificateName = certificateName;
    }

    public String getCertificateLink() {
        return certificateLink;
    }

    public void setCertificateLink(String certificateLink) {
        this.certificateLink = certificateLink;
    }

    public void addCertificate(){
        out.println("about to add new Certificate");

    }

    public void removeCertificate(Certificates certificate){
        out.println("about to remove certificate  " + certificate.getCertificateName() + "  "  + certificate.getLink() );
        certificates.remove(certificate);
        out.println(certificates.isEmpty());
    }



    public void saveCertificate(){


        Certificates certificate = new Certificates();
        certificate.setCertificateName(certificateName);
        out.println(certificateName + "\n" + certificateLink);
        certificate.setLink(certificateLink);
        certificates.add(certificate);
        out.println("new certificate has been added");
        certificateName = null;
        certificateLink = null;

        out.println(certificates.isEmpty());
    }

    public String saveAndContinue(){

        out.println("welcome to save and continue function");
        out.println(skills);
        boolean result = true;
        Uploader uploader = new Uploader(userData,certificates,getSkillsArray(),profilePicture);
        String returnString = "success";

        out.println("about to save all data");


        try {
           uploader.saveAllData();
        } catch (Exception ex) {
           out.println(ex);
           result = false;
        }

        if(!result){
            returnString = "false";
        }

       out.println("return string is "  + returnString);

        return returnString;
    }

   private String[] getSkillsArray(){
       return skills.split(" ");
   }




}

Can somebody please tell me where I am going wrong? ThankYou.