(Resolvido) Criando N inputs com AJAX

rutger2007 · Janeiro 25, 2008

AMIGOS... estou tentando algo bem besta em ajax, desde hj cedo, aqui um help caia bem!

tenho um campo INPUT ncat, aonde digitarei um numero n entre 0 e 9...

dinâmicamente, quero montar n inputs diferentes... servirá para alimentar um conjunto de categorias diferentes de elementos.. tipo: lápis, canetas, borrachas... o form vai enviar isto para um PHP processar... com base no numero esperava criar os elementos no div nmcat, e como sou novato em ajax, comecei tentando algo simples, CRIAR UM PARAGRAFO E INSERIR UM TEXTO... quebrei a cabeça e não consegui... não parece dificil e penso que estou escorregando em alguma besteira... abaixo o último código testado!

<html>
<head>
&lt;script type="text/javascript">
    function ncateg(){
        var ncats = document.getElementById("ncat").value;
        
        var DivCat = document.divNode("nmcat");
        pEl = document.createElement("p");    
        textNode = document.createTextNode("Preencha o campo abaixo com o nome de cada categoria");
        pEl.appendChild(textNode);
        divNode.appendChildNode(pEl);
            
        
        
    }
    </script>
</head>
<body>
<form name="form1" id="form1" method="post" action="proctab.php" >

<P>Informe o número de categorias.</p>

 <label for="numcat">Número de Categorias [até 9]</label>
    <fieldset id="numcat">
        <input name="ncat" type="text" class="required" id="ncat" size="5" maxlength="1" onblur="ncateg()"/>
    </fieldset>

<div id="nmcat"></div>

</form>
</body>
</html>

Allan Rodrigo · Janeiro 25, 2008

opa...

beleza ae??

cara, acho que encontrei alguns erros no seu código...segue:

var DivCat = document.divNode("nmcat");

document.divNode não existe, tenta trocar por document.getElementById("nmcat"); na linha:

divNode.appendChildNode(pEl);

altere divNode para a variável que recebe a div, que é a DivCat e o método appendChildNode não existe, altere para appendChild como na linha superior...

fica então DivCat.appendChild(pEl);

achoo q é isso...

flow, abraço

Editado Janeiro 25, 2008 por Allan Rodrigo

rutger2007 · Janeiro 28, 2008

opa...
beleza ae??
cara, acho que encontrei alguns erros no seu código...segue:
var DivCat = document.divNode("nmcat");
document.divNode não existe, tenta trocar por document.getElementById("nmcat"); na linha:
divNode.appendChildNode(pEl);
altere divNode para a variável que recebe a div, que é a DivCat e o método appendChildNode não existe, altere para appendChild como na linha superior... fica então DivCat.appendChild(pEl); achoo q é isso... flow, abraço

ALAN... eu já tinha escrito um enorme email depois de receber o seu e testado sem conseguir fazer funcionar... mas ai me bateu uma daquelas insPIRAÇÕES e eu fui chcar algumas coisas... PARENTESES, CHAVES, ASPAS SIMPLES E DUPLAS, ETC... ai consegui fazer funcionar... o erro estava em usar um par de CHAVES ao invés de PARENTESES, em um dos createElement... o codigo revisto ficou assim, com sua colaboração e com minha revisão... e funciona... OBRIGADO... você sabe que o que mais faz falta ao desenvolvedor independente são pessoas com quem trocar idéias... as vezes uma besteira trava um dia de trabalho!!! VALEU!!!

&lt;script type="text/javascript">
    function ncateg(){
        var ncats = document.getElementById('ncat').value;        
        
        var DivCat = document.getElementById('nmcat');
        var pEl = document.createElement('p');    
        var textNode = document.createTextNode('Preencha o campo abaixo com o nome de cada categoria');
        
        pEl.appendChild(textNode);
        
        DivCat.appendChild(pEl);
            
        
        
    }
    </script>

