</div>
</div>
</div>
<hr class="my12 outline-none baw0 bb bc-powder-2">
<div class="grid fw-nowrap fc-black-600">
<div class="grid--cell mr8">
<svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
</div>
<div class="grid--cell lh-md">
<p class="mb0">
<b>Want to improve this question?</b> Update the question so it focuses on one problem only by <a href="/posts/31213649/edit">editing this post</a>.
</p>
<p class="mb0 mt6">Closed <span title="2015-07-04 13:18:21Z" class="relativetime">4 years ago</span>.</p>
</div>
</div>
</aside>
I'm searching for visual animation during an AJAX call. But I want an animation on a select html tag, not on the whole page.
Is this possible to do?
Thanks.
</div>
You can use jQuery ajaxStart and ajaxStop handlers to make something during AJAX.
$( document ).ajaxStart(function() {
$(".preloader").show();
});
not inside the select tag but the animation can be placed near by to the it. I do such animations like that.. ..
and this is the js:
$(document).ready(function(){
$('#refresh').click(function(){
//show the animation here
$('#animation_place').html("<img src='loading_anim.gif'/>");
$.ajax({
//write your url and type and the othre things here..
success:function(data){
//Bind the select tag with the new data
$('#animation_place').html(""); //clear the animation..
}
});
});
});
If I were to do this I would use CSS to create a helper class to show and hide the ajax loader (either as a background-image or as an icon). Then I would set that class before my ajax call then remove it on the callback.
Here is a demo of what I am talking about (I will use Font Awesome for the ajax loader).
HTML
<button>Submit<i class="fa fa-circle-o-notch fa-spin"></i></button>
CSS
button{
position:relative;
padding:6px 32px;
border:0;
background:#42c827;
color:#fff;
}
button i{
position:absolute;
top:7px;
right:8px;
opacity:0;
}
button.busy i{
opacity:1;
}
JavaScript
$(function(){
$('button').on('click', function(e){
e.preventDefault();
var btn = $(this);
btn.addClass('busy');
//simulate ajax call
setTimeout(function(){
btn.removeClass('busy');
}, 2000);
});
});
See it in action in this Fiddle.
UPDATE
For a <select> tag the markup is a bit different but the idea is the same. Instead you place the loader next to the <select> instead of inside it and give them an outer wrapper.
See this Fiddle for a demo using a <select> tag.