Sortable.create & Ajax.InPlaceEditor

Résolu
cs_canibale Messages postés 33 Date d'inscription mardi 23 mai 2006 Statut Membre Dernière intervention 28 février 2009 - 9 juin 2007 à 22:06
boulika Messages postés 58 Date d'inscription lundi 11 novembre 2002 Statut Membre Dernière intervention 30 octobre 2009 - 12 oct. 2007 à 16:33
Bonsoir, J'ai malheureusement deux petits problèmes avec Script.Aculo.us :(
 commençons par le premier ;)

Sortable.create et Sortable.serialize
    Soit deux pages : Pagea.php & Pageb.php
    Pagea.php ayant comme valeur (HTML & Javascript) :
<hr size= "2" width="100%" />   

        <fieldset id="text1"><legend>Text1</legend>

        </fieldset>
        <fieldset id="text2"><legend>Text2</legend>

        </fieldset>
        <fieldset id="text3"><legend>Text3</legend>

        </fieldset>
        <fieldset id="text4"><legend>Text4</legend>

        </fieldset>
        <fieldset id="text5"><legend>Text5</legend>

        </fieldset>
   

    <script type="text/javascript" language="javascript">
     // <![CDATA[
        function Updateordre() {
         new Ajax.Request('Pageb.php', {method:'post',postBody:Sortable.serialize('conteneur', {tag:'fieldset',name:'fieldsetp'})});
         }
Sortable.create('conteneur',{tag:'fieldset',overlap:'vertical',constraint:'vertical',onUpdate:Updateordre});
       // ]]>
     </script>
<hr size="2" width="100%" />    Voila donc la Pagea est censée envoyer une requete contenant l'ordre des fieldset par une requete     XMLHttpRequest vers la Pageb seulement... rien ne se passe :s (Firebug ne trouve aucune erreur     mais ne détecte aucune requete, de plus ma pageb doit mettre a jour un champ dans une base de     donnée et ce dernier ne se met pas a jour (donc je sais qu'aucune donnée n'est transmise)

Ajax.InPlaceEditor et lui tout seul ;p
    Reprenons nos pages a et b plus haut et apportons leur des modifications ;)
    Pagea.php ayant comme valeur (HTML & Javascript) :
<hr size ="2" width="100%" />   

        <fieldset id="text1"><legend>Text1</legend>
       
Text modifiable :)


        </fieldset>
        <fieldset id="text2"><legend>Text2</legend>
       
Text modifiable :)


        </fieldset>
        <fieldset id="text3"><legend>Text3</legend>
       
Text modifiable :)


        </fieldset>
        <fieldset id="text4"><legend>Text4</legend>
       
Text modifiable :)


        </fieldset>
        <fieldset id="text5"><legend>Text5</legend>
       
Text modifiable :)


        </fieldset>
   

    <script type="text/javascript" language="javascript">
       // <![CDATA[
        new
