Ajax pour sauvegarder les documents [reglé mais pb avec FCKEditor et les accent]

134 Posts

mrcou Reply #1, 20 years, 4 months ago

Bonjour,
lorsque l’on demande à ModX de sauvegarder notre document en ayant cocher "continuer l’édition", le serveur recharge la page et nous perdons l’endroit où nous étions pour l’édition.
J’aimerai (et j’essaie de faire) que dans ce cas l’enregistrement soir effectué en arrière plan avec Ajax, et que la page ne soit donc pas rechargée.
J’ai regardé du côté de mutate_content.dynamic.action.php. Juste avant la form "mutate", j’ai placé :

function getFormValues(fobj){
    var str='';
    for(var i=0;i< fobj.elements.length;i++){
	
		switch(fobj.elements[i].type)
       {
			case "text":
		
 	       str+=fobj.elements[i].name+'='+ escape(fobj.elements[i].value)+'&';
		   break;
		   case "select-one":
		alert(fobj.elements[i].options[fobj.elements[i].selectedIndex].value);
                str += fobj.elements[i].name +"=" + fobj.elements[i].options[fobj.elements[i].selectedIndex].value + "&";
                break;
			default:
			break;
		}
	   //alert(str);
    }
	alert("3");
    str=str.substr(0,(str.length-1));
	alert("hello2");
    return str;
}
function masave(){
alert("hello");
var str = getFormValues(document.mutate);
alert(str);
var myAjax=new Ajax.request( "index.php",{	method: 'post', parameters: str});
//document.mutate.save.click();
}

Puis je change (de manière un peu brutale) le code du boutton 1 qui sert à enregistrer :

<td id="Button1" onclick="documentDirty=false; masave();">

Le code de getFormValues vient de http://www.devarticles.com/c/a/XML/XML-in-the-Browser-Submitting-forms-using-AJAX/5/.
Premier problème : alert("3"); n’est pas atteint.
Second pb : améliorer getFormValues pour qu’elle prenne en charge les boutons radios.
Enfin, faire marcher tout ça ou évidemment trouver une autre solution wink

134 Posts

mrcou Reply #2, 20 years, 3 months ago

J’ai à peu près réussi : pour l’instant je ne peux pas utiliser FCKEditor, mais sinon ça a l’air de marcher (à part les accents).
Tout d’abord on oublie la fonction getFormValues du précédent post et on utilise Form.serialize de protpotype (ne pas oublier de l’inclure

)
Je place la fonction javascript suivante dans mutate_content_dynamic :

function masave(){
if(document.mutate.stay[1].checked){
ggg=Form.serialize(document.mutate);
ggg+="&ajax=true";
var myAjax=new Ajax.Updater("motmpid","index.php",{	method: 'post', parameters: ggg});}
else document.mutate.save.click();
}

puis j’appelle masave() à la place de document.mutate.save.click() avec Button1.
Je place

<div id="motmpid"></div>

juste avant le formulaire (j’aurai ainsi les messages d’erreurs affichés sur ma page).

Maintenant occupons-nous du fichier save_content.processor.
En haut on place :

$ajax=false;
if(isset($_POST['ajax']) && $_POST['ajax']=='true') $ajax=true;

puis on utilise cette variable à la fin du traitement en ajoutant une ligne :

if($ajax){echo "Enregistrement réussi à ".date("H:i:s");exit;}
		header($header);
		break;
    default:
		header("Location: index.php?a=7");
	exit;

Il faudrait trouver un moyen de récupérer le texte dans FCKEditor, avec ma configuration (firefox+WAMP) je n’ai accès qu’à la valeur initiale.
J’ai essayé dans la fonction masave() :

alert($(ta).innerHTML);alert($(ta).value);

134 Posts

mrcou Reply #3, 20 years, 3 months ago

Voici ma solution pour les chunks.
Les fichiers concernés sont mutate_htmlsnippet.dynamic et save_htmlsnippet.processor.
La nouvelle fonction masave():

function masave(){
if(document.mutate.stay[1].checked){
ggg=Form.serialize(document.mutate);
ggg+="&ajax=true&a=79";
var myAjax=new Ajax.Updater("motmpid","index.php",{	method: 'post', parameters: ggg});}
else{ document.mutate.save.click(); saveWait('mutate');}
}

