0

I have a page where customers can enter the number of products they would like to order. Therefore I made use of the jquery key-up function in combination with an ajax script:

<input type="text" class="number" data-product_id="1">
<input type="text" class="number" data-product_id="2">
<input type="text" class="number" data-product_id="3">

etc.

<script>
$(function() {
    $("input.number").keyup(function() {
        $.post("number.php", { product_id: $(this).data('product_id'), number: $(this).val() }, function(data){ if (data != "1") { alert('Error occurred'); } });
    });
})
</script>

Basically, this system is working well. The numbers are temporary stored via a PHP Session and will be processed later. But there is a problem: there are multiple input fields (> 500) and users enters the number of items they would like to order really fast with the tab-button. I found out that not all the numbers are stored correctly if the users enters it really fast despite the fact that te number.php file is really small in size, just the row $_SESSION[$_POST['product_id']] = $_POST['number']; is in the file.

Are there any solutions for checking of all the fields are submitted?

Stefan
  • 249
  • 5
  • 17

1 Answers1

0
$(function() {
  $("input.number").keyup(function() {
    var that = $(this);
    that.addClass('loading');
    $.post(
      "number.php",
      { product_id: $(this).data('product_id'), number: $(this).val() },
      function(data) {
        that.removeClass('loading').removeClass('failed');
        if (data != that.val()) {
          that.addClass('failed');
        }
      }
    );
  });
});

Basically add the class failed if the returned value does not match the input value. This assumes, that the number.php returns the stored value, of course. You can than later check for the input fields with class failed.

eskayp
  • 48
  • 5
  • The strange part of it is that there isn't any responsive sometimes probably because of the fast input. Your answer isn't really a solution for the jquery bug, isn't it? – Stefan Sep 09 '15 at 14:51
  • It's not a solution to the "bug". Its only a workround to find fields which might not have been stored in the session. You might try to use the event `change` instead of keyup, if you can live with the delay. Or use both. – eskayp Sep 09 '15 at 15:43
  • Is this a common bug in jquery? The keyup is triggered well, but the ajax isn't submitted correct. – Stefan Sep 10 '15 at 09:19
  • I don't think it's a bug in jquery but a problem with too many concurrent connections. The keypress event is triggered every time, you hit a key. This can be the `SHIFT` key, the `TAB` key or any other. So your sending lots of `AJAX` calls short after another. See this question: http://stackoverflow.com/questions/561046/how-many-concurrent-ajax-xmlhttprequest-requests-are-allowed-in-popular-browse Thats why it's probably better, to use the `.change()` event, which triggers only once after the input field lost focus. – eskayp Sep 11 '15 at 10:04
  • Thanks for the reaction. Probably, that is the problem, but there is a reason why we make use of the 'keyup' and the .change() function: it could happen a user enters a value, but doesn't change the field or click outside a field and instead click on a link. The .change() function didn't triggered in this situation, so the change isn't set. – Stefan Sep 11 '15 at 13:56
  • Imo the `.change()` event is fired if you click a link. The ajax call might be canceled, because the page unloads. See this question for details: http://stackoverflow.com/questions/1821625/ajax-request-with-jquery-on-page-unload – eskayp Sep 15 '15 at 09:02