ASSIM FUNCIONOU.... WELLLL, TENTEI ENTÃO O PASSO SEGUINTE... CRIAR N PARAGRAFOS a partir de um n inserido no input ncat... pensei em dar um nome diferente a cada parágrafo, usando a própria variável de iteração i com pEl.idName = "parag"+i NÃO FUNCIONOU... ENTENDA que eu fui bem alem, já criei os label, fieldset e input elements, mas como não funcionou pra cria-los, então retornei a soluçaõ anterior tentando simplificar e resolver um pequeno problema de cada vez... de qualquer forma boto DEPOIS do código de testes, o código todo previsto... quem sabe eu estou fazendo outra asneira simples e não estou conseguindo ver!!!

CODIGO DE TESTES TENTANDO APENAS CRIAR N PARAGRAFOS...
<script type="text/javascript">
    function ncateg(){
        var ncats = document.getElementById('ncat').value;        
        
        var DivCat = document.getElementById('nmcat');        
        
        for (var i=0; i=ncats; i++)
        {
        var pEl = document.createElement('p');
        pEl.idName = "parag"+i;    
        var textNode = document.createTextNode('Preencha os campos abaixo com o nome de cada categoria');
        pEl.appendChild(textNode);    
        DivCat.appendChild(pEl);
        }
    }
    </script>

E AQUI TUDO O QUE QUERO FAZER.... CRIAR N INPUTS... ESTE EU PRETENDO QUE SEJA MEU RESULTADO FINAL...

<script type="text/javascript">
    function ncateg(){
        var ncats = document.getElementById('ncat').value;        
        
        var DivCat = document.getElementById('nmcat');        
        
        for (var i=0; i=ncats; i++){
        var lblEl = document.createElement('label');
            lblEl.htmlFor = "cats"+i;
            
        var fldEl = document.createElement('fieldset');
            fldEl.idName = "cats"+i;
            
        var inputEl = document.createElement('input');
            inputEl.id = "categ"+i;
            inputEl.type = "text";
            inputEl.name ="categ"+i;
            inputEl.size ="10";
            
        DivCat.appendChild(lblEl);
        DivCat.appendChild(fldEl);
        DivCat.appendChild(inputEl);
        
        
        
        
    }
    }
    </script>

Editado Janeiro 28, 2008 por rutger2007

rutger2007 · Janeiro 28, 2008

AMIGOS....

Nada como um "debate" virtual para ajudar nos nossos desenvolvimentos... graças ao "hipotética" discussão com Allan sobre o andamento deste exercicio terminei conseguindo o que queria...

deixo aqui o código para ajudar a quem tiver o mesmo probleminha... se alguém precisar do codigo todo, por favor peça... este post está ajustado para me enviar avisos caso receba algum pedido... este é apenas meu 3 script em javascript para obter um efeito ajax... ainda estou aprendendo o "idioma" js, apesar de haver usado uma coisa aqui e outra ali nos últimos 10 anos... qualquer duvida, tamos ai!

// IDENTIFICO O ELEMENTO DE SAÍDA
            var DivCat = document.getElementById('nmcat');
            clearDiv();
            
            //NOMINO CADA PARAGRAFO        
            var pEl = document.createElement('p');
            pEl.id = "parag";
            var textNode = document.createTextNode('Preencha os campos abaixo com o nome de cada categoria');
            pEl.appendChild(textNode);
            DivCat.appendChild(pEl);
                
            var lblEl = document.createElement('label');
                var text2Node = document.createTextNode('Especifique: Nome da Categoria  : Valor  R$');
                lblEl.htmlFor = "cats";
                lblEl.className = "cats";
                lblEl.appendChild(text2Node);
                
            var fldEl = document.createElement('fieldset');
                fldEl.className = "cats";
                
                DivCat.appendChild(lblEl);
                DivCat.appendChild(fldEl);
            
            for (var i = 0; i < ncats; i++) {
                //var text3Node = document.createTextNode(' : R$');
                var brEl = document.createElement('br');
                var inputEl = document.createElement('input');
                inputEl.id = "categ";
                inputEl.type = "text";
                inputEl.name = "categ" + i;
                inputEl.size = "50";
                inputEl.maxLength ="50"
                
                var input2El = document.createElement('input');
                input2El.id = "vcat";
                input2El.type = "text";
                input2El.name = "vcat" + i;
                input2El.size = "5";
                input2El.maxLength ="5"
                
                fldEl.appendChild(inputEl);
                //fldEl.appendChild(text3Node);
                fldEl.appendChild(input2El);
                fldEl.appendChild(brEl);
                
            }
            
            // AGORA INSIRO O SUBMIT PARA FECHAR O FORM
            var fldEl2 = document.createElement('fieldset');
            fldEl2.className = "cats";
            
            var inputEl2 = document.createElement('input');
            inputEl2.type = "submit";
            inputEl2.name = "enviar";
            inputEl2.value = "Enviar";
            
            DivCat.appendChild(fldEl2);
            fldEl2.appendChild(inputEl2);
        }
    }
