commutateur de classe jquery .attr() ne fonctionne pas

Je travaille sur un service Web,commutateur de classe jquery .attr() ne fonctionne pas

lorsque l'utilisateur demande plus de données par ajax, je veux la div qui contiendra les données à afficher un cercle de chargement. J'ai écrit une classe CSS dans le fichier de style pour quand je veux le cercle:

.ajax_getTeams_loading{ 

background: url('ajax-loader.gif') no-repeat center center; 

}

donc ma fonction ajax est comme ceci:

 function(profile, divId){ 



    $('#' + divId).attr('class', 'goose'); 


    /*$.get('testGetTeams.php', {username: profile}, function(data) { 
     $('#' + divId).html(data); 
    });*/ 

}

Le problème est que le cercle ne se présente jamais. J'ai essayé de simplifier la classe css juste en background-color: blue, mais ça n'a même pas marché. J'ai également supprimé la partie ajax entièrement, et cela ne fonctionne toujours pas du tout. Qu'est-ce que je fais mal?

Source

2010-10-10 Alex

Vous devriez probablement utiliser addClass() et removeClass() au lieu de attr(). Mais je doute que ce soit le problème. Peut-être que plus de contexte (exemple minimal incluant le HTML?) Pourrait aider à identifier ce qui ne va pas. – igorw

Qu'est-ce que "goose"? – Pointy

Votre classe est 'ajax_getTeams_loading' mais vous ajoutez' goose'. Je ne suis pas. – BrunoLM

À ce stade, je ne vous vois pas d'ajouter la classe « ajax_getTeams_loading » à la div. Cependant, comme il s'agit d'un background, vous risquez de ne pas le voir s'il y a des données dans le div. Alors ce sera juste sous le texte ou quoi que ce soit dans la div.

Il peut être préférable de remplacer tout ce qui se trouve dans la div par l'icône de chargement, puis de remplacer l'icône de chargement par les données nouvellement demandées. Exemple:

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

Source

2010-10-10 16:25:14 Alec

Lol, la raison était parce que je n'ai jamais spécifié de hauteur ou de largeur pour la div, donc il a seulement pris forme lorsqu'il est peuplé avec des données. Merci! – Alex

Essayez d'utiliser

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

Source

2010-10-10 16:21:42 Claudiu

J'ai déjà essayé ça, ça ne marche pas. – Alex

Pourriez-vous fournir un lien vers l'exemple ou peut-être un extrait du code HTML? – Claudiu

Supprimez le '.' des chaînes. – SLaks

Il semble que vous mettez juste la mauvaise classe

Votre classe est ajax_getTeams_loading mais vous ajoutez goose. Mettez le même nom et ça devrait aller.

En outre, vous voudrez peut-être regarder dans certaines fonctions jQuery:

Source

2010-10-10 16:36:12 BrunoLM

prendre note que attr videra l'attribut et le remplacer par ce que vous passez, donc dans les classes que nous pouvons avoir plusieurs d'entre eux, si vous avez, par exemple

<div id="ajax_getTeams_loading" 
    class="classA classB classC">text</div>

et que vous utilisez

$("#ajax_getTeams_loading").attr("class", "classD");

cela va finir par avoir:

texte

sorcière ne pouvait pas être ce que vous voulez.Pour ce àddCLass and removeClass 'résultat d'une meilleure façon d'ajouter et supprimer des classes css aux éléments DOM

dans votre cas particulier, vous pouvez facilement changer la façon dont vous faites chose (pas si cela ne fonctionne pas, mais c'est ce que vous trouvez là-bas le plus)

<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>

J'espère que cela vous aide à obtenir ce que vous voulez et voir comment le travail des choses

Source

2010-10-10 16:42:53 balexandre

jQuery a démarrer et arrêter des indicateurs pour AJAX. Puisque vous utilisez des appels ajax, vous pouvez l'essayer.

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

}

Source

2010-10-11 12:36:51

commutateur de classe jquery .attr() ne fonctionne pas

Répondre

Questions connexes