使用单个jQuery脚本更新多个DIV - 标记

Question

I have a page that pulls order statuses from a backend system and then shows the status updates on the page. I need to make the page dynamic to load, since now the page takes too long to update at once.

I got my code working so that the HTML page loads up first and then a single status update is loaded on the page.

Components:

1. index.php -page - basic page w. jQuery code that requests orders_updatestatus.php.
2. orders_updatestatus.php -page. Pulls info from a backend system and displays info. Receives what order to update via GET.

HTML (index.php - this works)

<div id="updateref"></div>

jQuery: (part of index.php - this works)

<script type="text/javascript">
// Update order status
$(function () {
  $.ajax({
    url: 'orders_updatestatus.php?reference=100000025',
    success: function (data) {
      $('#updateref').html(data);
    }
  });
});
</script>

UPDATED CODE

What I was thinking was that that I need to create a div for every single order so that they could then be updated individually.

$results = $mysqli->query("SELECT reference FROM orders;");
while($row = $results->fetch_assoc()) {
  print '<div id="updateref'.$row['reference'].'"></div>';
}

So, with the code above I'll something like this:

<div id="updateref20000"></div>
<div id="updateref20001"></div>
<div id="updateref20002"></div>
<div id="updateref20003"></div>
<div id="updateref20004"></div>
etc..

Everything works great until this point. Now I need your help on building the corresponding jQuery code so that it would update every 'updaterefXX' -div that it sees.

My question is: How to update the following code so that it every updateref -div is updated on the page:

<script type="text/javascript">
// Update order status
  $(function () {
    $.ajax({
      url: 'orders_updatestatus.php?reference=100000025',
      success: function (data) {
        $('#updateref').html(data);
      }
    });
  });
</script>

Update/clarification: What I need is for the script to pull the orders_updatestatus.php with a GET variable for every div. Example:

With <div id="updateref1000"> the script requests orders_updatestatus.php?reference=1000 and displays it in <div id="updateref1000"> when ready

With <div id="updateref1001"> the script requests orders_updatestatus.php?reference=1001 and displays it in <div id="updateref1001"> when ready

etc. Thank you!

Answer 1

You can use attribute begins with selector and .each() to iterate all elements having id beginning with "updateref", .replace() to replace portion of id that are not digits to set at query string, set .innerHTML the current element within success callback of $.ajax() call

 $("[id^=updateref]").each(function(index, element) {
   $.ajax({
     url: "orders_updatestatus.php?reference=" + element.id.replace(/\D/g, ""),
     success: function(data) {
       element.innerHTML = data;
     }
   });
 })