Ajax canceling onblur and onfocus events

Question

Ajax canceling onblur and onfocus events

Asked 7 years, 10 months ago

Viewed 304 times

1

I’m picking to call an ajax (Bootstrap 3 + Html + PHP), what happens is that when you put the $.ajax function, simply the events do not occur, if I put an Alert there events happen normally :

Has anyone ever been through this ? is some incompatibility with Bootstrap, or is it ignorance of my own ?

<script>

    function proximoCampo(atual, proximo){                // salta campo depois de preencher 
        if(atual.value.length >= atual.maxLength){
            document.getElementById(proximo).focus();
        }
    }

    function buscaProduto(){

        $.ajax({
            type: "POST",
            url: "pdv-produto-ajax.php",
            data: {codigoean: '7891111111111'},
            success: function (data) {
                alert(data.val);
            }
        });

    }

</script>

-------------- HTML -------

<div class="form-group">
    <label class="col-md-4 control-label" for="pdvcodigoean">Código Barras*</label>  
    <div class="col-md-8">
        <input id="pdvcodigoean" name="pdvcodigoean" type="text" placeholder="Código Barras EAN13" 
               maxlength="13" class="form-control input-md" required="" autofocus
               pattern=“^*[0-9]”
               onkeyup="proximoCampo(this, 'pdvquantidade')"
               >
    </div>
</div>


<div class="form-group">
    <label class="col-md-4 control-label" for="pdvquantidade">Quantidade vendida  </label>  
    <div class="col-md-8">
        <input id="pdvquantidade" name="pdvquantidade" type="text" 
               maxlength="13" class="form-control input-md" value="1"
               pattern="[0-9]+(\.[0-9][0-9]?)?" min="0.01" max="9999999.99"
               onfocus="buscaProduto()">
    </div>
</div>

1

Is there an error in the console? You can also check in the developer tool, in the network tab (depends on the browser) if the request is returning ok. There may be some error and since you don’t have callback error specified, is passing silently by your code. But, beforehand, you can notice that there is a syntax error in the formation of the date object: missing to close the keys: {codigoean: '7891111111111 },.

– mrlew

2017/01/12 at 23:39
you forgot to close with } after data:

– RFL

2017/01/12 at 23:44
the absence of { was a distraction at the time of copying the code, but even then Alert does not work.

– Carlos Susviela

2017/01/13 at 00:42
@Carlossusviela you checked the console if there is an error? and the request in the network tab was sent and returned the expected data?

– mrlew

2017/01/13 at 01:18

1 answer

Browser other questions tagged php ajax html5 bootstrap-3

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

by ShutUpMagda • **2,056** points · Answer 1 · 2017-01-13T21:05:50+00:00

First of all, remember correct library loading order. If you carry bootstrap.min.js before jquery.min.js, is wrong.

That’s the way it is:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

If the shipment is right, try:

<script>
      $(function(){
       $("#pdvcodigoean").keyup(function() {
         if (this.value.length === this.maxLength) {
          $('#pdvquantidade').focus();
         }
      });
      $("#pdvquantidade").focusin(function() {
       $.ajax({
         type: "POST",
         url: "pdv-produto-ajax.php",
         data: {
           codigoean: '7891111111111'
         },
         success: function (data) {
           alert(data.val);
          }
      });                     
    });
  });
</script>