Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

CamilaLopez

Inserir elementos com jquery

Recommended Posts

boa noite gente ... estou com uma duvida quanto a metodologia de inserir componentes com jquery no local determinado ..

 

tenhu este campo de usuario ... e quando faco uma verificacao no BD, se encontrar um registro com o nome de usuario ele vai mudar sua aparencia para ERRO !

 

original

<div id="div_usuario" class="form-group">
            <label class="col-sm-3 control-label"> Usuario </label>

            <div class="col-sm-9">
                <input type="text" id="usuario" name="usuario" placeholder="Usuario" class="col-xs-10 col-sm-5" />
            </div>
</div>

alterado devera ter icones e textos em vermelho, porem nao sei adicionar no local correto como quero, veja

<div class="form-group has-success">
        <label class="col-sm-3 control-label"> Usuario </label>

            <div class="col-sm-9">

                // Preciso adicionar este span com esta configuracao englobando o input e inserindo uma imagem logo após 
                <span class="block input-icon input-icon-right">
                    <input type="text" id="usuario" name="usuario" placeholder="Usuario" class="col-xs-10 col-sm-5" />
                    <i class="icon-ok-sign"></i>
                </span>

            </div>
            
            // adicionar esta div com uma mensagem dentro
            <div id="msg_usuario" class="help-block col-xs-5 col-sm-reset inline">
                Success tip help!
            </div>
</div>

se alguem souber me ajudar ae, fico grata

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

você pode utilizar show() e hide() para ficar simples nos elementos que devem aparecer ou usar o .html porém pode ser muito conteudo não acho que fique legal.

 

qual a linguagem você está usando como server-side? Talvez fiquei até mais fácil com .load() ou algo do tipo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá! Você inserir uma variável em algum local? append(valor), ou html(valor) do Javascript? Crie uma DIV sem conteúdo, e uma dessas funções acima para adicionar algo a essa DIV...

 

EXEMPLO:

var valor_meu = '<p>AQUI</p>';
$("#minha_div").html(valor_meu);

Seria isso que gostaria?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Garotos, não estou querendo criar .... como se trata de uma validacao já contem o elemento como citado no exemplo !!

Apó a verificacao será mudado para verde os campos se sucesso ou vermelho se falso, e somente alterar as classes para o mesmo, estou usando addClass("teste") e não esta funcionando !!!

Se alguem tiver outra dica ae

Compartilhar este post


Link para o post
Compartilhar em outros sites

Verifique as funções .wrap(), .append(), .prepend(), .closest(), .after() e .before() (todas do jQuery).

Utilizando essas funções, você consegue adicionar elementos onde quiser, de acordo com um seletor.

Como sua pergunta está muito vaga e não tenho acesso ao callback da função de validação, não posso ser preciso na ajuda.


Dica de ouro: Sempre que algo que deveria funcionar não funciona, da um console.log() nas variáveis utilizadas e confirma se o retorno é o esperado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vou dar uma lida neste material na documentacao pra ver se consigo .... mas posso adiantar o codigo de verificacao em Jquery

$("#usuario").change(function(){
				var dados = jQuery( this ).serialize();
				//alert(dados);

				jQuery.ajax({
				type: "POST",
				url: "usuario/usuario_busca.php",
				data: dados,
				    success: function( data )
				    {
				        var resultado = data ;

		                if(resultado == 0){ // Resultado negativo

		                    $("#msg_usuario").text("Usuario disponivel");
		                    $("#div_usuario").addClass("has-success");


		                }else if(resultado == 1){ // Resultado positivo

		                    $("#div_usuario").addClass("has-error");
		                    $("#msg_usuario").text("Usuario indisponivel");
		                } 

				    }
				}); return false;

			});

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.