【问题标题】:Show Alert Icon if Data exists in DB - JQuery AJAX如果数据库中存在数据,则显示警报图标 - JQuery AJAX
【发布时间】:2017-07-31 09:38:09
【问题描述】:

我有一个表,我需要在其中检查数据是否已存在于数据库中。如果是这样,则在相应行的“操作”列下的垃圾桶图标旁边会出现一个警告图标,并显示有关它们的适当信息。

目前,如果我正在比较的数据已经存在于数据库中,我能够返回我需要的 ajax 数据。但我不知道如何在各自的行上显示图标。

这是我返回的数据:

{"receive_array":[{"id":"77","batch_id":"45","courier_name":"","vendor_name":"","status":"stored","batch_no":"9","courier_tracking_no":"123"},"",{"id":"126","batch_id":"65","courier_name":"QW12","vendor_name":"Amazon","status":"itemized","batch_no":"18","courier_tracking_no":"QW11"}]}

这是我的 Ajax:

$.ajax({
        type: "POST", 
        url: window.base_url+'oss/admin/check_receive_data', 
        data: $.param($('form#receiving-form').serializeArray()),
        dataType : 'JSON',
        success: function (response) {
            //THIS IS WHERE THE  PROCESS SHOULD TAKE PLACE
            $.each(response.receive_array, function(index, val) {
            });  
        },
            error: function (MLHttpRequest, textStatus, errorThrown) {
            console.log("There was an error: " + errorThrown);  
        }
    });

编辑:

HTML:

<table id="receiving-box-table" class="table table-hover table-bordered table-striped">
    <thead>
        <tr>
            <th>Courier Tracking #</th>
            <th>Courier</th>
            <th>Vendor</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" form="receiving-form" class="form-control input-sm track_no" name="courier_tracking_no[]" id="courier_tracking_no_1" /></td>
            <td><input type="text" form="receiving-form" class="form-control input-sm" name="courier_name[]" id="courier_name_1" onkeypress="if (event.keyCode == 13) {return false;}"/></td>
            <td><input type="text" form="receiving-form" class="form-control input-sm" name="vendor_name[]" id="vendor_name_1" onkeypress="if (event.keyCode == 13) {return false;}"/></td>
            <td class="box-action"><button class="btn btn-danger btn-xs clear-data" data-toggle="tooltip" data-placement="right" title="Clear input fields"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></td>
        </tr>
    </tbody>
</table>

(第一行以外的行是动态创建的。)

非常感谢任何帮助。谢谢! -伊莱

【问题讨论】:

  • 问题是你不知道怎么显示一个图标还是你现在不知道怎么匹配json中的值和行中的值?
  • 在此处粘贴您的 html
  • @Difster 我不知道如何在值匹配的同一行上显示图标。
  • @RAUSHANKUMAR 查看更新后的代码。谢谢!
  • 假设 id 对于表的每一行都是唯一的,您需要创建一个表 id 字段的数组,然后循环遍历 json 并在每个循环中查找另一个数组中的匹配项。如果是这样,然后找到添加图标。也许你只需要找到每一行的子元素。或者也许给带有垃圾桶图标的单元格他们自己的唯一ID,也与该行的主ID相对应。 trash + id 什么的。

标签: javascript jquery ajax


【解决方案1】:

您需要 2 个循环 1 来匹配数据,另一个是您从数据库中得到的响应,

....
    success: function (response) {
        // Change selectors as per you HTML design
        $('table tr').each(function(index){ 
            var ctno=$(this).find('td:first input').val(); // get courier trancking

            // check if ctno is present in response array or not
            var arr = jQuery.grep(response.receive_array, function( n ) {
               return ( n.courier_tracking_no === ctno);
            });
            if(arr.length){ // if present then show error message
               $('span.exists').show(); // let it be hidden by default
            }
        });

    },
....

【讨论】:

  • 我尝试使用只有 2 个重复项的 3 个数据,但所有图标仍然显示。 snag.gy/jJ4SqE.jpg
  • 我为每个按钮添加了一个 ID 来专门调用它们,因为调用类意味着调用具有相同类的所有东西。我只是想知道...我试图提醒数据值,但是当我只输入 1 个数据时,警报显示两次。第一个是未定义的,第二个是实际数据。
  • 您可以在tr 中找到错误图标,例如`if(arr.length){ $(this).find('span.exists').show();}。同样在成功回调中,首先隐藏所有存在的按钮,以便只显示现有的一次。
  • 我怎么知道根本没有重复数据?
  • 可以在两个循环之前创建一个flag变量,如果flag没有改变则表示没有重复
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-06-28
  • 2017-01-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-17
相关资源
最近更新 更多