Ir para conteúdo

Arquivado

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

marcelocardoso

ajax não atualiza DIV

Por , em ASP Clássico

Recommended Posts

marcelocardoso    6

marcelocardoso
Postado

amigos...

nunca tinha usado isso, peguei um exemplo, onde o formulario envia os dados e o AJAX processa através de um arquivo e depois exibe a mensagem na mesma tela, através de um DIV:


<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#send").click(function() {
            var email = $("#email").val();
              var msg = $("#msg").val();
            $.ajax({
                type: "post",
                url:  "include_cadastro_db.asp",
                data: "email=" + email,
                success: function(data) {
            $("#msg").html(data);
                }
            });
        });
    });
</script>

<section class="mbr-section mbr-section--relative mbr-section--fixed-size" id="form2-6" style="background-color: rgb(27, 86, 44);">
    <div class="mbr-section__container mbr-section__container--sm-padding container" style="padding-top: 40.8px; padding-bottom: 40.8px;">
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <form class="mbr-form" action="">
                            <div class="mbr-form__left">
                                <input type="email" class="form-control" id="email" name="email" required="" placeholder="Cadastre seu endereço de e-mail e receba novidades...">
                            </div>
                            <div class="mbr-form__right mbr-buttons mbr-buttons--no-offset mbr-buttons--right">
                                <button type="submit" class="mbr-buttons__btn btn btn-lg btn-success" value="enviar" id="send">CADASTRE-SE</button>
                            </div>
                        </form>
                        <div id="msg" class="text-center text-warning"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

No arquivo INCLUDE_CADASTRO_DB.ASP

Tenho uma condição que verifica se o email nunca foi cadastrado, e grava e exibe RESPONSE,WRITE.
e se já existe, também, exibe um RESPONSE..

que deveria atualizar na DIV, mas com o código acima, não funfa>

Tem algo de errado no AJAX??????

Compartilhar este post

Link para o post
Compartilhar em outros sites

hargon    64

hargon
Postado

Cria um formulário html simples que tem o arquivo include na action, o method post e um campo email.. executa e veja se o resultado é o esperado...

 

Posta o resultado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelocardoso    6

marcelocardoso
Postado

pior que nem assim:
tenho o seguinte código em ASP:

<%
    IF Request.Form("email") = "" THEN
       Response.Write "Você deve digitar uma endereço de e-mail"
       Response.End
    ELSE
         email    = LimpaHTML(Replace(LCase(Request.Form("email")),"'",""))
         nome     = LimpaHTML(Replace(LCase(Request.Form("nome")),"'",""))
         data     = Date()  
         ip       = Request.ServerVariables("REMOTE_ADDR")
         bandeira = ""   

        SET strEMAIL = conn.Execute("SELECT * FROM cadastro WHERE email='"&email&"'")
         IF strEMAIL.BOF AND strEMAIL.EOF THEN

            strInsere = conn.execute("INSERT INTO cadastro (nome,email,data,bandeira) VALUES ('"&nome&"','"&email&"','"&data&"','"&bandeira&"')")

                Response.Write "Seu cadastro foi realizado com sucesso.<br> Obrigado por se cadastrar!"
                      ELSE
                Response.Write "Seu cadastro já foi realizado antes.<br> Obrigado por ter cadastrado!"		

         END IF
    END IF
							 
SET strEMAIL = Nothing
SET strInsere = Nothing     
	conn.close
SET conn = Nothing
%>

preciso que o ajax imprima abaixo do form, os RESPONSE.WRITE após ele ler o arquivo ASP.
tentei daquele jeito, exemplo copiado de algum site, porém, o mesmo não vai....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

Oi.

A primeira coisa a fazer é verificar se o está funcionando seu AJAX.

Imprima os "response.write" para cada variável passada pelo AJAX e veja se elas estão passando e retornando dentro da DIV de retorno.
<div id="msg" class="text-center text-warning"></div>

Caso não passar nada, seu AJAX está com algum erro.

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

hargon    64

hargon
Postado

pior que nem assim:

 

 

Como assim? Se você criou um formulário e ao enviar os dados ele dá erro, é porque seu código ASP tem algum problema. Se estiver OK, ele teria que retornar os mesmos valores esperados pelo javascript.

 

Se deu erro no ASP, posta qual foi o erro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

Eu utilizo outro método para enviar variáveis sem refresh, veja se te ajuda.

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

<script type="text/javascript" >
$(document).ready(function(){
 

  $("#btn_login").click(function(){
 
    
    validaLogin($("#usuario"), $("#senha"));
    
  });
 
});
 
function validaLogin(usuario, senha){
 
  if(usuario.val() == ""){
    alert("Informe o Usuario!"); //Exibe um alerta
    usuario.focus(); //Adiciona foco ao campo login usando um ponteiro
    return; //retorna nulo
  }
  else if(senha.val() == ""){
    alert("Informe a senha!");
    senha.focus();
    return;
  }
  //Se o usuário informou login e senha, então é hora do Ajax entrar em ação
  else{
 
    //Adicionamos um texto na DIV #resultado para alertar o usuário que o sistema está autenticando os dados
    $("#resultado").html("Autenticando...");
 
    /**Função ajax nativa da jQuery, onde passamos como parâmetro o endereço do arquivo que queremos chamar,
os dados que irá receber, e criamos de forma encadeada a função que irá armazenar o que foi retornado pelo servidor,
 para poder se trabalhar com o mesmo */
 

   $.post("login_verifica.asp", {usuario: usuario.val(), senha: senha.val()},
      function(retorno){
 
        //Insere na DIV #resultado o que foi retornado pelas classes de manipulação do Usuário (Se os dados estão corretos ou não)
        $("#resultado").html(retorno);
 
      } //function(retorno)
    ); //$.post()
 
  }
 
} //validaLogin()