Ajax.InPlaceEditor('textm'1,
'pageb.php?id='1,{okButton:true,okText:'Sauver',cancelLink:true,cancelText:'Annuler',savingText:'Sauvegarde
en cours, Merci de patienter !',clickToEditText:'Clic pour éditer
!',rows:10,cols:90,loadingText:'Chargement du nouveau
contenu',paramName:1,ajaxOptions:{method:'post',postBody:'var1='+???+''}}));
        new Ajax.InPlaceEditor('textm'2,
'pageb.php?id='2,{okButton:true,okText:'Sauver',cancelLink:true,cancelText:'Annuler',savingText:'Sauvegarde
en cours, Merci de patienter !',clickToEditText:'Clic pour éditer
!',rows:10,cols:90,loadingText:'Chargement du nouveau
contenu',paramName:2,ajaxOptions:{method:'post',postBody:'var2='+???+''}}));

        new Ajax.InPlaceEditor('textm'3,
'pageb.php?id='3,{okButton:true,okText:'Sauver',cancelLink:true,cancelText:'Annuler',savingText:'Sauvegarde
en cours, Merci de patienter !',clickToEditText:'Clic pour éditer
!',rows:10,cols:90,loadingText:'Chargement du nouveau
contenu',paramName:3,ajaxOptions:{method:'post',postBody:'var3='+???+''}}));

        new Ajax.InPlaceEditor('textm'4,
'pageb.php?id='4,{okButton:true,okText:'Sauver',cancelLink:true,cancelText:'Annuler',savingText:'Sauvegarde
en cours, Merci de patienter !',clickToEditText:'Clic pour éditer
!',rows:10,cols:90,loadingText:'Chargement du nouveau
contenu',paramName:4,ajaxOptions:{method:'post',postBody:'var4='+???+''}}));

         new Ajax.InPlaceEditor('textm'5,
'pageb.php?id='5,{okButton:true,okText:'Sauver',cancelLink:true,cancelText:'Annuler',savingText:'Sauvegarde
en cours, Merci de patienter !',clickToEditText:'Clic pour éditer
!',rows:10,cols:90,loadingText:'Chargement du nouveau
contenu',paramName:5,ajaxOptions:{method:'post',postBody:'var5='+???+''}}));
       // ]]>
     </script>
<hr size="2" width="100%" />    Comment puis-je faire pour que, comme précédement, je donne la main à php en lui  transferent         deux choses :
<li>En GET le numéro du champ ( de 1 a 5)</li><li>En POST le contenu du textarea d'edition (varX ou x est compris entre 1 et 5)</li>     Merci d'avoir lu jusqu'au bout :)
Bonne soirée !

3 réponses

cs_canibale Messages postés 33 Date d'inscription mardi 23 mai 2006 Statut Membre Dernière intervention 28 février 2009
14 juin 2007 à 21:44
Bonsoir, J'ai déjà ce qui faut pour débugger avec firefox ;p
Probleme number one Corrigé ;) J'avais fait :
function Updateordre() {
//requete AJAX
}
function Updateordre() {
//Au lieu de UpdateText... sa me remet ma fonction a 0 et n'éffectue rien, voila pourquoi je n'avais aucun problème dans ma console !
}

Problème number two Corrigé grace à http://scriptaculous.le-developpeur-web.com/scriptaculous.demo.php

Tout de même un grand merci à vous !
3
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
14 juin 2007 à 10:14
Bonjour,

suite au Message Privé, je viens regarder et ... ça me semble normal
    que peu de réponses soient parvenues :

    si tu n'as pas d'erreurs de syntaxe c'est que probablement
        tu ne respecte pas celle des appels aux fonctions de Script.Aculo.us.

    il faudrait donc que je récupère ce script, regardes les fonctions appelées,
       contrôle comment toi tu t'en sert... ( c'est trop d'efforts et pas très passionnant )

    tout ce que je peux te dire c'est :







o~~~~~~~~~~~~~~~~~o~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~o~~~~~~~~~~~~~~~~o 
| Avec | et mieux : <label style="color: rgb(0, 128, 0);">Télécharger</label> | 
|~~~~~~~~~~~~~~~~~|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|~~~~~~~~~~~~~~~~| 
|<label style="color: rgb(128, 0, 0);">FireFox</label> |regarder la "console d'erreurs" | FireBug
| | Outils / Console d'erreurs | | 
|~~~~~~~~~~~~~~~~~|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|~~~~~~~~~~~~~~~~| 
|<label style="color: rgb(128, 0, 0);">Internet Explorer</label>|activer le deboggage : utils/options Ile Debogger IE | 
| | dans la liste, sous "Navigation" : décocher | | 
| | ° Afficher une notification de chaque erreur de script | | 
| | ° Désactiver le débogage de Scripts (autres applications)| | 
| | ° Désactiver le débogage de Scripts (Internet Explorer) | | 
o~~~~~~~~~~~~~~~~~o~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~o~~~~~~~~~~~~~~~~o





    fais du pas à pas...


    fais des essais aussi avec IE,
            parfois on détecte plus facilement ce qui se passe.
  
    et si tu n'y parviens pas, reviens à des choses plus simples que Script.Aculo.us
       fais les fonctions ajax toi-même. ce n'est pas si compliqué.
   
<hr />
Cordialement            Bul     [mon Site]     [M'écrire]
<hr />
0
boulika Messages postés 58 Date d'inscription lundi 11 novembre 2002 Statut Membre Dernière intervention 30 octobre 2009
12 oct. 2007 à 16:33
Pas mal du tout ton code, tu seras d'accord de le partager ?

Merci beaucoup

Boulika webdesign
0