Using Javascript with AJAX

Asked

Viewed 187 times

-2

I have a form on a JSP page. When the customer enters the CPF, via AJAX, I take the CPF I make a query in the bank, if she has already registered. I take all the data from it, and fill in the fields automatically.

Only I’m in trouble, AJAX calls the page_cpf.jsp

But when I put Javascript on this page, for it popular the form fields, it does not work.

Does anyone know any alternative, to make Javascript work on the page that is loaded by AJAX ?

javascript ajax jsp

  • But if you already have a form that fills in the fields automatically, what is the problem that is occurring? Why put another Javascript on the page? I didn’t understand, was confused your question.

1 answer

0

You can create a page Cpf as parameter and returns the client data in json. In doing so, you perform the search with the ajax, and fills the values in the inputs. I’ll leave an example using CEP’s as a base.

First you create your form:

   <div class="well">
    <form class="form row" action="checkout-sample" method="POST">
        <div class="form-group col-sm-2">
            <label>CEP</label><input id="cep" class="form-control" name="cep" type="text">
        </div>
        <div class="form-group col-sm-2">
            <label>Estado</label><input id="estado" class="form-control" name="estado" type="text">
        </div>
        <div class="form-group col-sm-3">
            <label>Cidade</label><input id="cidade" class="form-control" name="cidade" type="text">
        </div>
        <div class="form-group col-sm-2">
            <label>Bairro</label><input id="bairro" class="form-control" name="bairro" type="text">
        </div>
        <div class="form-group col-sm-3">
            <label>Endereço</label><input id="endereco" class="form-control" name="endereco" type="text">
        </div>
    </form>

</div>

In this example, the user will type the zip code, and after it exits the input, will be called the function to fetch the data.

jQuery(function($){
   $("input#cep").change(function(){
      var cep_code = $(this).val();
      if( cep_code.length <= 0 ) return;
      alert("Enviando consulta do CEP "+cep_code);
      $.get("http://apps.widenet.com.br/busca-cep/api/cep.json", { code: cep_code },
         function(result){
            if( result.status!=1 ){
               alert(result.message || "Houve um erro desconhecido");
               return;
            }
            $("input#cep").val( result.code );
            $("input#estado").val( result.state );
            $("input#cidade").val( result.city );
            $("input#bairro").val( result.district );
            $("input#endereco").val( result.address );
            $("input#estado").val( result.state );
            //alert("Dados recebidos e alterados");
         });
   });
});

I have no information as to your code , but if you have any questions on how to return the data in json, look this link.

jQuery(function($){
   $("input#cep").change(function(){
      var cep_code = $(this).val();
      if( cep_code.length <= 0 ) return;
      alert("Enviando consulta do CEP "+cep_code);
      $.get("http://apps.widenet.com.br/busca-cep/api/cep.json", { code: cep_code },
         function(result){
            if( result.status!=1 ){
               alert(result.message || "Houve um erro desconhecido");
               return;
            }
            $("input#cep").val( result.code );
            $("input#estado").val( result.state );
            $("input#cidade").val( result.city );
            $("input#bairro").val( result.district );
            $("input#endereco").val( result.address );
            $("input#estado").val( result.state );
            //alert("Dados recebidos e alterados");
         });
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well"><form class="form row" action="checkout-sample" method="POST">
<div class="form-group col-sm-2"><label>CEP</label><input id="cep" class="form-control" name="cep" type="text"></div>
<div class="form-group col-sm-2"><label>Estado</label><input id="estado" class="form-control" name="estado" type="text"></div>
<div class="form-group col-sm-3"><label>Cidade</label><input id="cidade" class="form-control" name="cidade" type="text"></div>
<div class="form-group col-sm-2"><label>Bairro</label><input id="bairro" class="form-control" name="bairro" type="text"></div>
<div class="form-group col-sm-3"><label>Endereço</label><input id="endereco" class="form-control" name="endereco" type="text"></div>
</form>

</div>

If you prefer, here’s one example in Jsfiddle.

Credits from the example: Search ZIP code

Browser other questions tagged javascript ajax jsp

You are not signed in. Login or sign up in order to post.