11548 sujets

JavaScript, DOM et API Web HTML5

[JQuery - Ajax]Disparition des balises head et body avec .html()

Bonjour,

Comme le titre l'indique j'ai un souci avec la fonction html() de jquery. J'ai créé une page (index.html) qui va appeler une autre page (page.php) en utilisant la fonction $.ajax() de JQuery. Cela fonctionne très bien.

Je prends le texte retourné par page.php et l'utilise afin de remplacer ce qui se trouve dans index.html, grâce à la fonction .html() ("$(html).html(msg_page)"). C'est ici que ça se corse, lorsque j'analyse le code avec Firebug les balises <head> et <body> ont tout simplement disparus. En utilisant .text() à la place de .html(), afin d'avoir le texte brut, les balises sont bien là.

Du coup j'ai une page tout moche (sans <body> le css a un peu de mal) et non conforme Smiley confus .

Voici le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">   
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      var page_html = $.ajax({
                          type : "POST",
                          async: false,
                          url : "page.php",
                          data : "lng=fr",
                          success : alert("youhou!"),
                          error : function(xhr) { alert(xhr.status);},
                        }).responseText;
      $("html").html(page_html);
    });
  </script>
</html>


D'où cela peut-il venir ? J'ai testé ça sous Firefox 3.0, 3.5.2pre, Opéra 10 beta et la dernière build de Chromium, sans succès.
Modifié par kurt11 (26 Jul 2009 - 20:04)
Je crois que c'est parce que la fonction html() se contente de charger uniquement ce qui se trouve dasn un fichier html mais je ne suis pas sur.

Quoi qu'il en soit, pourquoi n'utilises-tu pas la fonction load() ?

Pour finir, on m'a toujours répété qu'il était pas forcément bon de charger une page entière par ces fonction mais seulement des fragments. Smiley smile

Bon courage.
Sébastien.
Modifié par Sebastien_91 (26 Jul 2009 - 21:54)
Sebastien_91 a écrit :
Je crois que c'est parce que la fonction html() se contente de charger uniquement ce qui se trouve dasn un fichier html mais je ne suis pas sur.

Quoi qu'il en soit, pourquoi n'utilises-tu pas la fonction load() ?


Je viens d'essayer et j'ai le même résultat. Je relirai la doc en profondeur demain je pense ou bien je trouverai un autre moyen pour faire ce dont j'ai envie (gestion de différentes langues).

Sebastien_91 a écrit :
Pour finir, on m'a toujours répété qu'il était pas forcément bon de charger une page entière par ces fonction mais seulement des fragments. Smiley smile


Tout à fait d'accord, pour un site complet il faut fragmenter son code au maximum. Mais là c'est juste pour une page seule donc je n'avais pas vraiment envie de me prendre la tête avec ça.

Sebastien_91 a écrit :

Bon courage.
Sébastien.


Merci.
Salut,

L'intérêt d'Ajax, c'est de pouvoir ajouter/actualiser des morceaux de page sans perdre de temps avec les parties qui ne changent pas. Si c'est pour remplacer tout le code de la page, Ajax n'a, à mon humble avis, aucun intérêt par rapport à un changement "normal" de page (par le navigateur).

En tout cas, pour jQuery.html() et autres méthodes de génération d'éléments à partir d'une chaine, si ça ne marche pas c'est parce qu'en coulisses, cette génération se fait en injectant la chaine en tant qu'innerHTML d'une div (et en récupérant les enfants après). Et tenter d'insérer des <html>, <head> et autres <body> dans une div, ça a peu de chances de fonctionner... Faudrait peut-être essayer avec $("html")[0].innerHTML(chaine), mais je ne serais pas surpris si ça marchait aussi de travers, toujours pour la même raison : on a jamais rarement (jamais ?) besoin de faire ça, il suffit de changer de page de manière conventionnelle.
Salut,

Oui, je suis tout a fait d'accord avec toi concernant Ajax. Je voulais juste changer la langue d'une page sans trop me prendre la tête et en utilisant les effets que JQuery nous offre.

Ok, ça m'avait traverser l'esprit que cela pouvait venir de JQuery. J'ai essayer $("html")[0].innerHTML(chaine), mais ça ne fonctionne pas.
Je vais voir du côté de PHP en utilisant deux fichiers "langues" différents.

En tout cas merci.
Changer la langue d'une page? Tu veux dire remplacer la page courante par la même dans une autre langue ou changer l'attribut lang=""?

Si c'est la première idée ce n'est pas vraiment la bonne méthode, il est inutile de faire ce genre de chose en javascript, tu pourrais faire par exemple comme wikipedia avec un sous-domaine par langue et sur chaque article un lien vers le même sujet dans une autre langue. Nul besoin de javascript pour faire ça, de plus on évite les problèmes de mise en signets des pages et les mauvais référencements. Smiley cligne
Sujet clos
Aller à