How to access a Managedbean through an external js file?

Question

How do I access a Managed bean jsf through an external javascript file? I am trying to access it as follows:

  $("#botaoCadastroMaterial").click(function(){
   '#{cadastroMaterialController.salvar()}'; 
});

but it’s not working.

below follows my xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" 
    template="../template/template.xhtml">

    <ui:define name="corpoPagina">
        <div id="divCadastroMaterial">
        <h1 style="width:100%;text-align:center;">Cadastro de Material</h1>
            <h:form prependId="false" id="formularioCadastroMaterial">
                <h:outputLabel value="Titulo"/>
                <h:inputText class="form-control"/>
                <h:outputLabel value="Categoria"/>
                <h:inputText class="form-control"/> 
                <h:commandButton class="btn btn-primary" value="Cadastrar" id="botaoCadastroMaterial"/>
            </h:form>               
        </div>
    </ui:define>

</ui:composition>

I need a function to be executed in my js file when a boot is triggered in xhtml, which has as an implementation the call of a method of my Managed bean.

Answer 1

1. creates a button where the action is what you want

<h:commandButton action="#{cadastroMaterialController.salvar()}"/>

2. creates an id for that button

<h:commandButton id="botao_fantasma_para_chamar_via_js" action="#{cadastroMaterialController.salvar()}"/>

3. makes him invisible

<h:commandButton id="botao_fantasma_para_chamar_via_js" action="#{cadastroMaterialController.salvar()}" style="display: none" />

4. make the call of action by:

$("#botao_fantasma_para_chamar_via_js").click()