Erro ao Executar pela Segunda o JavaScript

[Neader 0]

Olá pessoal,

 

to com um problema aqui, vou tentar descreve-lo da forma mais clara:

 

É o seguinte:

 

eu uso um javascript para abrir uma pagina JSP dentro de uma div, até ai tudo bem, funciona tudo beleza, essa página que é aberta dentro da div possui um botão que serve para abrir outra página JSP no lugar da que estava antes, e está outra que abriu possui o mesmo botão para abrir outra página JSP no lugar da anterior, e assim por diante.

 

É como se fosse uma tela de instação de um programa, onde tu preenche os campos, da um "Next" e vai para o próximo passo. O primeiro passo da tudo certo, quando clico para ir pro segundo passo não carrega a pagina dentro da div.

 

o javascript que uso é o seguinte:

 

function f_ajx(){
       var url = id('form_ajax').action;
       alert(url);
       xmlHttp.open("POST", url, true);
       xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

       var dados = form2Qs('form_ajax')+form3Qs('form_ajax')+form4Qs('form_ajax')+form5Qs('form_ajax')+form6Qs('form_ajax')+'&cadastrar=acao';

       xmlHttp.send(dados);

       xmlHttp.onreadystatechange = function(){
               id("conteudo").innerHTML = xmlHttp.responseText;
       }

}

function form2Qs(form_ajax){
       var form = document.getElementById(form_ajax);
       var inputs = form.getElementsByTagName('input');

       var dados = '';
       for( var i=0; i<inputs.length; i++ ){
               dados += inputs[i].name+'='+inputs[i].value+'&';
       }

       //alert(dados);

       return dados;

}

// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <TEXTAREAs> DOS FORMULÁRIOS
function form3Qs(form_ajax){
       var form = document.getElementById(form_ajax);
       var textareas = form.getElementsByTagName('textarea');

       var dados = '';
       for( var i=0; i<textareas.length; i++ ){
               dados += textareas[i].name+'='+textareas[i].value+'&';
       }

       return dados;
}

// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <SELECTs> DOS FORMULÁRIOS
function form4Qs(form_ajax){
       var form = document.getElementById(form_ajax);
       var selects = form.getElementsByTagName('select');

       var dados = '';
       for( var i=0; i<selects.length; i++ ){
               dados += selects[i].name+'='+selects[i].value+'&';
       }

       return dados;

}

function form5Qs(form_ajax){
       var form = document.getElementById(form_ajax);
       var files = form.getElementsByTagName('file');

       var dados = '';
       for( var i=0; files.length; i++ ){
               dados += files[i].name+'='+files[i].value+'&';
       }

}

function form6Qs(form_ajax){
       var form = document.getElementById(form_ajax);
       var hiddens = form.getElementsByTagName('hidden');

       var dados = '';
       for( var i=0; hiddens.length; i++ ){
               dados += hiddens[i].name+'='+hiddens[i].value+'&';
       }

       return dados;
}

 

Alguém sabe o porque ocorre o erro na segunda vez?

[William Bruno 1501]

javascript carregado com ajax não funciona.

 

e você precisa atrelar o evento novamente assim que receber o novo DOM.

poste um link para testarmos o fluxo que você descreveu.

[Neader 0]

javascript carregado com ajax não funciona.

 

e você precisa atrelar o evento novamente assim que receber o novo DOM.

poste um link para testarmos o fluxo que você descreveu.

 

 

Desculpe mas sou iniciante com JS e AJAX e não entendi algumas coisas que você falou, o que é um "novo DOM" e que link que devo postar para testarmos o fluxo que eu criei?

 

obrigado pela atenção

[William Bruno 1501]

O link do teu site no ar.. com os scripts rodando..

 

'o novo DOM', seria a marcação HTML que você insere com javascript na página, como resposta do ajax.

[Jhony ZaM 1]

Na verdade funciona sim...

Porem vamos as diferencas...

O ajax serve quando queremos executar alguma funcao, ou algo do tipo sem executar a pagina, isso gera um tempo mesmo que pequeno fas com com que o JS se perc e execute antes do AJAX...

Passei por iss no meu sistema novo com Ajax.

A unica forma de fazer um entrelaçamento de funcoes JS com Ajax é n termino d euma funcao chamar a outra ex:

 

function ajax(){

//no fim da funcao tratar por exemplo
if(responseText == '1')
{
	executa a funcao.
}
}

 

No meu caso nao foi bem isso...

Um aoutra alternativa eh passar o nome da funcao que voce quer executar como parametro...

 

Pode ser meio confuso amigo, mais tem sim como faser.

 

Qualquer coisa posta ai

[William Bruno 1501]

Na verdade funciona sim...

eu me referi a tags <script>s carregadas com ajax.