<form name="form1" id="form1" method="post" action="proctab.php" >

<P>Informe o número de categorias de inscrição.</p>

 <label for="numcat" class="cats">Número de Categorias [até 9]</label>
    <fieldset id="numcat" class="cats">
        <input name="ncat" type="text" id="ncat" size="5" maxlength="1" onblur="ncateg()"/>
    </fieldset>

    

<div id="nmcat"></div>


    


</form>
</body>
</html>

KaKarotto · Janeiro 28, 2008

você sabe que o que mais faz falta ao desenvolvedor independente são pessoas com quem trocar idéias...

No scriptbrasil você jamais está sozinho! NOOOOSSA, vou ser garoto propaganda...sério. Vou começar a cobrar pelos meus serviços publicitários aqui. Seguinte rutger, há 2 seríssimos problemas no seu script. 1º :

var ncats = document.getElementById('ncat').value

ncats vai ser uma string e não número, CUIDADO com isso! O valor de um input tipo TEXTO é TEXTO, por increça que parível. Então parseie isso para inteiro, pois isso será um número a ser comparado no for. Solução:

var ncats = document.getElementById('ncat').value
ncats=parseInt(ncats)

2º:

for (var i=0; i=ncats; i++)

Ai ai ai....ncats TEM que ser número pois irá ser usado na condição no for, beleza, consertamos. Mas olha a condição ali para o for parar... i=ncats? O for vai entrar em um loop infinito e não irá fazer nada. Para comparação você deve utilizar dois sinais de igual "==" e não "=". Quando usa um sinal de igual apenas, estará atribuindo valor e não comparando. Solução:

for(var i=0; i<ncats; i++)

"i menor que ncats?"

Lógico, i começa do zero, se eu coloco 2 no input, o i vai ser incrementado e terá os valores de 0 e 1 e sairá do loop quando valer 2.

0 e 1 dois números, dois incrementos, duas ações, dois inputs criados.

Ahh...isso que está fazendo não tem nada a ver com Ajax.

Akeleabrasssss

rutger2007 · Janeiro 28, 2008

você sabe que o que mais faz falta ao desenvolvedor independente são pessoas com quem trocar idéias...
No scriptbrasil você jamais está sozinho! NOOOOSSA, vou ser garoto propaganda...sério. Vou começar a cobrar pelos meus serviços publicitários aqui. Seguinte rutger, há 2 seríssimos problemas no seu script. 1º :
var ncats = document.getElementById('ncat').value
ncats vai ser uma string e não número, CUIDADO com isso! O valor de um input tipo TEXTO é TEXTO, por increça que parível. Então parseie isso para inteiro, pois isso será um número a ser comparado no for. Solução:
var ncats = document.getElementById('ncat').value
ncats=parseInt(ncats)
2º:
for (var i=0; i=ncats; i++)
Ai ai ai....ncats TEM que ser número pois irá ser usado na condição no for, beleza, consertamos. Mas olha a condição ali para o for parar... i=ncats? O for vai entrar em um loop infinito e não irá fazer nada. Para comparação você deve utilizar dois sinais de igual "==" e não "=". Quando usa um sinal de igual apenas, estará atribuindo valor e não comparando. Solução:
for(var i=0; i<ncats; i++)
"i menor que ncats?"
Lógico, i começa do zero, se eu coloco 2 no input, o i vai ser incrementado e terá os valores de 0 e 1 e sairá do loop quando valer 2.
0 e 1 dois números, dois incrementos, duas ações, dois inputs criados.
Ahh...isso que está fazendo não tem nada a ver com Ajax.
Akeleabrasssss

