jQuery / AJAX: каждый, если, пост, .html: работает, но случайным образом удаляет данные

Question

У меня есть страница PHP с номерами отслеживания FedEx и UPS в базе данных MySQL, которые отражаются в идентификаторах DIV с классом «trackingnumber». Каждый из моих JS проходит через эти div-ы и захватывает идентификатор, а затем публикует на страницу PHP, которая опрашивает Fedex / UPS и выводит результаты из них. Это прекрасно работает, за исключением одной вещи. Он случайным образом удаляет данные после загрузки. Таким образом, данные будут мигать на экране в течение секунды, а затем исчезнут. Это тоже случайно, что просто сбивает меня с толку. Проверьте это Видео, демонстрирующее проблему (.mov) , чтобы лучше понять.

JS:

$(document).ready(function(){
    //Dislay some text indicating that we're getting status
    if ($("[id!='']")) {
        $("div.trackingnumber").html("working...");
    };
    //Begin getting status
    $('div.trackingnumber').each(function(index){
        var v2 = $(this).attr("id");
        //If it's FedEx, post to the FedEx script.
        if ($("[id!='1z'], [id!='1Z']")) {
            $.post("inc/fedex.php", { v: v2 }, function(data){
                $("#" + v2).html(data);
            });
        };
        //If it's UPS, post to the ups script.
        if ($("[id^='1z'], [id^='1Z']")) {
            $.post("inc/ups.php", { v: v2 }, function(data){
                $("#" + v2).html(data);
            });
        };
    });
});

Соответствующий HTML (после того, как PHP его проанализировал):

<td scope='col' width='100px'>
        <div class='trackingnumber' id='1ZX799380311650886'></div>
</td>

Есть идеи? Я новичок в jQuery (и JS в целом) ... Я понятия не имею, почему это делает то, что есть. Похоже, весь мой код действителен (единственные ошибки в FireBug или веб-инспекторе Safari - это когда он попадает в div без каких-либо данных в классе) ... Я боролся с этим около дня, наконец, получив его этот момент ... очень надеюсь, что кто-нибудь сможет мне помочь!

Answer 1

Боюсь, вы неправильно поняли, как работает jQuery; ваши if заявления вообще не имеют смысла.

$("[id!='']") будет всегда возвращать объект jQuery, который из-за автоматического приведения типов в JavaScript всегда оценивается как true. Другими словами $("[id!='']") == true независимо от того, как выглядит ваш HTML. То же самое относится и к остальным вашим заявлениям if.

Из-за этой ошибки ваш код извлекает и результаты сценариев UPS и FedEx каждый раз . Поскольку вызовы AJAX являются асинхронными, ваши результаты могут отображаться в разных порядках, что вызывает случайную очистку данных (когда пустые данные возвращаются после правильных данных).

Я предполагаю, что вы предполагали, что ваш код будет вести себя так:

$(document).ready(function(){
  // Select all of the tracking numbers on the page
  $(".trackingnumber").
    // Display some text in each, indicating that we're getting status
    text("working...").
    // Begin getting status for each tracking number.
    each(function () {
      var trackingNumber = this.id;

      // Use the fedex script by default ...
      var script = "fedex";

      if (trackingNumber.match(/^1z/i)) {
        // ... unless it's a UPS tracking number.
        script = "ups";
      }

      $.post("inc/" + script + ".php", { v: trackingNumber }, function(data){
          $("#" + trackingNumber).html(data);
      });
    });
});

Рабочая демонстрация: http://jsbin.com/iyeci (редактируется с помощью http://jsbin.com/iyeci/edit)

Не стесняйтесь спрашивать, нужна ли вам дополнительная помощь для понимания кода.