Ajax + servlet trabalhar em div unica

6 respostas
dragunsky

Boa tarde pessoal, expus minha duvida em um outro mas recebi poucas informações e acho que aki posso explanar melhor minha duvida.
Tenho um template basico como o definido com div como abaixo:

Tenho uma jsp CadastrarUsuarios funcionando, com ajax consigo chamar essa jsp no Div conteudo… ateh aki ok…

O problema começa depois que eu preencho o formulário e o submeto… qdo é ativado o servlet exibe o resultado (Usuario “++” cadastrado com sucesso!) em uma nova pagina, porem, gostaria que os resultados fossem apresentados nesta mesma div conteudo (ou seja todos processos ocoreriam dentro dessa mesma div).

Me indicaram o uso do plugin ajaxForm do Jquery, funciona perfeitamente dentro de CadastraUsuarios.jsp, mas qdo essa jsp é carrega dentro da div conteudo o resultado do servlet correspondente aparece em uma nova pagina.
Desculpe se a pergunta ficar meio embaraçada mas eu tentei ser o mais claro possivel.

Desde já gostaria de agradecer a atenção.
Obrigado

6 Respostas

dragunsky

Pessoal desculpe se estou me precipitando em upar o topico, mas eu preciso muito de ajuda, estou com o projeto parado por conta disso…

Alguém pode me mostrar o caminho da luz??? rs

Obrigado!

R

Olá…

A div conteudo deve ser alimenta com o resultado, se o resultado é a pagina inteira vc deve pegar somente o conteudo da div conteudo do resultado…

dragunsky

rodrigo web:
Olá…

A div conteudo deve ser alimenta com o resultado, se o resultado é a pagina inteira vc deve pegar somente o conteudo da div conteudo do resultado…

Putx irmao… desculpe minha deficiencia de interpretação mas isso ficou mais parecendo um trava-linguas para mim…

bem… no exemplo que eu citei… chamo uma pagina CadastrarUsuario.jsp para a div conteudo atraves de um comando ajax… nesse CadastrarUsuario tenho um formulario… qdo eu submeto o mesmo ele me retorna o resultado em uma nova pagina… e nao na mesma div conteudo…

Como faço para direcionar o resultado do servlet que eu chamei para a div conteudo novamente sem a necessidade de refresh?

Obrigado pela atenção…

R

Se você estiver usando o jquery e o ajaxForm já não vai dar refresh, veja o exemplo do ajaxForm

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:        '#output2',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
 
    // bind to the form's submit event 
    $('#myForm2').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 
 
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    var queryString = $.param(formData); 
 
    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
 
    alert('About to submit: \n\n' + queryString); 
 
    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    return true; 
} 
 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
}

A linha 4 define qual elemento será atualizado com o resultado do submit, no seu caso a div conteudo

A linha 6 define a função de sucesso do submit do formulário

A linha 20 submete o formulário

A linha 23 envia as informações do formulario pelo ajax utilizando a url que contém na action do formulário

A linha 27 impede o submit normal do formulário ou seja sem o ajax

Se o resultado do submit é o conteúdo que deseja, então você deixa os parâmetros como estão
Se não retire a linha 4 e utilize a função da linha 49 definida na linha 6 para atualizar a div conteudo, a variável responseText contém o resultado do submit...

[]s...

dragunsky

opa… show de bola rodrigo vou tentar assimilar e aplicar o seu exemplo… assim que eu sanar minhas duvidas posto o resultado aki.

Obrigado

dragunsky

Acho que posso nao ter entendido a aplicação da função nao consegui fazer funcionar… talvez eu esteja me atrapalhando… pois bem…

Acredito que meu caso seja muito similar a este http://www.guj.com.br/java/256915-jsp--servlets … esta função se aplicaria para este caso tb?

target:        '#conteudo',

aki defino que a div #conteudo deve ser atualizada

$('#CadastraUsuarios').submit(function() {

defino formulario…

Tem mais alguma coisa para definir?

Enquanto eu fazia os testes surgiram algumas questoes das quais eu usarei para me aproveitar e abusar um poko mais da bondade de todos…explico

Ja tenho uma função de Login funcionando… a qual verifica o tipo de usuario e o direciona para a pagina de acordo com o tipo (funcionando)… na minha aplicação tem a pagina Administracao.jsp que possui esse formato que coloquei no primeiro post.
O fato de eu ter a pagina Administracao.jsp em um diretorio u[/u], e meus fomularios, no caso CadastraUsuarios.jsp em outro u[/u] vai influenciar no uso dessa função de atualização da div?

E finalmente, quando eu executo separadamente o form CadastraUsuarios.jsp tudo funciona normalmente (AlterarSenha, CadastrarUsuarios, DeletarUsuarios)… Porem qdo chamo o jsp dentro da div #conteudo que por sua vez esta na pagina Administracao.jsp apenas a função CadastrarUsuarios funcionas, as outra nao… Isso se dá pela diferença de diretorios onde cada pagina esta localizada?

Obrigado pessoal.

Criado 23 de novembro de 2011
Ultima resposta 24 de nov. de 2011
Respostas 6
Participantes 2