sei que existem formas de forçar, mas o ponto em que me apoio, é que o responseText é apenas um texto puro.

tags script, não são interpretadas como codigo, apenas como texto.. por isso que as pessoas que trazem scripts com ajax, sofrem problemas.

 

vamos aguardar uma resposta do autor para saber para onde devemos ir :lol:

[Jhony ZaM 1]

Sim isso sim o response text apenas retorna textos, axo que interpretei errado...

POrem esperamos mais detalhes do autor do topico para tentar ajuda-lo vlw.

[Neader 0]

O link do teu site no ar.. com os scripts rodando..

 

'o novo DOM', seria a marcação HTML que você insere com javascript na página, como resposta do ajax.

 

o site ainda nao está no ar, ta localhost ainda...

 

vo tentar me explicar melhor pra ajudar vcs e vcs me ajudarem.

 

Eu tenho pagina JSP chamada tela_serviços que possui o form:

 

<form  action="tela_servicos.jsp" id="form_ajax3" method="post">
<fieldset>

 <legend align="center">Serviços</legend>
 <label for="slc_animal">Selecionar Animal.:</label>
     <label id="slc">
         <select  onchange="f_ajx()" name="slc_animal" id="slc_animal">
         <option value="">-</option>

         <%
           ctrlAnimais ani = new ctrlAnimais();
           ResultSet rsAni = ani.getAnimal().buscaAllInfo();
           while(rsAni.next())
               {
      %>

       <option value="<%=rsAni.getString("codigo")%>"><%=rsAni.getString("nome_animal")%></option>
     <% } %>

                 </select>
     </label>
     <br />   

 </fieldset>  

 

até aqui tudo bem, seleciono o animal que desejo, uso o AJAX para levar as informações para a próxima pagina, e abre a página certinho dentro da div.

Ai essa pagina que acabou de ser carregada contém o seguinte form:

 

<form  action="cad_obs.jsp" id="form_ajax" method="post">
<fieldset>

 <legend align="center">Observação do Cio</legend>

   <label for="tf_data">Data.:    </label>
   <input name="tf_data" type="text" id="tf_data" size="11" maxlength="11" />
   <br />

   <label for="tf_hora">Hora.:</label>
   <input name="tf_hora" type="text" id="tf_hora" size="11" maxlength="11" />
   <br />

  <input class="formulario" onclick="f_ajx()" type="button" value="Cadastrar" />
   <input align="right" type="reset" name="Limpar" id="Limpar" value="Cancelar" />


 </fieldset>
</form>

 

aqui é que acontece o erro, pois a página cad_obs.jsp não e carregada.

Ou seja, a primeira vez uso a função "f_ajx()", ela funciona, mas na segunda vez não.

[William Bruno 1501]

eu dei a resposta aqui:

você precisa atrelar o evento novamente assim que receber o novo DOM.

 

 

na forma preguiçosa, coloque um:

<form  action="cad_obs.jsp" id="form_ajax" method="post" onsubmit="tal();">

inline, direto na tag.

[Neader 0]

o que seria esse "tal();"?

[William Bruno 1501]

use o Responder Azul

ou a 'Resposta Rápida'.

 

seria a tua função que faz a requisição ajax.

 

coloquei um nome aleatorio, faça os ajustes e adaptações necessárias.

[Neader 0]

fiz a alteração se você falou e continua nao funcionando, o form ficou assim

 

<form  action="cad_obs.jsp" id="form_ajax" method="post" onsubmit="f_ajx();">
<fieldset>

 <legend align="center">Observação do Cio</legend>

   <label for="tf_data">Data.:    </label>
   <input name="tf_data" type="text" id="tf_data" size="11" maxlength="11" />
   <br />

   <label for="tf_hora">Hora.:</label>
   <input name="tf_hora" type="text" id="tf_hora" size="11" maxlength="11" />
   <br />

   <input class="formulario" onclick="f_ajx();"  type="button" value="Cadastrar" />
   <input align="right" type="reset" name="Limpar" id="Limpar" value="Cancelar" />

[William Bruno 1501]

não basta 'fazer oque eu falo'

 

você precisa entender oq acontece, e ajustar o script.

 

