bugfix> javascript > 投稿

ここに2つのJSファイルがあります。1つは親ページのメインJSファイルで、これにはajax呼び出しでデータが取り込まれるDatatableが含まれています。もう1つは、必要な値をデータベースに更新する関数が定義されている更新機能専用です。その更新はダイアログボックスで行われます。更新が成功すると、製品が正常に更新されたことを示す甘いアラートが表示されます。したがって、更新された値はすぐに親ページのデータテーブルに反映されるはずです。現在、古い値は、ページを手動で更新するまで表示されています。以下は両方のJSファイルです。そして、私はJavascriptとJqueryの初心者です。だから助けてください

var oTable;
var url_data_source;
(function(window, undefined) {
    window.lastQuery = null;
    function initDataSource(after_id) {
        url_data_source = '/event/productlocation/ajax?action=data_source';
        oTable = $('#datatable').dataTable({
            "sAjaxSource": url_data_source,
            "bProcessing": true,
            "bServerSide": true,
            "bFilter": false,
            "bRetrieve": true,
            "bScrollCollapse": true,
            "iCookieDuration": 60*60*24,
            "sCookiePrefix": "tkpd_datatable_",
            "sPaginationType": "simple",
            "scrollX": true,
            "aaSorting": [ [0,'desc'] ],
            "iDisplayLength": 20,
            "aLengthMenu": [[20, 40, 60, 80, 100], [20, 40, 60, 80, 100]],
            "oLanguage": {
                "sInfoFiltered": "",
                "sProcessing": " "
            },
            "aoColumns": [
                { "sName": "id", "mDataProp": "id"},
                { "sName": "location_id", "mDataProp": "location_id"},
                { "sName": "product_id", "mDataProp": "product_id"},
                { "sName": "status_str", "mDataProp": "status_str"},
                { "sName": "actions", "mDataProp": "actions"},
            ],
            "fnDrawCallback":function(){
            },
            "initComplete": function(settings, json) {
                $("#datatable_paginate").on("click", "#datatable_next", function(){
                    var after_id = ""
                    url_data_source = '/event/productlocation/ajax?action=data_source';
                    after_id_url = $("#after_id_url").val();
                    after_id = after_id_url.split("after_id=")
                    url_data_source += "&after_id="+after_id[1]; 
                    redraw();
                });
            },
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                aoData.push( {"name": "email", "value": $('#search_email').val()} );
                if (after_id != "") {
                    aoData.push( {"name": "after_id", "value": after_id} );
                }
                if ($('#search_id_product').val()) {        
                    aoData.push( {"name": "product_id", "value": $('#search_id_product').val()} );      
                }
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": url_data_source,
                    "data": aoData,
                    "success": function(result) {
                        var message_error = result.message_error
                        if (message_error) {
                            $('#datatable_processing').css("visibility","hidden");
                            swal({ title: message_error, type: "error"});
                        } else if (result.status == "OK") {
                            result.data = formatingDatatable(result.data)
                            fnCallback(result)
                            lastQuery = aoData;
                        } else {
                            $('#datatable_processing').css("visibility","hidden");
                            swal({ title: "Tidak ada hasil", type: "info"});
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        swal({ title: manager.getAjaxError(XMLHttpRequest), type: "error"});
                        $('#datatable_processing').css("visibility","hidden");
                        $('.load__overlay').hide();
                    },
                    beforeSend: function() {
                        $('#datatable_processing').css("visibility","visible");
                        $('.load__overlay').show();
                    },
                    complete: function() {
                        $('#datatable_processing').css("visibility","hidden");
                        $('.load__overlay').hide();
                    }
                });
            }
        });
    }
    function redraw() {
        $("#datatable").dataTable().fnClearTable();
    }
    function formatingDatatable(events) {
        var result = [];
        var uri_next;
        $.each(events.location_products, function(i, productlocation) {
            result.push({
                id: productlocation.id,
                location_id: productlocation.location_id,
                product_id: productlocation.product_id,
                status_str: productlocation.status_str,
                actions:'<button class="btn btn-primary waves-effect waves-light m-b-5 btn-sm m-r-5 btn-sm detail-productlocation" data-target="#modal-event-productlocation-detail" data-toggle="modal" data-id="' + productlocation.id + '" product-id="' + productlocation.product_id + '" location-id="' + productlocation.location_id + '" status-str="' + productlocation.status_str + '"><i class="glyphicon glyphicon-list"></i> Details</button>'
            });
        })
        $("#after_id_url").val(events.page.uri_next)
        uri_next = events.page.uri_next
        result.after_id_url = uri_next
        return result
    }   
    function initFilter() {
        $("#filter-form").submit(function() {
            url_data_source = '/event/productlocation/ajax?action=data_source';
            if(oTable == null){
                initDataSource("");
            } else {
                oTable.fnDraw();
            }
            return false;
        });
    }
    $('#datatable_paginate').on('click', '#datatable_next', function() {
        initDataSource("");
    })
    $('#datatable').on('click', '.detail-productlocation', function() {
        $('.load__overlay').show();
        $("#modal-event-productlocation-detail").remove();
        $(this).removeAttr("data-target", "#modal-event-productlocation-detail");
        $(this).removeAttr("data-toggle", "modal");
        //var id = $(this).attr("data-id");
        var dt = {
            "id": $(this).attr("data-id"),
            "product_id": $(this).attr("product-id"),
            "location_id": $(this).attr("location-id"),
            "status": $(this).attr("status-str"),
        }
        $.ajax({
            "url": '/event/productlocation/ajax?action=show_dialog_details',
            "type": 'GET',
            "data": dt,
            success: function (result) {
                $('.load__overlay').hide();
                $("body").append(result);
                $(this).attr("data-target", "#modal-event-productlocation-detail");
                $(this).attr("data-toggle", "modal");
                $('#modal-event-productlocation-detail').modal('show');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $('.load__overlay').hide();
                swal({ title: manager.getAjaxError(XMLHttpRequest), type: "error", });
            },
        });
    });
    $(document).ready(function() {
        //initDate();
        initFilter();
        //initCategoryList();
        var after_id = "";
        initDataSource(after_id);
    });
})(window);

