代码之家 › 专栏 › 技术社区 › charlie

Ajax请求只在第一次工作,在加载页面的一部分之后不再工作

ajax jquery javascript

charlie · 技术社区 · 6 年前

HTML代码:

<div class="table-responsive">
    <table id="dataTable" class="table table-hover table-separated">
        <tbody>
            <tr id="test-1">
                <td class="test">
                    <form action="{{ url('/psy/update-test-status/'.$test->id) }}" method="POST" class="m-0">
                        <select name="status" class="form-control status_select">
                            <option class="text-success" value="active" selected>En ligne</option>
                            <option class="text-warning" value="inactive" >Inactif</option>
                            <option class="text-danger"  value="canceled" >AnnulÃ©</option>
                        </select>
                    </form>
                </td>
            </tr>
            <tr id="test-2">
                <td class="test">
                    <form action="{{ url('/psy/update-test-status/'.$test->id) }}" method="POST" class="m-0">
                        <select name="status" class="form-control status_select">
                            <option class="text-success" value="active" selected>En ligne</option>
                            <option class="text-warning" value="inactive" >Inactif</option>
                            <option class="text-danger"  value="canceled" >AnnulÃ©</option>
                        </select>
                    </form>
                </td>
            </tr>
            <tr id="test-3">
                <td class="test">
                    <form action="{{ url('/psy/update-test-status/'.$test->id) }}" method="POST" class="m-0">
                        <select name="status" class="form-control status_select">
                            <option class="text-success" value="active" selected>En ligne</option>
                            <option class="text-warning" value="inactive" >Inactif</option>
                            <option class="text-danger"  value="canceled" >AnnulÃ©</option>
                        </select>
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript代码:

$(document).ready(function () {

        // change color of selected element according to its value
        function statusSelect(element) {
            if ($(element).val() == 'active') {
                $(element).removeClass('text-warning');
                $(element).removeClass('text-danger');
                $(element).addClass('text-success');
            }
            else if ($(element).val() == 'inactive') {
                $(element).removeClass('text-success');
                $(element).removeClass('text-danger');
                $(element).addClass('text-warning');
            }
            else if ($(element).val() == 'canceled') {
                $(element).removeClass('text-success');
                $(element).removeClass('text-warning');
                $(element).addClass('text-danger');
            }
        }

        // Post form data and load the table again
        function updateTestStatus(element) {
            form = $(element).parent('form');
            tr = form.closest('tr');
            dest_url = form.attr('action');
            $.ajax({
                type:"POST",
                url:dest_url,
                data:form.serialize(),
                dataType: 'json',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data){
                    if($.isEmptyObject(data.errors)){
                        $('#dataTable').load(document.URL +  ' #dataTable');
                        statusSelect($(element));
                    }
                    else {
                        // code...
                    }
                },
                errors: function (data) {
                    // code...
                }
            });
        }

        $('select.status_select').each(function (elem) {
            statusSelect($(this));
        });

        $('select.status_select').on('change', function (e) {
            statusSelect($(this));
            updateTestStatus($(this));
        });
});

我不知道如何排序和/或叠瓦函数 each on change
tr ajax成功回调中的元素:加载完整的 table $('#dataTable tr#test-1').load(document.URL + ' #dataTable tr#test-1'); tr公司 tr公司 而不是替换它。
statusSelect 方法(更改选定输入文本的颜色)第一次工作,但在Ajax加载之后不再工作
这个 updateTestStatus 方法(Ajax调用然后重新加载页面的一部分)第一次工作,但之后不再工作。

编辑:第三和第四个问题现在已经解决(成功回调中的函数是在加载函数完成之前执行的)

更新代码:

function statusSelect(element) {
            if ($(element).val() == 'active') {
                $(element).removeClass('text-warning');
                $(element).removeClass('text-danger');
                $(element).addClass('text-success');
            }
            else if ($(element).val() == 'inactive') {
                $(element).removeClass('text-success');
                $(element).removeClass('text-danger');
                $(element).addClass('text-warning');
            }
            else if ($(element).val() == 'canceled') {
                $(element).removeClass('text-success');
                $(element).removeClass('text-warning');
                $(element).addClass('text-danger');
            }
        }

        function updateTestStatus(element) {

            form = $(element).parent('form');
            tr = form.closest('tr');
            dest_url = form.attr('action');
            $.ajax({
                type:"POST",
                url:dest_url,
                data:form.serialize(),
                dataType: 'json',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data){
                    if($.isEmptyObject(data.errors)){
                        var row_id = tr.attr('id');
                        $('#dataTable #'+row_id).load(document.URL +  ' #dataTable #'+row_id, function() {
                            testStatus();
                        });
                    }
                    else {
                        // code...
                    }
                },
                errors: function (data) {
                    // code...
                }
            });
        }

        function testStatus () {
            $('select.status_select').each(function (elem) {
                statusSelect($(this));
            });

            $('select.status_select').on('change', function (e) {
                statusSelect($(this));
                updateTestStatus($(this));
            });
        }

        testStatus();
    });

我还有一个问题:我只想加载 <tr> 不是所有的 <table> ...

$('#dataTable tr#test-1').load(document.URL + ' #dataTable tr#test-1'); 给了我:

<table><tr id="test-1"><tr id="test-1">...</tr></tr></table>

似乎load方法“附加在内部”,并不像我所相信的那样“替换”。这句话起了作用:

$('#dataTable #'+row_id).load(document.URL +  ' #dataTable #'+row_id, function() {
    $(this).children(':first').unwrap(); // This one
    testStatus();
});

How can I use jQuery.load to replace a div including the div

最终编辑

我是这样解决的:

success: function(data){
    if($.isEmptyObject(data.errors)){
        var row_id = tr.attr('id');
        $('#dataTable #'+row_id).load(document.URL +  ' #dataTable #'+row_id, function() {
            $(this).children(':first').unwrap();

            $('#'+row_id+' select.status_select').on('change', function (e) {
                statusSelect($(this));
                updateTestStatus($(this));
            });
            $('select.status_select').each(function (elem) {
                statusSelect($(this));
            });
        });
    }
}

1 回复 | 直到 6 年前

Daut Åukasz BlaszyÅski 6 年前

Ajax动态加载HTML。JavaScript不能像预期的那样处理动态HTML。

您可以将JavaScript封装在一个函数中,并在加载/准备就绪时调用它一次,然后在 success .

$(document).ready(function () {
   function ajaxFunction (args) {
        $.ajax({
            type:"POST",
            url: url,
            data: data,
            dataType: 'json',
            headers: {header object},
            success: function(data){

            afterAjax (); // call the functions you want to perform again
                // code...
            },
            errors: function (data) {
                // code...
            }
        });
    }
    function afterAjax () {
        // functions to perform again after dynamic HTML load
    }
    afterAjax ()
});