2nd form doesnt work after ajax call in the first form

Question

I have a have a problem with actionlistener and action. The page takes some data (form 1), looks in the database and retrieve a list (for the datatable). But the 2nd form does not work. It just refresh the web. Here is my first attempt.

    <h:form id="form-fecha-inicio" class="form-inline">

        <!-- some columns -->
        <h:commandButton id="btnBuscarProyectos" class="btn btn-primary"
                         action="#{backing.buscarProyectos()}" 
                         value="Buscar">
            <f:ajax execute="fechaInicio fechaFin nombreCliente" render="tablaProyectos" 
                    onevent="darFormatoTabla"/>
        </h:commandButton>
    </h:form>

    <h:dataTable id="tablaProyectos" var="proyecto" value="#{backing.listaProyectos}"
                 styleClass="table table-striped table-bordered table-hover">
        <!-- some columns -->

        <h:column>
            <h:form> <!-- this form doesn't work -->
                <h:commandButton id="bModificar" class="btn btn-default btn-group-sm"
                                 value="#{rCProyecto['ver.proyectos.modificar']}" 
                                 action="#{backing.modificarProyecto(proyecto)}"/>
                <h:commandButton id="bPDF" class="btn btn-default btn-group-sm"
                                 value="#{rCProyecto['ver.proyectos.pdf']}"
                                 actionListener="#{backing.verPDF(proyecto)}"/>                    
                <h:commandButton id="bDOC" class="btn btn-default btn-group-sm"
                                 value="#{rCProyecto['ver.proyectos.doc']}"
                                 actionListener="#{backing.verDOC(proyecto)}"
                                 rendered="#{backing.administrador}"/>
            </h:form>
        </h:column>

    </h:dataTable>

As it didn't work, I have tried other things. I have removed the ajax and the action, put an actionlistener and surprisingly for me it works! But I don't know why...

 <h:form id="form-fecha-inicio" class="form-inline">

        <!-- some columns -->
        <h:commandButton id="btnBuscarProyectos" class="btn btn-primary"
                         actionListener="#{backing.buscarProyectos()}" 
                         value="Buscar">

        </h:commandButton>
    </h:form>

    <h:dataTable id="tablaProyectos" var="proyecto" value="#{backing.listaProyectos}"
                 styleClass="table table-striped table-bordered table-hover">
        <!-- some columns -->

        <h:column>
            <h:form>
                <h:commandButton id="bModificar" class="btn btn-default btn-group-sm"
                                 value="#{rCProyecto['ver.proyectos.modificar']}" 
                                 action="#{backing.modificarProyecto(proyecto)}"/>
                <h:commandButton id="bPDF" class="btn btn-default btn-group-sm"
                                 value="#{rCProyecto['ver.proyectos.pdf']}"
                                 actionListener="#{backing.verPDF(proyecto)}"/>                    
                <h:commandButton id="bDOC" class="btn btn-default btn-group-sm"
                                 value="#{rCProyecto['ver.proyectos.doc']}"
                                 actionListener="#{backing.verDOC(proyecto)}"
                                 rendered="#{backing.administrador}"/>
            </h:form>
        </h:column>

    </h:dataTable>

The only problem with this final attempt is that I'm not calling to the js function "darFormatoTabla". Why doesn't the first attemp work? Is the second attemp a good approach? If this is the case, how can I do to call the js function "darFormatoTabla()". I use it to call DataTable jQuery plugin. Thank you.

UPDATE: I'm not sure if my problem is the same as BalusC states but I could fix it without the js script that fixes the bug of mojarra. Anyway, thank you for proposing that answer BalusC, I didn't know that bug exists. Here is what I did:

<h:form id="form-fecha-inicio" class="form-inline">

        <!-- some columns -->
        <h:commandButton id="btnBuscarProyectos" class="btn btn-primary"
                         action="#{backing.buscarProyectos()}" 
                         value="Buscar">
            <f:ajax execute="fechaInicio fechaFin nombreCliente" render="form-opciones-proyecto:tablaProyectos" 
                    onevent="darFormatoTabla"/>
        </h:commandButton>
    </h:form>

    <h:form id="form-opciones-proyecto">
        <h:dataTable id="tablaProyectos" var="proyecto" value="#{backing.listaProyectos}"
                     styleClass="table table-striped table-bordered table-hover tablaProyectos">
            <!-- some columns -->

            <h:column>
                <h:commandButton id="bModificar" class="btn btn-default btn-group-sm"
                                 value="#{rCProyecto['ver.proyectos.modificar']}" 
                                 action="#{backing.modificarProyecto(proyecto)}"/>
                <h:commandButton id="bPDF" class="btn btn-default btn-group-sm"
                                 value="#{rCProyecto['ver.proyectos.pdf']}"
                                 actionListener="#{backing.verPDF(proyecto)}"/>                    
                <h:commandButton id="bDOC" class="btn btn-default btn-group-sm"
                                 value="#{rCProyecto['ver.proyectos.doc']}"
                                 actionListener="#{backing.verDOC(proyecto)}"
                                 rendered="#{backing.administrador}"/>
            </h:column>

        </h:dataTable>
    </h:form>