ALLAN...

O PRIMEIRO TINHA ME PASSADO... JS tem uns detalhes chatos, e você sabe o que acontece quando a gente mistura PHP, MYSQL, HTML e JS tudo no mesmo saco... volta e meia esqueço uma regrinha do JS na hora de escrever [==] e arranco os cabelos no debug.,..

o segundo eu consertei... foi bobagem mesmo... e realmente DEU LOOPS INFINITOS E TRAVOU O FX VARIAS VEZES e eu sem entender... ATÉ QUE o DEBUG DO APTANA avisou que tinha um loop infinito... foi ai que vi a besteira!!! tks!

eu sei que AJAX envolve requisições assincronas ao servidor... JS é apenas uma parte disto, mas eu sou mais designer que webdesigner, e entendo o ajax como uma FILOSOFIA DE RELACIONAMENTO do usuário com o site... uma forma de evitar recargas totais do form [aqueles flashs de montar página] ou acessos adicionais ao servidor... o problema é que fico pensando numa coisa que um amigo meu vive dizendo... E FUNCIONA COM O JAVASCRIPT BLOQUEADO... sei que não... só espero que o número de pessoas com o JS bloqueado tenha diminuido... aliás este é meu maior receio e por isto uso estes js muito muito discretamente... eu poderia fazer isto com um request ao servidor pedindo um PHP simples que simplesmente pegaria o número digitado e montaria uma saída em texto com os INPUTS montadinhos... retornando ao DOM para inserção... mas ai eu perderia mais uma oportunidade de melhorar meus conhecimentos de JS!!! :rolleyes:

Enfim, obrigado pela força... estou testando o conjunto...

Rogério Leite

KaKarotto · Janeiro 28, 2008

Shooots...quando eu voltei pra postar você já tinha postado.....

Credo..isso tá acontecendo com uma certa frequência...

Ahh..fazer o site funcionar mesmo com js bloqueado é muito fácil, basta fazer o site todo em php e fazer as "frescuras" em js. É trabalhoso, mas não é complicado.

Bom, resolvido então.

rutger2007 · Janeiro 28, 2008

Shooots...quando eu voltei pra postar você já tinha postado.....
Credo..isso tá acontecendo com uma certa frequência...
Ahh..fazer o site funcionar mesmo com js bloqueado é muito fácil, basta fazer o site todo em php e fazer as "frescuras" em js. É trabalhoso, mas não é complicado.
Bom, resolvido então.

COLEGA... NADA... TÁ COM SOLUÇO O DANADO DO SCRIPT... seguinte... um usuario normal vai digitar 3 e ele cria 3 inputs, PEX.... MAS TEM OS DOIDOS... que "de repente" lembram que são 5 inputs... ai digitam 5 na caixa esperando que ele apenas acrescente mais dois... mas ele CRIA MAIS 5!... oU SEJA, PRECISO DE UM clearDiv(), uma funçãozinha para antes de inserir os INPUTS, limpar os filhotes do div numcat deixando ele vazio [sem Child]...

ficou assim, mas não tah funcionando... acho que tem algo a ver com tipo de variavel, de novo