N’oubliez paz d’enlever le saveWait(’mutate’) dans Button1.
Dans save_html, on place

if($ajax){echo "Enregistrement réussi à ".date("H:i:s");exit;}

avant les deux

if($_POST['stay']!='') {

134 Posts

mrcou Reply #4, 20 years, 3 months ago

Le problème avec les accents est un problème d’encodage de la fonction serialize() de prototype.
Voici une solution non satisfaisante (à la main).
il faut ajouter dans masave(), après l’invocation de serialise() :

ggg=ggg.replace(/\%C3\%A0/gi,escape("à"));
ggg=ggg.replace(/\%C3\%A9/gi,escape("é"));
ggg=ggg.replace(/\%C3\%A8/gi,escape("è"));
ggg=ggg.replace(/\%C3\%B9/gi,escape("ù"));
ggg=ggg.replace(/\%C3\%A2/gi,escape("â"));
ggg=ggg.replace(/\%C3\%AA/gi,escape("ê"));
ggg=ggg.replace(/\%C3\%BB/gi,escape("û"));

et de même pour tous les accents voulus.

7,075 Posts

davidm Reply #5, 20 years, 3 months ago

Super intéressant comme modif !

Si tu parles english ça pourrait être bien de poster ça dans Development and Coding > Core Code

Sinon j’attirerai l’attention des codeurs sur ce fil, qu’ils puissent t’aider à finaliser...

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

134 Posts

mrcou Reply #6, 20 years, 3 months ago

Bonjour David,

je ne me sens pas assez à l’aise en anglais. Si tu veux bien en dire deux mots de cette modif sur le forum anglais cela serait sympa.
Correctif : je prends mon courage à deux mains et je fais un post comme tu me l’as indiqué.
C’est fait wink

Cordialement.

134 Posts

mrcou Reply #7, 20 years, 3 months ago

Et voici dans le même style ma solution pour sauvegarder les snippets.
Dans mutate_snippet.dynamic :

function masave(){
if(document.mutate.stay[1].checked){
ggg=Form.serialize(document.mutate);
ggg+="&ajax=true&a=24";
ggg=ggg.replace(/\%C3\%A0/gi,escape("à"));
ggg=ggg.replace(/\%C3\%A9/gi,escape("é"));
ggg=ggg.replace(/\%C3\%A8/gi,escape("è"));
ggg=ggg.replace(/\%C3\%B9/gi,escape("ù"));
ggg=ggg.replace(/\%C3\%A2/gi,escape("â"));
ggg=ggg.replace(/\%C3\%AA/gi,escape("ê"));
ggg=ggg.replace(/\%C3\%BB/gi,escape("û"));
var myAjax=new Ajax.Updater("motmpid","index.php",{	method: 'post', parameters: ggg});}
else{ document.mutate.save.click(); saveWait('mutate');}
}
</script>
<div id="motmpid"></div>

Comme toujours n’oubliez pas d’inclure prototype.js.
Enlevez saveWait(’mutate’); de "Button1".
Pour save_snippet, c’est exactement comme pour save_htmlsnippet.

7,075 Posts

davidm Reply #8, 20 years, 3 months ago

Cool excellent !

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

134 Posts

mrcou Reply #9, 20 years, 3 months ago

Pour garder le focus sur la zone d’édition il suffit de rajouter une ligne :

var myAjax=new Ajax.Updater("motmpid","index.php",{	method: 'post', parameters: ggg});
document.mutate.post.focus();

Pour les documents, cela donne :

var myAjax=new Ajax.Updater("motmpid","index.php",{	method: 'post', parameters: ggg});
document.mutate.ta.focus();

mais bien évidemment ce n’est peut-être pas cette zone d’édition que l’on souhaitais récupérer ...

4 Posts

pepiN Reply #10, 20 years, 3 months ago

Joli code !

Et comment on fait pour récupérer la valeur du textarea de FCKEditor ? car la textarea vient overhidée par une iframe placée par le FCKEditor, et je n’arrive pas à récupérer cette valeur pour mon formulaire ajax.