event-productlocation-update.js

   function sendProductLocationData() {
        var jsonData = {};
        var formFields = $(":input");
        jQuery.each(formFields, function(i, field) { //Accessing all the element of form and get Key and Value
            var key = field.name; //Keyname of each Field
            var elementid = field.id; //Id of each Field
            elementid = "#" + elementid;
            var value = $(elementid).val();
            jsonData[key] = parseInt(value);
            if (key == "status") {
                if ($("#event_checkbox_status").is(':checked') == true) {
                    jsonData.status = 1;
                } else {
                    jsonData.status = 0;
                }
            }
        });
        productlocationdetail = JSON.stringify(jsonData); //Creating json Object
        $.ajax({
            url: '/update/product/productlocation',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            data: productlocationdetail,
            "success": function(result) {
                var message_error = result.message_error
                if (message_error) {
                    $('#modal-event-productlocation-detail').css("visibility", "hidden")
                    swal({
                        title: message_error,
                        type: "error"
                    });
                    $('.modal-backdrop').remove();
                } else {
                    $('#modal-event-productlocation-detail').css("visibility", "hidden")
                    swal({
                        title: "Product Location Updated Successfully",
                        type: "info"
                    });
                    $('.modal-backdrop').remove();
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                swal({
                    title: manager.getAjaxError(XMLHttpRequest),
                    type: "error"
                });
                $('#modal-event-productlocation-detail').css("visibility", "hidden")
                $('.modal-backdrop').remove();
                $('.load__overlay').hide();
            },
            beforeSend: function() {
                $('#modal-event-productlocation-detail').css("visibility", "visible")
                $('.modal-backdrop').remove();
            },
            complete: function() {
                swal({
                    title: "Product Location Updated Successfully",
                    type: "info"
                });
                $('#modal-event-productlocation-detail').css("visibility", "hidden")
                $('.modal-backdrop').remove();
                $('.load__overlay').hide();
            }
        });
    }

回答 1 件
  • これを処理する方法はいくつかあります。

    これを処理する1つの方法は、jSON配列の変数にアイテムを格納することです。

    更新が成功したことをサーバーから確認するときに、この関数を使用してdataTableを更新する関数を作成できます。

    function updateDataTable(dataTableObj,jsonArray)
         /*
            Clears and populates the dataTable with JSON array
         */
        dataTableObj.clear();
        jsonArray.forEach(function(row){
                dataTableObj.row.add(row);
    
        });
        dataTableObj.draw();
    }
    
    

    テーブルを更新できるもう1つの方法は、jsonArrayを送信するルートをサーバー上に作成することですが、これにはサーバーへの追加リクエストが必要です。 注:Ajax呼び出しを使用する場合は、必ずajaxコールバック関数内の関数を呼び出してください  

あなたの答え