[英]Chosen.js : automatically select freshly created value in ajax callback
我在ajax中有以下代码:
$.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){
}
}
})
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">×</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();
});
});
}
根据调试,由于某种原因,在ajax调用期间js变量丢失了:当我观看'id'变量时,在该函数启动ajax调用的确切时刻它变为'undefined'。
临时的解决方案是在一个隐藏的输入中编写id,这样我就可以再次在ajax调用中获取它(它可以正常工作),但这非常丑陋...
如果您有更好的解决方案,并且也许能解释为什么变量丢失了,我将不胜感激:)
我最新的“错误”的解决方案在这里: ajax请求中丢失了变量
您的问题在以下片段中:
$('#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的任何信息,我假设加载功能会覆盖您选择的元素。 这意味着您需要在新元素上重新创建一个新实例,并删除前一个实例。 这是以下两个操作:
您的代码将是:
$.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();
});
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.