function f_ajx(){
       var url = id('form_ajax').action;

você deveria ter trocado por:

function f_ajx( form ){
       var url = form.action;

 

e então:

<form  action="cad_obs.jsp" id="form_ajax" method="post" onsubmit="f_ajx( this );">

 

não vou te dar a solução pronta, queria te ajudar a chegar lá.. mas fica dificil se você apenas fizer oque eu mandar, sem entender o motivo das coisas.

 

 

dica: mais ajustes precisam ser feitos nas funçõs form2Qs()..

[Neader 0]

Então amigo, logo depois que vi o seu post, eu fiz isso ai que você falou, modifiquei sim o JS e coloquei o "this" na função, mas não tive certeza se era isso realmente o que deveria ser feito e não quis prosseguir sem ter certeza, por isso postei novamente só para confirmar.

 

Bom, dito isso e feitas algumas alterações, sinto que estou chegando próximo a solução, o que esta acontecendo agora é que a página não é aberta dentro da div, ela está abrindo porém em todo na browser.

 

veja as modificações:

 

tela_serviços

 

<form  action="teste_inse.jsp" id="form_ajax" method="post">
<fieldset>

 <legend align="center">Serviços</legend>
 <label for="slc_animal">Selecionar Animal.:</label>
     <label id="slc">
         <select  onchange="f_ajx('form_ajax')" name="slc_animal" id="slc_animal">
         <option value="">-</option>

         <%
           ctrlAnimais ani = new ctrlAnimais();
           ResultSet rsAni = ani.getAnimal().buscaAllInfo();
           while(rsAni.next())
               {
      %>

       <option value="<%=rsAni.getString("codigo")%>"><%=rsAni.getString("nome_animal")%></option>
     <% } %>

                 </select>
     </label>
     <br />   

 </fieldset>   
</form>

 

teste_inse

 

<form  action="cad_obs.jsp" id="form_ajax" method="post" onsubmit="f_ajx('form_ajax');">
<fieldset>

 <legend align="center">Observação do Cio</legend>

   <label for="tf_data">Data.:    </label>
   <input name="tf_data" type="text" id="tf_data" size="11" maxlength="11" />
   <br />

   <label for="tf_hora">Hora.:</label>
   <input name="tf_hora" type="text" id="tf_hora" size="11" maxlength="11" />
   <br />

  <input class="formulario" type="submit" value="Cadastrar" />
   <input align="right" type="reset" name="Limpar" id="Limpar" value="Cancelar" />


 </fieldset>
</form>

 

ajax

 

function f_ajx(form){
       alert("FORM="+form);
       var url = id(form).action;
       alert("URL"+url);
       xmlHttp.open("POST", url, true);
       xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');


       var dados = form2Qs(form)+form3Qs(form)+form4Qs(form)+form5Qs(form)+form6Qs(form)+'&acao=acao';


       alert(dados);

       xmlHttp.send(dados);
       xmlHttp.onreadystatechange = function(){
               id("conteudo").innerHTML = xmlHttp.responseText;
       }

}

function id(el){
       alert("id = "+el);
       return document.getElementById(el);


}

 

nos "f_ajx('form_ajax')" eu coloquei 'form_ajax' pq com o "this", nao tava dando.

 

E acredite, realmente nao quero solução pronto, quero entender tudo q você fala pra eu fazer. Estou fazendo varios teste para ver se consigo resolver sozinho, mas tenho pouco conhecimento e as vzs preciso que alguem me aponte o caminha. E desculpe encomodar tanto.

[William Bruno 1501]

legal, então você esta indo bem.

 

no final da function f_ajax(), adicione um return false;

 

        xmlHttp.onreadystatechange = function(){
               id("conteudo").innerHTML = xmlHttp.responseText;
       }
      return false;
}

[Neader 0]

alteração feita, continua não carregando a página dentro da div. =[

[William Bruno 1501]

Tem algum outro erro.. Ctrl+Shif+J no Firefox mostra alguma coisa ?

 

 

os alerts que você colocou dentro da função, são executados na segunda chamada ?

 

 

link referencia:

http://www.wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

[Neader 0]

sim, todos eles são executados.

 

CTRL+SHITF+J mostra:

 

form is null

http://localhost:8084/GD_Rural/scripts/ajax_7.js

 

quando clico ai ele mostra:

 

var inputs = form.getElementsByTagName('input');

[William Bruno 1501]

legal, aqui:

        var dados = form2Qs(form)+form3Qs(form)+form4Qs(form)+form5Qs(form)+form6Qs(form)+'&acao=acao';

 

deixe assim:

 

 

var obj_form = id( form );
var dados = form2Qs( obj_form )+form3Qs( obj_form )+form4Qs( obj_form )+form5Qs( obj_form )+form6Qs( obj_form )+'&acao=acao';

[Neader 0]

alterei e agora não nao funcionou nem a primeira vez que chamo o f_ajax('form_ajax'), antes a primeira funcionava, dava pau na segunda. Mas o alerts seguem funcionando.

 

do jeito que tava o ultimo alert antes de abrir a pagina era:

 

id = conteudo DC[object HTMLDivElement]

 

alterando ficou:

 

id = form_ajax DC[object HTMLFormElement]

 

alert mostrado por:

 

function id(el){
       var dc=document.getElementById(el);
       alert("id = "+el+" DC"+dc);
       return dc;
}

 

 

CTRL+SHIFT+J continua acusando o mesmo erro.