Bonjour à tous,

j'ai réaliser un site avec une en-tête contenant une musique, je voudrais, que la musique ne s'actualise pas à chaque changement de page. Sachant que chaque page de mon site génère un include pour seulement changer le corps, je voudrais savoir les étapes à suivre pour empêcher la musique de s'actualiser ou alors, actualiser seulement le corps à chaque changement de page. Je ne connais presque rien en JS, je voudrais qu'on... bien, me mâche le travail ou m'envoyer un lien clair et limpide comme de l'eau de roche .

Voir le site pour visualiser toute les solutions possibles à mon problème.

J'ai entendu parler d'AJAX et de XMLHttpRequest mais je ne sais pas du tout m'en servir et j'ai déjà réussi avec les frames mais cette fonction attire les foudres.

En espérant être assez clair, merci d'avance .

Hello

En effet, AJAX permettrait de charger diverses informations sur ta page sans recharger la partie qui t'intéresse.

XmlHttpRequest est en fait l'objet qui sert à effectuer un transfert AJAX.

C'est bien de lire le tuto pour comprendre comment ça fonctionne et toutes les possibilités qu'il offre, mais une fois que tu as bien compris, tu peux utiliser un framework qui "simplifie" ce transfert.

Si tu ne veux pas te casser la tête, il y a une autre solution : lancer ta musique dans une toute petite pop-up.

A toi de voir ce que tu préfères.

Enjoy.

Ca m'a l'air trop compliqué pour moi qui ne connait que le PHP mais pas le JS, je pense que la pop-up sera la meilleure solution, à moins que quelqu'un aie un exemple concret à me donner avec XmlHttpRequest. Je réussi toujours mieux avec des exemples.

Tu peux faire un truc assez simple comme ceci :

<button onclick="getPage('test.php');">Yop</button>
<div id="conteneur"></div>



<script>
function getPage(url,meth,data,conteneur) {
  var meth = meth||"GET";
  var data = data||{};
  var conteneur = conteneur||"conteneur";
  if(typeof conteneur=="string") {
    conteneur = document.getElementById(conteneur);
  }
  
  var str_data = "";
  for(var p in data) {
    str_data += p+"="+data[p]+"&";
  }
  str_data = str_data.substring(0,str_data.length-1);
  
  var xhr = null;
    
  if (window.XMLHttpRequest || window.ActiveXObject) {
    if (window.ActiveXObject) {
      try {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
    } else {
      xhr = new XMLHttpRequest(); 
    }
  } else {
    alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
    return;
  }
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
      conteneur.innerHTML = xhr.responseText;
    }
  };
  
  xhr.open(meth,url+(meth=="GET"?"?"+str_data:""),true);
  
  if(meth=="POST") {
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(str_data);
  } else {
    xhr.send(null);
  }

}
</script>

Le clic sur le bouton va charger la page "test.php" dans le div "conteneur".

Le principe consistera à mettre tout ton site dans le "conteneur", et ta musique en dehors.

Les paramètre optionnels de la fonction peuvent normalement te permettre de changer la méthode de requête, les données éventuels de la requête, ou encore le div conteneur. (J'avoue ne pas avoir tester par contre J'ai pas le temps, je file en cours )

Tu dors jamais Golmote ?

Je me dis que tant qu'à faire comme ça, autant faire des frames, c'est plus simple, non ?

Citation : birdy42

Tu dors jamais Golmote ?

Si, environ un jour sur deux, entre 12h et 19h.


Oui, les frames sont sans doute plus simple. Mais bon, je propose quand même le code de la solution Ajax

Les frames sont aussi dans le tuto AJAX

J'ai compris en fait, tu dors en cours

Bah si j'anticipe je rentre chez moi. C'est quand même plus agréable de dormir dans un lit !

Merci beaucoup Golmote c'est ça que je voulais mais, comment envoyer un GET avec le bouton ? Car le corps de mon site change en fonction du GET page. Exemple : index.php?page=photoshop
Voilà merci de me répondre si cela est possible

window.location.search = 'machin=truc&bidule=chouette';

Euh birdy... je crois qu'il veut dire "avec la fonction getPage()"

@Tetdoss : Normalement tu as deux possibilités.

Soit tu fais getPage("index.php?page=photoshop")

Soit explicitement getPage("index.php","GET",{page:"photoshop"})

Ah, j'ai pensé pour récupérer au raffraichissement ... sinon tu reviens à la page de base.

Regardez j'ai réussi Merci !

Mettez la musique et baladez-vous dans les menus du Batch seulement.

http://tetdoss.eg2.fr/index.php

