doubi1797 2017-10-21 06:24
浏览 70
已采纳

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

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!

展开全部

  • 写回答

1条回答 默认 最新

  • douou6807 2017-10-21 06:57
    关注

    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;
         }
       });
     })
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部