function clearDiv(){
            var ind = DivCat.childNodes.length;
                for (var j = ind - 1; j >= 0; j--)
                {
                    DivCat.removeChild(DivCat.childNodes[j]);
                }
                dataDiv.style.border = 'none';

botei ele no final do script principal... O FIREBUG ALEGA que eu não defini DIVCAT... eu COLOQUEI UM COMENTARIO AONDE ESTOU CHAMANDO O CLEARDIV, IMEDIATAMENTE APÓS O var DivCat = document.getElementById('nmcat'); PORTANTO, DIVCAT está definido... mas é um array? porque só sendo um array vai fazer sentido usar o var ind = DivCat.childNodes.length; tentei fazer um alert para ver o valor de ind [o numero de filhotes de divcat] mas os resultados não faziam sentido algum... tens alguma ideia?

&lt;script type="text/javascript">
    function ncateg(){
        //RECEBO A QUANTIDADE DE INPUTS NECESSÁRIOS
        var ncats = document.getElementById('ncat').value;
        ncats=parseInt(ncats);
        
        
        
        //AVALIO SE O NÚMERO DE CATEGORIAS É MENOR QUE 9 - ISTO É CONFIGURAVEL.
        if (ncats > 9) {
            alert("NÚMERO DE CATEGORIAS EXCEDEU O LIMITE");
        }
        else {
        
            // IDENTIFICO O ELEMENTO DE SAÍDA
            var DivCat = document.getElementById('nmcat');


                //MINHA IDEIA ERA CHAMAR O CLEARDIV AQUI... 
            
            //NOMINO CADA PARAGRAFO        
            var pEl = document.createElement('p');
            pEl.id = "parag";
            var textNode = document.createTextNode('Preencha os campos abaixo com o nome de cada categoria');
            pEl.appendChild(textNode);
            DivCat.appendChild(pEl);
                
            var lblEl = document.createElement('label');
                var text2Node = document.createTextNode('Especifique: Nome da Categoria de Inscrição : Valor da Inscrição em R$');
                lblEl.htmlFor = "cats";
                lblEl.className = "cats";
                lblEl.appendChild(text2Node);
                
            var fldEl = document.createElement('fieldset');
                fldEl.className = "cats";
                
                DivCat.appendChild(lblEl);
                DivCat.appendChild(fldEl);
            
            for (var i = 0; i < ncats; i++) {
                //var text3Node = document.createTextNode(' : R$');
                var brEl = document.createElement('br');
                var inputEl = document.createElement('input');
                inputEl.id = "categ";
                inputEl.type = "text";
                inputEl.name = "categ" + i;
                inputEl.size = "50";
                inputEl.maxLength ="50"
                
                var input2El = document.createElement('input');
                input2El.id = "vcat";
                input2El.type = "text";
                input2El.name = "vcat" + i;
                input2El.size = "5";
                input2El.maxLength ="5"
                
                fldEl.appendChild(inputEl);
                //fldEl.appendChild(text3Node);
                fldEl.appendChild(input2El);
                fldEl.appendChild(brEl);
                
            }
            
            // AGORA INSIRO O SUBMIT PARA FECHAR O FORM
            var fldEl2 = document.createElement('fieldset');
            fldEl2.className = "cats";
            
            var inputEl2 = document.createElement('input');
            inputEl2.type = "submit";
            inputEl2.name = "enviar";
            inputEl2.value = "Enviar";
            
            
            
            DivCat.appendChild(fldEl2);
            fldEl2.appendChild(inputEl2);
        }
    }
    
    function clearDiv(){
            var ind = DivCat.childNodes.length;
                for (var j = ind - 1; j >= 0; j--)
                {
                    DivCat.removeChild(DivCat.childNodes[j]);
                }
                dataDiv.style.border = 'none';
            
    }

KaKarotto · Janeiro 28, 2008

botei ele no final do script principal... O FIREBUG ALEGA que eu não defini DIVCAT... eu COLOQUEI UM COMENTARIO AONDE ESTOU CHAMANDO O CLEARDIV, IMEDIATAMENTE APÓS O var DivCat = document.getElementById('nmcat'); PORTANTO, DIVCAT está definido... mas é um array? porque só sendo um array vai fazer sentido usar o var ind = DivCat.childNodes.length;

DivCat não está definido, ele é uma variável que "some" depois da função acabar. Lembre-se que toda a variável definida como var dentro de uma função tem escopo local, quando a função terminar ela some e além disso, a variável só existe para a função que a criou.

O retorno de childNodes é um array. Um array de todos os elementos filhos.

Você pode fazer a clearDiv de maneira facil:

document.getElementById("nmcat").innerHTML=""

Ou da maneira dificil:

function clearDiv(){
var divCat=document.getElementById("nmcat")

for (var x=0; x >divCat.childNodes.length; x++)
divCat.removeChild(divCat.childNodes[x])
}

Akeleabrasss

rutger2007 · Janeiro 29, 2008

botei ele no final do script principal... O FIREBUG ALEGA que eu não defini DIVCAT... eu COLOQUEI UM COMENTARIO AONDE ESTOU CHAMANDO O CLEARDIV, IMEDIATAMENTE APÓS O var DivCat = document.getElementById('nmcat'); PORTANTO, DIVCAT está definido... mas é um array? porque só sendo um array vai fazer sentido usar o var ind = DivCat.childNodes.length;
DivCat não está definido, ele é uma variável que "some" depois da função acabar. Lembre-se que toda a variável definida como var dentro de uma função tem escopo local, quando a função terminar ela some e além disso, a variável só existe para a função que a criou.
O retorno de childNodes é um array. Um array de todos os elementos filhos.
Você pode fazer a clearDiv de maneira facil:
document.getElementById("nmcat").innerHTML=""
Ou da maneira dificil:
function clearDiv(){
var divCat=document.getElementById("nmcat")

for (var x=0; x >divCat.childNodes.length; x++)
divCat.removeChild(divCat.childNodes[x])
}
Akeleabrasss

obrigado... tentarei amanhã cedo! bons sonhos!

Rogério

rutger2007 · Janeiro 29, 2008

ALLAN...

SEGUINTE... O innerHTML funcionou. O clearDiv não... paciência, problema resolvido e mais uma coisa que eu aprendi [não sabia deste uso para o innerHtml..] Bem, quando eu achei que tudo estava resolvido, fui testar o script no IE6... eu tinha feito tudo no FX2, e não pensei que teria grande diferença... tem!

os INPUTS são gerados dentro de LABELS/FIELDSETS... normalmente eu usaria tabelas, mas estou tentando incrementar mais a usabilidade dos meus sites e resolvi experimentar os fieldsets... no FX, o resultado foi o esperado. no IE, todos os campos foram CENTRADOS... exigiu uma alteração nos estilos, incluindo um text-align:left, para alinhar tudo no lugar certo... se os clientes soubessem a quantidade de tempo que a gente gasta testando os sites em N navegadores... !!!

Só te quero perguntar tua opinião sobre JAVASCRIPT... você acha que ainda andam bloqueando o uso nos navegadores? Eu poderia montar todos os formulários direto no PHP, mas exigiria recarregar toda a pagina. CLARO, PODERIA USAR JS para fazer um request e montar o form no php, respondendo com parte da página, mas ai estaria usando de novo JS [neste caso para que né?!]... talvez precisasse fazer DE DUAS FORMAS: PERGUNTAR SE O JS ESTÁ ATIVO, SE SIM, RODAR A VERSAO JS, SE NÃO, RODAR A VERSAO PHP... mas fica caro isto!...Que achas disto? :wacko:

KaKarotto · Janeiro 29, 2008

Olá rutger.

Bom, antes de tudo, eu não sou Allan rsrsrs. O Allan deu apenas a primeira resposta.

KaKarotto, KaKa para os conhecidos, Edu para os amigos lol.

Vou por partes:

SEGUINTE... O innerHTML funcionou. O clearDiv não...

Porque postei com pressa e a pressa sempre foi inimida da perfeição. A título de aprendizado:

function clearDiv(){
var divCat=document.getElementById("nmcat")

for (var x=0; x >divCat.childNodes.length; x++)
divCat.removeChild(divCat.childNodes[x])
}

Além de errar no sinal de maior, que deveria ser "<", o for vai testar a condição childNodes.length a cada incremento do x. Isso nunca vai funcionar, já que não é uma boa colocar um valor variável numa condição do for... Solução, deve ao invés de remover os elementos de 0 ao tamanho, remover usando um algoritmo de "fila" ou seja, o primeiro a entrar deve ser o primeiro a sair:

function clearDiv(){
var divCat=document.getElementById("nmcat")
var total=divCat.childNodes.length
     for ( x=0; x<total; x++)
     divCat.removeChild(divCat.childNodes[0])
}

É assim que se faz. Ele vai retirando sempre o primeiro filho até que não se tenham mais filhos.

e os clientes soubessem a quantidade de tempo que a gente gasta testando os sites em N navegadores... !!!

Por isso eu cobro bem caro... Mas chega uma hora que de tantos trabalhos você acaba criando seu proprio framework com vários objetos já prontos, tanto objetos html, quanto Css, javascript, php etc...

Só te quero perguntar tua opinião sobre JAVASCRIPT... você acha que ainda andam bloqueando o uso nos navegadores? Eu poderia montar todos os formulários direto no PHP, mas exigiria recarregar toda a pagina. CLARO, PODERIA USAR JS para fazer um request e montar o form no php, respondendo com parte da página, mas ai estaria usando de novo JS [neste caso para que né?!]... talvez precisasse fazer DE DUAS FORMAS: PERGUNTAR SE O JS ESTÁ ATIVO, SE SIM, RODAR A VERSAO JS, SE NÃO, RODAR A VERSAO PHP... mas fica caro isto!...Que achas disto?

Algumas pessoas bloqueiam, muito poucas é claro... Na verdade o problema não é só as pessoas que bloqueiam o javascript, tem também o robô do google que não lê javascript, ou seja, se usar Ajax na página, quando eu digo Ajax é o Ajax mesmo, o google não consegue achar o conteúdo, então você perde no ranking e aquele abraço para aquela aplicação linda em ajax. Fazer scripts que perguntam se o js tá ativo é perda de tempo..não precisa disso. Você tem que conversar com seu cliente sobre o público alvo, sobre como ele quer o sistema dele...Às vezes não é preciso fazer funcionar sem javascript dependendo da intenção do cliente. Oras, se ele quiser você cobra mais é claro!!!! Vai dar mais trabalho... Nem todo cliente quer pagar por uma página funcionando bem pra todos... Vou te mostrar uma técnica para fazer a página funcionar com ou sem java script: Html

<ul id="menu">
  <li><a href="formulario1.php">Formulário1</a></li>
  <li><a href="formulario2.php">Formulário2</a></li>
  <li><a href="formulario3.php">Formulário3</a></li>
</ul>

Agora o js, lá entre as tags <head></head>

function criaForm(n){
  alert( n+ " formulário(s).")
}

window.onload=function(){

var menu=document.getElementById("menu")
var alinks=menu.getElementsByTagName("a")
var cont=1
    for(var x=0; x<alinks.length; x++)
    alinks[x].onclick=function(){criaForm(cont++); return false}
}

O código js acima vai esperar a página carregar toda, logo após disso ela vai pegar os links do "menu" e vai atribuir uma função a cada um deles quando clicados, criando formulários de acordo com os argumentos. (argumentos criados pelo contador "cont")

Perceba que o onclick retorna "false", ou seja, não vai executar o href dos links, o javascript vai ser executado sem direcionar o browser pra outra página.

O que acontece se eu bloquear o Js?

A função não vai ser executada, os links não receberão o onclick e a página vai ser direcionada para o php que cria os formulários.

Essa é uma forma de fazer a página funcionar com ou sem javascript. Se você já tem um php que gere os formulário de acordo com um argumento, então você pode usar o Ajax apenas para loadear sem dar o refresh na página. O robozinho do Google vai continuar achando o conteúdo pois ele não vai pelo onclick ele vai pelo href.

;)

Entrar

(Resolvido) Criando N inputs com AJAX

Pergunta

Link para o comentário

Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns