如果DB中存在数据,则显示警报图标 - JQuery AJAX

时间:2017-07-31 09:38:09

标签: javascript jquery ajax

我有一张表,我需要检查数据是否已存在于数据库中。如果有,则会在各自行的“操作”列下的垃圾箱图标旁边显示一个警告图标,并显示相应的相关信息。

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

enter image description here

这是我的返回数据:

{"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>

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

非常感谢任何帮助。谢谢! -Eli

1 个答案:

答案 0 :(得分:1)

您需要2个循环1才能匹配数据,其他是您从DB获得的响应,

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

    },
....