单击时选择2(未选择)，显示加载微调器javascript [英] Select2 upon click(not selected), show loading spinner javascript
问题描述
好的，我的代码很简单.我正在使用示例数据，但在我的真实代码中，在单击 select2 下拉菜单时，数据需要很长时间才能加载并反驳我想包含一个加载微调器，该微调器显示单击下拉列表的时间并在数据完成后隐藏加载.到目前为止，我无法让它工作.它在 select2 被更改或选择时起作用，但在单击时不起作用.任何建议
<%= select_tag 'clone-application-id', options_from_collection_for_select(@applications, :id, :case_code), prompt: "请选择", class: "form-horizontal single-select" %><%= image_tag "ajax-loader.gif", id: "loading-indicator", style: "display:none" %>
我的js文件
$('#clone-application-id').select2().on('change', function() {console.log("ok 现在什么");$('#loading-indicator').show();});我有一个关于 select2 下拉加载微调器用于 Ajax 调用的解决方案.使用 2 个简单的功能，我们将加载图标放在下拉列表中
添加引用(select2下拉CDN)
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>HTML
div class="row"><div class="col-md-4"><select class="js-example-basic-single" name="state" id="country"><option value="AL">阿拉巴马州</option><option value="WY">怀俄明</option><option value="ZB">津巴布韦</option><option value="TR">Türkiye</option></选择><div class="col-md-4"><select class="js-example-basic-single" name="state" id="city"></select>
<div class="col-md-4"><select class="js-example-basic-single" name="state" id="district"></select>
addLoadSpinner
此功能用于在下拉菜单中添加或显示微调 gif.加载微调器动态创建为 html 元素并添加到下拉列表中.如果之前已添加，则仅显示在屏幕上.
函数 addLoadSpinner(el) {调试器；如果(el.length > 0){如果 ($("#img_" + el[0].id).length > 0) {$("#img_" + el[0].id).css('display', 'block');}别的 {var img = $('<img class="ddloading">');img.attr('id', "img_" + el[0].id);img.attr('src', 'http://www.lettersmarket.com/uploads/lettersmarket/blog/loaders/common_gray/ajax_loader_gray_512.gif');img.css({ 'display': 'block', 'width': '25px', 'height': '25px', 'z-index': '100', 'float': 'right' });img.prependTo(el[0].nextElementSibling);}el.prop("禁用", true);}}hideLoadSpinner
添加css css('display', 'none') 从屏幕上移除
function hideLoadSpinner(el) {如果(el.length > 0){如果 ($("#img_" + el[0].id).length > 0) {设置超时(函数(){$("#img_" + el[0].id).css('display', 'none');el.prop("禁用", false);}, 500);}}}使用 Ajax 加载数据
最后，Loading spinner 出现在显示屏上，直到 Ajax 完成
$.ajax({url: "/Home/GetCities",数据:JSON.stringify({'countryId': $("#country option:selected").val()}),类型:'POST'，缓存:假，contentType: '应用程序/json;字符集=utf-8',数据类型:json"，成功:功能(结果){var dbSelect = $('#city');addLoadSpinner(dbSelect);dbSelect.empty();$.each(result, function (index, item) {dbSelect.append("")});hideLoadSpinner(dbSelect);},错误:函数(xhr，ajaxOptions，throwedError){警报(抛出错误)；}});Ok my code is quite simple. I am using sample data but in my real code, upon clicking the select2 dropdown, the data takes a long time to load and to counter that i want to include a loading spinner that shows when the dropdown is clicked and hides after the data has finished loading. So far, i cant get it work. It works when select2 is changed or selected but not when it is clicked. Any suggestions
<div class="col-sm-3 loader">
<%= select_tag 'clone-application-id', options_from_collection_for_select(@applications, :id, :case_code), prompt: "Please Select", class: "form-horizontal single-select" %>
</div>
<%= image_tag "ajax-loader.gif", id: "loading-indicator", style: "display:none" %>
my js file
$('#clone-application-id').select2().on('change', function() {
console.log("ok now what");
$('#loading-indicator').show();
});
I have a solution on select2 dropdown loading spinner for Ajax calls.. With 2 simple functions, we will place the loading icon in the dropdowns
Add Referances (select2 dropdown cdn)
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
Html
div class="row">
<div class="col-md-4">
<select class="js-example-basic-single" name="state" id="country">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="ZB">Zimbamwe</option>
<option value="TR">Türkiye</option>
</select>
</div>
<div class="col-md-4">
<select class="js-example-basic-single" name="state" id="city"></select>
</div>
<div class="col-md-4">
<select class="js-example-basic-single" name="state" id="district"></select>
</div>
addLoadSpiner
This function use to add or show spinner gif on dropdown. The loading spinner is dynamically created as an html element and added to the dropdown. if already added before, just displayed on screen.
function addLoadSpiner(el) {
debugger;
if (el.length > 0) {
if ($("#img_" + el[0].id).length > 0) {
$("#img_" + el[0].id).css('display', 'block');
}
else {
var img = $('<img class="ddloading">');
img.attr('id', "img_" + el[0].id);
img.attr('src', 'http://www.lettersmarket.com/uploads/lettersmarket/blog/loaders/common_gray/ajax_loader_gray_512.gif');
img.css({ 'display': 'block', 'width': '25px', 'height': '25px', 'z-index': '100', 'float': 'right' });
img.prependTo(el[0].nextElementSibling);
}
el.prop("disabled", true);
}
}
hideLoadSpinner
Add css css('display', 'none') is removed from the screen
function hideLoadSpinner(el) {
if (el.length > 0) {
if ($("#img_" + el[0].id).length > 0) {
setTimeout(function () {
$("#img_" + el[0].id).css('display', 'none');
el.prop("disabled", false);
}, 500);
}
}
}
Load Data With Ajax
Finally , Loading spinner appears on the display until Ajax has finished
$.ajax({
url: "/Home/GetCities",
data: JSON.stringify({
'countryId': $("#country option:selected").val()
}),
type: 'POST',
cache: false,
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (result) {
var dbSelect = $('#city');
addLoadSpiner(dbSelect);
dbSelect.empty();
$.each(result, function (index, item) {
dbSelect.append("<option value='" + item.id + "'>" + item.text + "</option>")
});
hideLoadSpinner(dbSelect);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
}
});
这篇关于单击时选择2(未选择)，显示加载微调器javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
