jquery seems to skip some lines of code

Question

I have a jQuery script to get some information from a external source (ajax) and while doing that a loader image should appear. JQuery does't seem to like it, because the line is not executed. During executing the the input should be disabled, but that code is skipped to.

My jQuery code:

$("#pnum").keyup(function(){
  nieuw = $(this).val();
  code = $('#pnum').val();
  $("#pnum").css("background-color", "#FFC080");
  if (oud != nieuw && option != 0 && code.length >= 1 && code.length <=4 ) {
    $("#loaderImage").show();
    $("input").prop('disabled', true);
    $("#mode").prop('disabled', true);
    $('#pnumTable').empty();
    if (code.length >= 1)  {
      $.ajax({
        url: "http://sistermans.diskstation.me/NetBeans/Postcodes/api-postcode.php",
        dataType: "jsonp",
        jsonpCallback: "postcodeResults",
        data : {mode: option, pnum: code }
      });
    }
    oud = nieuw;
    $("#loaderImage").hide();
    $("input").prop('disabled', false);
  }
  if (code.length < 1 || code.length > 4 ) {
    $("#pnum").css("background-color", "yellow");
  }
});

The part in html where the loader image and the answer should pop up:

<div id="loaderImage">
  <p>Haal de gegevens op volgens methode : <br>
  <div id="keuze"></div><p>
  <p><img src="web_images/ajax-loader-hscrew.gif"></p>
</div>
<table>
  <div id="pnumTable">

  </div>
</table>

The answer will be shown in the pnumTable div. This allways works. The <div id="keuze"> is handled elsewhere.

I probably did something wrong, but I can't she where.

Is there somebody willing to help me out?

Ajax is asynchronous so the code won't stop to wait until it's done. The loader's `.hide()` method is called immediately so you won't see it. You'll have to add the code that you want to happen when the Ajax call is finished to its callback function. — JJJ, Oct 30 '16 at 09:22
Read [this](http://stackoverflow.com/a/7613888/863110) answer. — Mosh Feu, Oct 30 '16 at 09:48

score 0 · Answer 1 · answered Oct 30 '16 at 10:02

0

Try putting the hide code inside a success callback like this...

 if (code.length >= 1)  {
      $.ajax({
        url: "http://sistermans.diskstation.me/NetBeans/Postcodes/api-postcode.php",
        dataType: "jsonp",
        jsonpCallback: "postcodeResults",
        data : {mode: option, pnum: code },
        success: function(){
                oud = nieuw;
                $("#loaderImage").hide();
                $("input").prop('disabled', false);
        }
      });
    }

answered Oct 30 '16 at 10:02

Rich Andrews

4,168
3
35
48

Hiding the loader is not the loaderimage, but it's the showing and disabling the input. Even when the Ajax call is not successful the loderimage sould disapear and the input should be enabled. – user1886216 Oct 31 '16 at 08:50
Then it sounds like you also need an error: callback to also hide it on an ajax error. The important point is that both success and error will fire after the main function has finished executing because it's is asynchronous – Rich Andrews Oct 31 '16 at 09:21

jquery seems to skip some lines of code

1 Answers1