Mais dans le menu du Batch, vous voyez le QCM ? C'est un formulaire en POST, je bloque...

Il te faut une fonction supplémentaire.

Tiens :

function getPage(url,meth,data,conteneur) {
  var meth = meth||"GET";
  var data = data||{};
  var conteneur = conteneur||"conteneur";
  if(typeof conteneur=="string") {
    conteneur = document.getElementById(conteneur);
  }
  
  var str_data = "";
  for(var p in data) {
    if(data[p] instanceof Array) {
      for(var i=0;i<data[p].length;i++) {
        str_data += p+"="+data[p][i]+"&";
      }
    } else {
      str_data += p+"="+data[p]+"&";
    }
  }
  str_data = str_data.substring(0,str_data.length-1);
  
  var xhr = null;
    
  if (window.XMLHttpRequest || window.ActiveXObject) {
    if (window.ActiveXObject) {
      try {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
    } else {
      xhr = new XMLHttpRequest(); 
    }
  } else {
    alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
    return;
  }
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
      conteneur.innerHTML = xhr.responseText;
    }
  };
  
  xhr.open(meth,url+(meth=="GET"?"?"+str_data:""),true);
  
  if(meth=="POST") {
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(str_data);
  } else {
    xhr.send(null);
  }

}
function submitForm(form,url,meth,conteneur) {
  var url = url || form.action;
  var meth = meth || form.method || "POST";
  var els = form.elements;
  var data = {};
  for(var i=0;i<els.length;i++) {
    if(els[i].name!="") {
      var name = els[i].name;
      if(els[i].type=="checkbox") {
        if(els[i].checked) {
          if(!data[name]) { data[name] = []; }
          data[name].push(els[i].value);
        }
      } else if(els[i].type=="radio") {
        if(els[i].checked) {
          data[name] = els[i].value;
        }
      } else {
        data[name] = els[i].value;
      }
    }
  }
  getPage(url,meth,data,conteneur);
  return false;
}

J'ai remis la première (que j'ai légèrement modifiée) et la nouvelle.

L'utilisation basique consiste à faire ça :
<form action="url_de_destination" method="POST" onsubmit="return submitForm(this);">

Attention, tu es obligé de préciser la valeur de l'attribut action (ou de préciser le deuxième paramètre de la fonction).

La vache, un grand merci pour Golmote pour tes deux codes JS, MERCI MERCI ! Exactement ce que je voulais Sur ce, je résolve le sujet

Je relance je sujet car j'ai une erreur qui me tracasse :s tous les accents des pages à générées se transforment en point d'interrogation !
Comment les remettre normales sans les modifier un par un...

Convertir en UTF-8 (sans BOM), enfin c'est un problème d'encodage

Oui mais c'est au niveau de la BDD que ça merde... Depuis les formulaires générés par XLMHTTPREQUEST, j'ai que des caractères spéciaux dans la BDD... Comment faire pour enregistrer correctement oO

PS : Bonjour birdy

utf8_encode / decode en PHP ?

Ca marche avec le decode oO, j'avais déjà essayé avec le encode mais jamais avec le decode x) Bizarre merci
Un autre truc bizarre, les formulaires en POST des pages générées ne fonctionnent pas sur IE mais fonctionnent parfaitement sur Mozilla ! Help !

Dois-je poster un nouveau post ?
Les formulaires des pages générées avec JavaScript fonctionnent seulement avec Firefox, j'ai testé sur IE et ça ne marche pas, j'ai même un ami qui a Firefox et qui ne peut pas utiliser les formulaires.

Je ne vois pas bien pourquoi ça ne fonctionnerait pas...

IE et le cache, je te laisse expliquer ( pas le temps là) pour AJAX

Heu, il faut vider le cache d'IE pour faire fonctionner le formulaire ou alors j'ai rien compris (ce qui est fort probable).

Citation : birdy42

IE et le cache, je te laisse expliquer ( pas le temps là) pour AJAX

Hm... je n'étais pas au courant de ça.

Mais je suppose donc que le problème (et sa solution) doivent être exposés ici :

http://zefredz.frimouvy.org/dotclear/i [...] leme-de-cache

Je dois vider le cache par l'intermédiaire de PHP en insérant ce code sur la page d'accueil (et l'actualise) et ensuite je le supprime si j'ai tout compris ?

Il faut que tu places le code donné dans toutes tes pages chargée via Ajax je pense... Mais que tu le places et que tu le laisses là

J'aimerais quand même que quelqu'un confirme, svp... birdy ?

Marche pas

La connerie avec Math.random après le chargement des pages là, tu sais ?

Heu ? Moi non