</script>

Eu uso este método acima, e funciona bem, basta você adaptar ao seu sistema.
Ele mostra até um loading enquanto puxa os dados, basta vc colocar uma imagem de carregando no $("#resultado").html("Autenticando...");

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelocardoso    6

marcelocardoso
Postado

olá amigos...

Após muitas tentativas, consegui resolver meu problema...
segue código para ajudar os próximos...

index.html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
    $(document).ready(function() {
        $('#submit-button').click(function() {
            $.ajax({
                type: "post",
                url: "inc/cadastro.asp?email=" + $('#email').val(),
                data: $("#frmAjax").serialize(),
                success: function(response) {
                    $("#Resultado").html(response);
                }
            });
        });
    });
</script>
<section class="mbr-section mbr-section--relative mbr-section--fixed-size" id="form2-6" style="background-color: rgb(27, 86, 44);">
    <div class="mbr-section__container mbr-section__container--sm-padding container" style="padding-top: 40.8px; padding-bottom: 40.8px;">
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">

                        <div id="frmAjax" class="mbr-form">
                            <div class="mbr-form__left">
                                <input type="email" class="form-control" id="email" name="email" required="" placeholder="Cadastre seu endereço de e-mail e receba novidades...">
                            </div>
                            <div class="mbr-form__right mbr-buttons mbr-buttons--no-offset mbr-buttons--right">
                                <button type="submit" id="submit-button" class="mbr-buttons__btn btn btn-lg btn-success">CADASTRE-SE</button>
                            </div>
                        </div>

                        <div id="Resultado" class="text-left text-white"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

cadastro.asp

<!-- #include file="include_conexao.asp" -->
<!-- #include file="include_dataehora.asp" -->
<%
 email    = Request.QueryString("email")
 nome     = ""
 data     = Date()  
 ip       = Request.ServerVariables("REMOTE_ADDR")
 bandeira = ""   
   
    SET strEMAIL = conn.Execute("SELECT * FROM cadastro WHERE email='"&email&"'")
     IF strEMAIL.BOF AND strEMAIL.EOF THEN

        strInsere = conn.execute("INSERT INTO cadastro (nome,email,data,bandeira) VALUES ('"&nome&"','"&email&"','"&data&"','"&bandeira&"')")

            Response.Write "<p style=""padding: 2px;"">Seu cadastro foi realizado com sucesso. Obrigado por se cadastrar!</p>"
                  ELSE
            Response.Write "<p style=""padding: 2px;"">Seu cadastro já foi realizado antes. Obrigado por ter se cadastrado!</p>"		

     END IF
							 
SET strEMAIL  = Nothing
SET strInsere = Nothing     
	conn.close
SET conn = Nothing
%>

Este exemplo acima, faz tudo o que preciso.
1) num cadastro de emails no site, envia os dados para o banco de dados sem utilizar refresh de página;

Porém, preciso adaptar ele SEM o CLICK, mas utilizar o SUBMIT no AJAX, usando ao invés de DIV, um FORM para enviar os arquivos.

Tentei de várias maneiras e não consegui ter exito.
Se alguém sabe como, por favor, agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelocardoso    6

marcelocardoso
Postado

PROBLEMAS:

Pessoal, uma coisa só, o código funfa legal, faz td oq preciso, mas ainda fazendo td, dá refresh na página, volta lá para o inicio da página, sendo que o cadastro, fica lá no rodapé. deveria estar somente apresentando a mensagem de email adicionado, mas dá refresh.

CODIGO:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
    $(document).ready(function() {
        $("form").submit(function() {
            $.ajax({
                type: "post",
                url: "inc/include_cadastro_db.asp?email=" + $('#email').val(),
                data: $("#form").serialize(),
                success: function(response) {
                    $("#Resultado").html(response);
                    return false;
                },
            });
        });
    });
</script>
<section class="mbr-section mbr-section--relative mbr-section--fixed-size" id="form2-6" style="background-color: rgb(27, 86, 44);">
    <div class="mbr-section__container mbr-section__container--sm-padding container" style="padding-top: 40.8px; padding-bottom: 40.8px;">
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <form id="frmAjax" class="mbr-form" action="" method="post">
                            <div class="mbr-form__left">
                                <input type="email" class="form-control" id="email" name="email" required="" placeholder="Cadastre seu endereço de e-mail e receba novidades...">
                            </div>
                            <div class="mbr-form__right mbr-buttons mbr-buttons--no-offset mbr-buttons--right">
                                <button type="submit" id="submit-button" class="mbr-buttons__btn btn btn-lg btn-success">CADASTRE-SE</button>
                            </div>
                        </form>
                        <div id="Resultado" class="text-left"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Tem algum comando para colocar no AJAX do meu código para não acontecer isso????
obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelocardoso    6

marcelocardoso
Postado

colegas, to usando o código acima, porém, mas não consigo fazer ele sem dar refresh, ele tá fazendo td que preciso, porém, ele mostra a mensagem na div de email cadastrado ou email existente conforme meu codigo em ASP para gravar no banco e usado no AJAX, mas mesmo, assim...

ele faz td, mas ainda dá refresh, ou seja, ele funciona, mas o script volta para o topo da página e e recarrega a página...

pergunto, tem algum comando q possa colocar no AJAX, para ele somente exibir a mensagem e parar por alí na DIV, tentei colocar um RETURN FALSE, mas nem assim.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

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

  Aceito