Ajax with JSF gives "The requested content cannot be loaded." error

Question

I'm working on my Course Final Project and I'm using JSF with AJAX, but I'm having some errors.

Currently I'm using JSF 2.0 and Fancybox, a jQuery plugin. In a given page I have one dataTable that loads my content. Each row of this table have a link that will open a edit page for the clicked row. Note that in the fact any new page is opened, just a modal appears in screen.

If you don't know, this's a modal window

So, when user click in row the "edit page" will appears, but this will appears as modal (this's why I'm using Fancybox).

Following is my code to do this:

<h:dataTable id="minhaTabela" styleClass="table table-hover" var="disciplina" value="#{disciplinaMBean.listaDisciplinas}" selection="#{disciplinaMBean.disciplinaSelecionada}" selectionMode="single" >
    <h:column>
        <a class="various fancybox.ajax">
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{disciplina.nome}" />
        </a>
    </h:column>
</h:dataTable>

(...)

$(".various").fancybox({
    maxWidth    : 400,
    maxHeight   : 125,
    fitToView   : false,
    autoSize    : false,
    width       : 400,
    height      : 125,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    ajax : {
        type    : "POST",
        url     : "edit.xhtml",
        data    : { idDisciplina : '#{disciplinaMBean.disciplinaSelecionada.id}' }, 
        dataType: "html"                
    }
});

And my edit.xhtml (don't is dynamically yet, it's for test):

<form role="form">
    <div class="form-group">
        <label for="nome">Nome:</label>
        <input type="text" class="form-control adicionar" id="nome" />
        <br />
        <a type="button" href="#" id="excluir" class="btn btn-md btn-danger pull-left">Excluir</a>
            <a type="button" href="#" id="enviar" class="btn btn-lg btn-success pull-right">Salvar</a>
        <br />
    </div>
</form>

When I try to click in a row, the Fancybox open the modal, but I receive the following error:

My error when use ajax :(

If I delete Ajax in Fancybox...

(and add href="edit.xhtml" to my link)

<h:column>
    <a class="various fancybox.ajax" href="edit.xhtml">
         <f:facet name="header">Name</f:facet>
         <h:outputText value="#{disciplina.nome}" />
    </a>
</h:column>

(...)

$(".various").fancybox({
    maxWidth    : 400,
    maxHeight   : 125,
    fitToView   : false,
    autoSize    : false,
    width       : 400,
    height      : 125,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none'
});

This works, but how I can send the "disciplina" to edit page - summarizing, how I can edit "disciplina" by this way?

My page loads, but by this way how I can send informations to edit.xhtml process the informations? Taking the opportunity, it's a better way to do the same thing? I don't know if I'm doing the right way, because I didn't find any tutorial or question similar to this in Google.

Maybe this [link](http://stackoverflow.com/questions/9434558/how-to-open-modal-pop-up-in-jsf-2-using-jquery) can help you. BTW, is there an issue to use a JSF implementation like Primefaces? Take a look to their showcase [page](http://www.primefaces.org/showcase/ui/home.jsf) if you can. — danRod, Oct 24 '13 at 17:40
Yes, now I'm trying to use Primefaces, but I'm getting a lot of errors and I don't know why :/ — Paladini, Nov 01 '13 at 01:08

Ajax with JSF gives "The requested content cannot be loaded." error

If I delete Ajax in Fancybox...

0 Answers0