问题描述
我正在使用 wordpress 并且我已经成功使用了 Select2 和 Toastr 库。
基本上我有一个下拉菜单,如果我更改,Toastr 会询问我是否需要更新。
如果我点击“是”,它会更新,如果我点击“否”,那么我的下拉菜单应该设置以前的值,什么都不会发生。
目前它选择了上一个值,但是如果我打开相同的下拉列表,尝试点击它进行搜索,然后它会说“无法加载结果”。
这是我到目前为止所做的 JS 代码。
/etc/passwd
如你所见,我有 var prevSubVarClientId;
jQuery('.mySubscription').select2({
allowClear: true,placeholder: "",//minimumInputLength: 3,ajax: {
type: "POST",url: '/wp-admin/admin-ajax.PHP',dataType: 'json',delay: 250,// delay in ms while typing when to perform a AJAX search
data: function (params,page) {
return {
action: 'list_posts',q: params.term,};
},processResults: function( data ) {
var options = [];
if ( data ) {
jQuery.each( data,function( index,text ) {
options.push( { id: text['id'],text: text['name'] } );
});
}
return {
results: options
};
},cache: true
}
});
jQuery('.mySubscription').on('select2:selecting',function (evt) {
prevSubVarClientId = jQuery('select').val();
});
jQuery('.mySubscription').change(function() {
var $this = jQuery(this);
jQuery(this).blur();
alertify.confirm("Are you sure you want to transfer?",function(e){
var subscriptionId = jQuery($this).data("subscription-id");
var url = jQuery($this).data("ajax-url");
var userId = jQuery($this).val();
jQuery.ajax({
type: "POST",url: url,data : {
action : 'update_var_client_user_id',userId : userId,subscriptionId : subscriptionId
},success: function(data)
{
var data = JSON.parse(data);
toastr["success"]("Transferred Successfully." );
}
});
},function(){
jQuery($this).val(prevSubVarClientId);
jQuery($this).select2().trigger('change');
}).set({title:"Alert!!!"}).set({ labels:{ok:'Yes',cancel: 'No'} });
});
变量和 prevSubVarClientId
下拉菜单。
mySubscription
在这里您可以看到我正在打开 jQuery('.mySubscription').change(function() {
确认框,如果我点击“否”,那么我正在执行以下代码。
alertify
有人可以指导我吗,我在这里做错了什么?
谢谢
解决方法
“无法加载结果”。仅在返回数据为空或未找到时显示。
我在代码段下面测试了您的代码并且工作正常。
$(".js-data-example-ajax").select2();
jQuery('.js-data-example-ajax').on('select2:selecting',function (evt) {
prevSubVarClientId = jQuery('select').val();
});
jQuery('.js-data-example-ajax').change(function() {
var $this = jQuery(this);
jQuery(this).blur();
alertify.confirm("Are you sure you want to transfer?",function(e){
console.log('change');
},function(){
console.log('no change');
jQuery($this).val(prevSubVarClientId);
jQuery($this).select2().trigger('change');
}).set({title:"Alert!!!"}).set({ labels:{ok:'Yes',cancel: 'No'} });
});
.select2-container,.select2-container--open .select2-dropdown--below {
width: 200px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js"></script>
<select class="js-data-example-ajax">
<option value="abc">ABC</option>
<option value="bca" selected>BCA</option>
<option value="mnp">MNP</option>
<option value="pqr">PQR</option>
</select>