jquery .attr() class switch not working
I'm working on a web service,
when the user requests more data through ajax, I want the div that will contain the data to show a loading circle. I wrote a css class in the style file for when I want the circle:
.ajax_getTeams_loading{
background:开发者_Go百科 url('ajax-loader.gif') no-repeat center center;
}
So my ajax function is like this:
function(profile, divId){
$('#' + divId).attr('class', 'goose');
/*$.get('testGetTeams.php', {username: profile}, function(data) {
$('#' + divId).html(data);
});*/
}
The problem is that the circle never shows up. I tried simplifying the css class to just background-color:blue, but that didn't even work. I also removed the ajax part entirely, and it still doesn't work at all. What am I doing wrong?
At this point I don't see you adding the "ajax_getTeams_loading" class to the div. However, because it's a background you might not see it if there is data in the div. Then it will just be beneath the text or whatever is in the div.
It might be better to replace whatever is in the div with the loading icon, and then replace the loading icon with the newly requested data. Example:
// store your div object in a variable,
// this is faster since you'll be using it multiple times
var div = $('#' + divId);
// replace the div's content with the loader
// you might want to add a width and height to the css
// to make sure the div is large enough to show the entire loading icon
var loader = '<div class="ajax_getTeams_loading"></div>';
div.html(loader);
$.get('testGetTeams.php', {username: profile}, function(data) {
// replace the loader icon with the requested data
div.html(data);
});Try using
$('#'+divId).removeClass('old_class');
$('#'+divId).addClass('new_class');
It seems you are just setting the wrong class
Your class is ajax_getTeams_loading but you are adding goose. Put the same name and it should be fine.
Also, you might want to look in some jQuery functions:
- addClass
- removeClass
- toggleClass
jQuery has start and stop indicators for AJAX. Since you're using ajax calls, you could try it.
function(profile, divId){
$.ajaxStart(function() {
// add the loading class while ajax is working
$('#loading').addClass("ajax_getTeams_loading");
});
$.ajaxComplete(function() {
// hide the loading div when we're done
$('#loading').hide();
});
// initiate the object sent to the server as a post
var data = {};
data.username = profile;
$.ajax({
url: "testGetTeams.php",
data: data,
type: "POST",
success: function(data){
$('#' + divId).html(data);
}
});
}
Take a note that attr will empty the attribute and replace it with what you pass, so in classes as we can have several of them, if you have, for example:
<div id="ajax_getTeams_loading"
class="classA classB classC">text</div>
and you use
$("#ajax_getTeams_loading").attr("class", "classD");
this will end up having:
text
Which could not be what you want. For this addCLass and removeClass result in a better way to add and remove css classes to the DOM elements in your particular case, you could easily change the way you do thing (not that if does not work, but this is what you find out there the most)
<html>
<head>..</head>
<body>
<div id="ajax-response-wrapper">
<div id="ajax-loading" style="display:none;">
<img src="loading.gif" alt="" /></div>
<ul id="myAjaxPopulatedList"></ul>
</div>
<a id="load" href="javascript:void(0);">Load list from ajax</a>
<script>
$(document).ready( function() {
$("#load").click( function() {
// let's show the loading while we are fetching data
$("#ajax-loading").show();
// get our stuff
$.get('testGetTeams.php', {username: profile}, function(data) {
// we got it, let's hide the loading now
$("#ajax-loading").hide();
// and append the data
$('#myAjaxPopulatedList').append(data);
});
});
});
</script>
</body>
</html>
I hope this helps you get what you want and see how stuff work.
加载中,请稍侯......
精彩评论