ansaurus

Question

jquery .attr() class switch not working....

Answer 1

A:

Try using

$('#'+divId).removeClass('old_class');
$('#'+divId).addClass('new_class');

Claudiu 2010-10-10 16:21:42

I already tried that, doesn't work.

Alex 2010-10-10 16:22:51

Could you provide a link to the example or maybe a snippet of the HTML code?

Claudiu 2010-10-10 16:29:12

Remove the `.` from the strings.

SLaks 2010-10-10 16:29:22

Oups, sorry, edited

Claudiu 2010-10-10 16:37:38

Answer 2

A:

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);
});

Alec 2010-10-10 16:25:14

Lol, the reason was because I never specified any height or width for the div, so it only took shape when populated with data. Thanks!

Alex 2010-10-11 14:38:19

Answer 3

A:

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:

BrunoLM 2010-10-10 16:36:12

Answer 4

A:

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

witch could not be what you want. For this àddCLassandremoveClass` 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( fcuntion() {
            // 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

balexandre 2010-10-10 16:42:53

Answer 5

A:

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);
       }
});

}

Stefan Konno 2010-10-11 12:36:51

ansaurus

tags:

views:

answers:

jquery .attr() class switch not working....

related questions