JQuery Treeview ne fonctionne pas avec Ajax

Je suis nouveau sur JQuery et le développement web en général. J'essaye de charger quelques données d'un fichier XML et de construire une liste non ordonnée. J'ai cette partie de travail, maintenant j'essaye d'utiliser le TreeView plugin afin que je puisse réduire/développer les données. Les données sont chargées comme ceci:JQuery Treeview ne fonctionne pas avec Ajax

$(document).ready(function(){ 
    $.ajax({ 
     type: "GET", 
     url: "solutions.xml", 
     dataType: ($.browser.msie) ? "text" : "xml", 
     success: function(data) { 
      var xml; 
      if (typeof data == "string") { 
       // Work around IE6 lameness 
       xml = new ActiveXObject("Microsoft.XMLDOM"); 
       xml.async = false; 
       xml.loadXML(data); 
      } else { 
       xml = data; 
      } 

      list = "" 
      $(xml).find("Group").each(function() { 
       group = $(this).attr("name"); 
       list += "<li><span>" + group + "</span><ul>"; 

       $(this).find("Solution").each(function() { 
        solution = $(this).attr("name"); 
        list += "<li><span>" + solution + "</span></li>"; 
       }); 

       list += "</ul></li>"; 
      }); 

      $("#groups").html(list);   
     }, 

     error: function(x) { 
      alert("Error processing solutions.xml."); 
     } 
    }); 

    $("#groups").treeview({ 
     toggle: function() { 
      console.log("%s was toggled.", $(this).find(">span").text()); 
     } 
    }); 
});

et le code HTML ressemble à ceci:

<html> 
    ... 
    <body> 
    <ul id="groups"> 
    </ul> 
    </body> 
</html>

La liste non ordonnée montre correctement, mais le petit [+] et [-] signes ne montrent pas et les sections ne sont pas pliables/extensibles. Si je me débarrasse de mon chargement Ajax et insère une liste non ordonnée à l'intérieur de #groups manuellement cela fonctionne comme prévu.

Qu'est-ce que je fais mal? Y a-t-il d'autres plugins ou libs Javascript qui pourraient rendre cela plus facile? La solution doit fonctionner localement sur IE6 (c'est-à-dire serveur Web).

Mise à jour: J'ai trouvé un travail autour: Si je définis mes trucs TreeView comme cela, il fonctionne:

function makeTreeview() { 
    $("#container").treeview({ 
     toggle: function() { 
      console.log("%s was toggled.", $(this).find(">span").text()); 
     } 
    }); 
} 
setTimeout('makeTreeview();', 50);

Je pense que le problème est, quand je crée le TreeView, les choses ajax hasn » t fait son travail encore, donc quand treeview() est appelé, la liste non ordonnée n'a pas encore été créée. Je n'ai pas encore testé cela avec IE6. Existe-t-il une meilleure façon de faire cela, sans utiliser SetTimeout()?

Source

2009-04-20 Mark A. Nicolosi

J'ai fait le même type d'appel pour un autre projet. Pour d'autres raisons, vous voudrez probablement envelopper votre appel ajax dans une fonction anonyme pour créer une fermeture afin que vos variables restent ce que vous attendez d'elles ...La méthode de succès est une fonction de rappel qui se produit après la fin de votre appel, créez simplement votre vue arborescente à l'intérieur de cette méthode, ou décompressez-la en une action séparée si nécessaire pour plus de clarté.

dans votre exemple - votre vue arborescente échouera toujours si l'appel ajax prend plus de 50 ms - ce qui pourrait facilement se produire lors du chargement initial si plus de deux objets sont chargés depuis ce même serveur.

Cet exemple utilisait JSON et les données html chargées simultanément à partir d'une méthode de page dans une série de divs.

$(document).ready(function() { 
for (i= 1;i<=4;i++) 
{ 
(function(){ 
    var divname ="#queuediv"+i; 

    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     url: "test12.aspx/GetHtmlTest", 
     data: "{}", 
     error: function(xhr, status, error) { 
      alert("AJAX Error!"); 
     }, 
     success: function(msg) { 
     $(divname).removeClass('isequeue_updating'); 
     $(divname).html(msg); 
     $("#somethingfromthemsg").treeview(); 
     } 
    }); 
})(); 
} 
});

Hope that helps!

Source

2009-04-22 05:07:47 Jim

Merci Jim, ça ressemble à ce que je cherche. Au sujet des 50ms, j'ai dû augmenter cela quand j'ai testé dans IE6, en raison de sa nature lente. Je vais tester cela demain et marquer votre réponse comme correcte, si cela fonctionne. –

Vous devez obtenir FireBug (complément Firefox), puis vous pouvez voir dans la console ce qui est retourné, et assurez-vous qu'il correspond à ce que vous attendez (et qu'il est en train de faire la demande ..). Une fois que vous l'aurez mis en œuvre dans FF, vous pourrez prendre en charge l'ancien navigateur IE6 vieux de 10 ans.

Il y a aussi d'autres choses que vous pourriez envisager:

L'ensemble ActiveXObject (« Microsoft.XMLDOM ») saute comme moi inutile. Si vous passez XML dans une chaîne à $(), jQuery le transforme en un objet DOM.

De plus, .Find peut être remplacé par:

$('Element', this);

Ainsi, par exemple:

var xmlDoc = '<Group><Solution name="foo" /><Solution name="bar" /></Group>'; 
$('Solution', xmlDoc).each(function() { 
    document.write($(this).attr('name')); 
});

crachait:

foo 
bar

En outre, avec Firebug, coller une console .log (liste); à la fin, pour être sûr que vous générez le code HTML que vous pensez être. Si vous êtes vraiment coincé dans IE6, alert (list) fonctionne un peu comme l'équivalent d'un pauvre (tant que votre fichier n'est pas trop gros).

En bref, je pense que vous êtes sur la bonne voie, vous avez juste besoin des outils pour déboguer correctement.

Source

2009-04-21 03:55:39 gregmac

Merci pour les suggestions. Les trucs XML fonctionnent bien, je n'arrive pas à faire fonctionner le plugin Treeview avec lui. –

Pour tous ceux qui trouvent également leur chemin à ce poste. J'ai eu ce problème avec un appel ajax.

Si vous souhaitez attendre que l'appel ajax soit renvoyé, vous devez définir async comme faux.

$.ajax({ 
type: 'POST', 
async: false, 
........

Source

2011-02-09 14:34:15 Shannow

JQuery Treeview ne fonctionne pas avec Ajax

Répondre

Questions connexes