主要功能

    $.ajax({
        type:"POST",
        url:dest_url,
        data:$(this).serialize(),
        dataType: 'json',
        success: function(data){
            if($.isEmptyObject(data.error)){
                listRefresh(data.id);
                $('#site_id').val(data.id).trigger("chosen:updated");
            }else{
                console.log(data.error);
            }
        },
        error: function(data){

        }
    }
})

功能listRefresh（）

function listRefresh(id){
    $('#site_id_chosen').hide().parent().append('<i class="fa fa-circle-o-notch fa-spin"></i>');
    $.ajaxSetup({
        header:$('meta[name="_token"]').attr('content')
    })
    var src_url = location.href + '?sites='+id;
    $.ajax({
        url: location.href,
        type: 'GET',
        cache: false
    })
    .done(function(id) {
        $('.panel-heading').load(src_url + " .panel-heading >*");
        $('#site_id').load(src_url+ " #site_id >*", function(id) {
            $('.fa-spin').remove();
            $('#site_id_chosen').show();
        }).val(id).trigger("chosen:updated");
    })
    .fail(function() {
        $('#site_id').load(location.href+ " #site_id >*", function() {
            $(this).val('').trigger("chosen:updated");
            $('.fa-spin').remove();
            $('#site_id_chosen').show();
        });
    });
}

除了更新所选的选定值外，一切正常。当我做console.log(data.id);时，它有效。当我从控制台执行$('#site_id').val(40).trigger("chosen:updated");时，它可以正常工作。

我认为这是因为ajax是异步的，但是我的代码在成功回调中，因此应该定义data.id ...

我还尝试在listRefresh（）函数中更新所选的选定值，但没有任何作用。

修改

它还没有用，我不知道为什么...... 这是我的完整代码，由您更新：

//Création d'un nouveau site en ajax
    $('#creer-site form').on('submit',function(e){
        var base = "{{ url('/') }}";
        var dest_url = base + '/sites'; 
        $.ajaxSetup({
            header:$('meta[name="_token"]').attr('content')
        })
        e.preventDefault(e);
        $.ajax({
            type:"POST",
            url:dest_url,
            data:$(this).serialize(),
            dataType: 'json',
            success: function(data){
                if($.isEmptyObject(data.error)){
                    console.log(data);
                    $('.alert').remove();
                    $('.modal').modal('hide');
                    successHtml = '<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button><span class="fa fa-check fa-lg"></span>';
                    successHtml += data.message;
                    successHtml += '</div>';
                    $('.header-container').after( successHtml );
                    listRefresh(data.id); // on rafraichit la liste et on sélectionne l'objet nouvellement créé
                }else{
                    console.log(data.error);
                }
            },
            error: function(data){
                $('.alert').remove();
                $('.modal').animate({ scrollTop: 0 }, 'fast');
                errorsHtml = '<div class="alert alert-danger"><span class="fa fa-warning fa-lg"></span><strong> Une ou plusieurs erreurs ont été detectées :</strong><ul>';
                $.each(data.responseJSON, function(key, value) {
                    errorsHtml += '<li>' + value + '</li>';
                });
                errorsHtml += '</ul></div>';
                $('#creer-site form').prepend( errorsHtml );
            }
        })
    });

    // on rafraichit la liste et on sélectionne l'objet nouvellement créé
    function listRefresh(id){
        $('#site_id_chosen').hide().parent().append('<i class="fa fa-circle-o-notch fa-spin"></i>');
        $.ajaxSetup({
            header:$('meta[name="_token"]').attr('content')
        })
        var src_url = location.href + '?sites='+id;
        $.ajax({
            url: location.href,
            type: 'GET',
            cache: false
        })
        .done(function(id) {
            $('.panel-heading').load(src_url + " .panel-heading >*");
            $("#site_id").chosen("destroy");
            $('#site_id').load(src_url+ " #site_id >*", function(id) {
                $("#site_id").chosen({
                    no_results_text: "Aucun résultat pour ", 
                    search_contains: true, 
                    placeholder_text_single: "Sélectionner...", 
                    allow_single_deselect:true, 
                    width: "300px"
                }).val(id).trigger("chosen:updated");
                $('.fa-spin').remove();
                $('#site_id_chosen').show();
            });
        })
        .fail(function() {
            $('#site_id').load(location.href+ " #site_id >*", function() {
                $(this).val('').trigger("chosen:updated");
                $('.fa-spin').remove();
                $('#site_id_chosen').show();
            });
        });
    }

编辑2

由于某种原因，根据调试，在ajax调用期间js变量会丢失：当我看到＆＃39; id＆＃39;变量，它变为＆＃39; undefined＆＃39;在函数启动ajax调用的确切时刻。

临时解决方案是在隐藏输入中写入id，这样我可以再次在ajax调用中获取它（它完全有效），但这非常难看......

如果您有更好的解决方案，并且可能解释变量丢失的原因，我将不胜感激：）

编辑3

解决我最新的＆＃34; bug＆＃34;在这里：Variable lost in ajax request

Answer 1

您的问题出现在这个片段中：

$('#site_id').load(src_url+ " #site_id >*", function(id) {
        $('.fa-spin').remove();
        $('#site_id_chosen').show();
 }).val(id).trigger("chosen:updated");

val（id）会在将来运行load方法时立即应用。而且，你已经在主要的ajax中调用了相同的方法。

因此我建议移动这一行：

$('#site_id').val(data.id).trigger("chosen:updated");

在成功加载方法回调中。

load方法从服务器获取数据并将返回的HTML放入匹配的元素中（即：always site_id ）。从代码中，没有关于你的html的任何信息，我假设加载粉丝覆盖你选择的元素。这意味着您需要在新元素上重新创建一个新实例并删除前一个实例。这是以下两个步骤：

$（＆＃34;＃SITE_ID＆＃34）选择的。（＆＃34;破坏＆＃34）;在加载之前
$（＆＃34;＃site_id＆＃34;）。selected（{... your options ..}）。val（data.id）.trigger（＆＃34; selected：updated＆＃34;）;成功加载回调

您的代码将是：

$.ajax({
    type: "POST",
    url: dest_url,
    data: $(this).serialize(),
    dataType: 'json',
    success: function (data) {
        if ($.isEmptyObject(data.error)) {
            listRefresh(data.id);
        } else {
            console.log(data.error);
        }
    },
    error: function (data) {

    }
})
function listRefresh(id) {
    $('#site_id_chosen').hide().parent().append('<i class="fa fa-circle-o-notch fa-spin"></i>');
    $.ajaxSetup({
        header: $('meta[name="_token"]').attr('content')
    })
    var src_url = location.href + '?sites=' + id;
    $.ajax({
        url: location.href,
        type: 'GET',
        cache: false
    }).done(function (data) {
        $('.panel-heading').load(src_url + " .panel-heading >*");
        // 
        // remove chosen:
        //
        $("#site_id").chosen("destroy");
        $('#site_id').load(src_url + " #site_id >*", function (data) {
            //
            // next row added
            //
            $("#site_id").chosen({...your options..}).val(id).trigger("chosen:updated");
            $('.fa-spin').remove();
            $('#site_id_chosen').show();
        }); // USELESS  .val(id).trigger("chosen:updated");
    }).fail(function () {
        $('#site_id').load(location.href + " #site_id >*", function () {
            $(this).val('').trigger("chosen:updated");
            $('.fa-spin').remove();
            $('#site_id_chosen').show();
        });
    });
}

Chosen.js：在ajax回调

主要功能

功能listRefresh（）

修改

编辑2

编辑3

1 个答案: