jQuery/AJAX: each, if, post, .html: Runs but randomly deletes data

Question

I've got a PHP page, with FedEx & UPS tracking numbers in a MySQL database echoing into ID's of DIVs with the class "trackingnumber". My JS each's through those divs and grabs the ID to then post to a PHP page that polls Fedex/UPS and echos the result from them. That works great, except for one thing. It randomly deletes the data after it's loaded it. So the data will flash on the screen for a second, and then disappear. It's random too, which just baffles me. Check out this Video demonstrating the issue (.mov) to get a better understanding.

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);
            });
        };
    });
});

Relevant HTML (after PHP has parsed it):

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

Any ideas? I'm new to jQuery (and JS in general)... I've got no idea why this is doing what it is. It looks like all my code is valid (the only errors in FireBug or Safari's web inspector are when it hits a div without any data in the class)... I've been battling this for about a day now, finally getting it to this point... Really hoping someone will be able to help me out!

Answer 1

I'm afraid you've misunderstood how jQuery works; your if statements don't make sense at all.

$("[id!='']") will always return a jQuery object which, due to JavaScript's automatic type coercion, will always evaluate to true. In other words $("[id!='']") == true no matter what your HTML looks like. The same applies for the rest of your if statements.

Because of this mistake your code retrieves both the results of the UPS and FedEx scripts every time. Since the AJAX calls are asynchronous your results may appear in different orders thus causing an apparently random clearing of the data (when the empty data is returned after the correct data).

This is how I assume you intended your code to behave:

$(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);
      });
    });
});

Working Demo: http://jsbin.com/iyeci (editable via http://jsbin.com/iyeci/edit)

Don't hesitate to ask if you need more help understanding the code.