Forum > PHP > [Ajax] Prévisualiser avant d'enregistrer

[Ajax] Prévisualiser avant d'enregistrer

ok Le problème posé sur ce sujet a été résolu.
avatar de Chopin
Membre
# Le 23/08/2009 à 21h25
Salut à tous!

J'ai un petit souci pour utiliser de l'ajax afin de réaliser une prévisualisation d'avant poste. Pour le moment j'ai réussi à faire en sorte que lorsque l'on clique sur un bouton "Prévisualisation" qu'un fichier .txt contenant le texte formaté avec le BBcode de la prévisualisation soit automatiquement créer. Le plus dur est fait me direz-vous, et bien non. Du moins, pas pour moi car je suis en mode galère pour faire en sorte que dans le même instant le contenu du fichier soit récupéré et afficher dans la page.

Pour faire simple, voici déjà la page contenant l'ajax:
  1.  
  2. function getXMLHttpRequest()
  3. {
  4. var xhr = null;
  5.  
  6. if (window.XMLHttpRequest || window.ActiveXObject)
  7. {
  8. if (window.ActiveXObject)
  9. {
  10. try
  11. {
  12. xhr = new ActiveXObject("Msxml2.XMLHTTP");
  13. }
  14. catch(e)
  15. {
  16. xhr = new ActiveXObject("Microsoft.XMLHTTP");
  17. }
  18. }
  19. else
  20. {
  21. xhr = new XMLHttpRequest();
  22. }
  23. }
  24. else
  25. {
  26. alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
  27. return null;
  28. }
  29.  
  30. return xhr;
  31. }



Voici le javascript qui crée le fichier:
  1.  
  2. function previsualisation()
  3. {
  4.  
  5. message = document.getElementById("script_desc_longue").value;
  6.  
  7. var xhr = getXMLHttpRequest();
  8.  
  9. xhr.open("POST", "ajax/previsualisation.php", true);
  10. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  11. xhr.send("msg="+message+"");
  12. }



Et enfin, voici le contenu HTML:
  1.  
  2. <div align="center">
  3.  
  4. <FORM name="ajax" method="POST" action="">
  5. <p>
  6. <textarea id="script_desc_longue" name="script_desc_longue" rows="10" cols="40"></textarea>
  7. <br />
  8. <INPUT type="submit" value="Envoyer">
  9. <INPUT type="button" value="Prévisualisation" onclick="previsualisation();">
  10. </p>
  11. </FORM>
  12.  
  13. </div>
  14.  
  15. <div id="previsualisation"></div>



Au début, je pensais utiliser ça mais sans succès.
  1.  
  2. xhr.open("GET", "ajax/previsualisation.txt", true);
  3. xhr.onreadystatechange=function()
  4. {
  5. if(xhr.readyState == 4)
  6. {
  7. document.getElementById("zone").innerHTML= xhr.responseText;
  8. }
  9. };
  10.  
  11. xhr.send(null);



Voila voila, j'espère vraiment que quelqu'un saura m'aider car là je suis complétement perdu. J'ai l'impression d'avoir tout essayé.

Merci par avance!
avatar de stc
Membre
# Le 25/08/2009 à 19h22
Salut .
  1. xhr=null;
  2. xhr=getXMLHttpRequest();
  3. datas="msg="+message;
  4. sendReq(xhr,'ajax/previsualisation.php');
  5. //
  6. function sendReq(objReq,file) {
  7. objReq.open('POST',file,true);
  8. objReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  9. objReq.onreadystatechange=treat_response;
  10. objReq.send(datas);
  11. }
  12. function treat_response() {
  13. if(xhr.readyState==4) {
  14. document.getElementById("zone").innerHTML= xhr.responseText;
  15. }
  16. }

J'avoue je suis pas un spécialiste mais ça devrait marcher.
Une fois j'ai cherché un bug javascript pendant 1 heure et ça venait de la déclaration de la variable (qui n'était pas globale): donc penser a ça aussi.

J'espère que ça va marcher (mets des alert('ok'); a chaque étapes pour mieux voir ou se situe le bug.
avatar de Chopin
Membre
# Le 26/08/2009 à 12h03
Salut STC et merci de m'avoir répondu!

En faite, entre temps j'ai trouvé la solution. J'ai opté pour ça:
  1. function affiche_previsualisation(callback)
  2. {
  3. var xhr = getXMLHttpRequest();
  4. message = encodeURIComponent(document.getElementById("script_desc_longue").value);
  5.  
  6. xhr.onreadystatechange = function()
  7. {
  8. if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
  9. {
  10. callback(xhr.responseText);
  11. }
  12. };
  13.  
  14. xhr.open("POST", "ajax/previsualisation.php", true);
  15. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  16. xhr.send("msg="+message+"");
  17.  
  18. }
  19.  
  20. function readData(sData)
  21. {
  22. document.getElementById("previsualisation_corp").innerHTML = sData;
  23. document.getElementById('previsualisation').style.display="block";
  24. }


La page "previsualisation.php" applique mon BBcode au contenu du poste et toujours dans la même page j'utilise un simple echo.

Voila :)