IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

[JQuery] Utilisation d'Interface Jquery Sortable


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    151
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2005
    Messages : 151
    Par défaut [JQuery] Utilisation d'Interface Jquery Sortable
    Bonjour à tous,

    Je veux utiliser Interface pour pouvoir trier des éléments et récupérer le tri pour l'enregistrer dans une base de données. Le tri fonctionne et mes éléments sont bien "drag & drop" et s'insèrent là où je les dépose, mais n'étant pas aguerri avec l'Ajax (je me limite à intégrer des scripts et en général cela me suffit), je n'arrive pas à utiliser la fonction permettant de récupérer l'ordre.

    Voici mon code :

    Le javascript :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <script type="text/javascript">
    $(document).ready(
    	function () {
    		$('div.sort').Sortable(
    			{
    				accept : 		'pages',
    				helperclass : 	'sorthelper',
    				activeclass : 	'sortableactive',
    				hoverclass : 	'sortablehover',
    				opacity: 		0.5,
    				fx:				200,
    				revert:			true,
    				floats:			true,
    				tolerance:		'pointer'
    			}
    		)
    	}
    );
    function serialize(s)
    {
    	serial = $.SortSerialize(s);
    	alert(serial.hash);
    };
    </script>
    Le html (simplifié) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="bloc_into">
    <div class="sort">
    <?php
    while ($rown = mysql_fetch_array($resultn)){
    ?>
    <div class="pages">
    <div class="<? echo $class ; ?>">
    <p>
    <a href="<? echo $lien ; ?>.php?id=<?php echo $rown['id_pages'] ; ?> "><?php echo $rown['titre'] ; ?></a>
    </p>
    </div>
    </div>
    <?php
    }
    ?>
    </div>
    C'est donc l'utilisation de la fonction Serialize qui me pose problème. Le but est donc de récupérer les id correspondants aux différentes position pour ensuite pouvoir passer ça via un bouton submit.

    Voici la page de doc de cette fonction :

    http://interface.eyecon.ro/docs/sort

    Voilà si quelqu'un pouvait me filer un coup de main ce serait super sympa : je cale là-dessus depuis un bon bout de temps maintenant.

    Merci d'avance

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    151
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2005
    Messages : 151
    Par défaut
    J'avance !

    J'ai enfin compris que ça fonctionnait avec les id.

    Je réussi à récupérer les id triés. Avec le code suivant :

    Javascript :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    function serialize(trier)
    {
    	serial = $.SortSerialize(trier);
    	alert(serial.hash);
    };
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="sort" id="trier">
    <?php
    while ($rown = mysql_fetch_array($resultn)){
    ?>
    <div class="pages" id="<?php echo $rown['id_pages'] ; ?>">
    <div class="<? echo $class ; ?>">
    <p>
    <a href="<? echo $lien ; ?>.php?id=<?php echo $rown['id_pages'] ; ?> "><?php echo $rown['titre'] ; ?></a>
    </p>
    </div>
    </div>
    <?php } ?>
    </div>
    Comment puis-je transmettre ces données (couple position / id) via un submit afin de les récupérer en php par après ?

    La j'obtiens la liste via un lien qui m'ouvre une alert.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="#" onClick="serialize(); return false;" >serialize all lists</a>
    Je suppose que je dois modifier la fonction vu que l'alert est dedans...

    Merci

  3. #3
    Membre confirmé
    Profil pro
    Développeur Web
    Inscrit en
    Février 2005
    Messages
    63
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2005
    Messages : 63
    Par défaut probleme de drag
    Hello
    J ai un probleme de drag. (et non pas de drague hein ^^)
    Voici j ai plusieurs boxs html du type :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div id="firstlist">
        <dl class="listyle" id="image_<?=$i?>"> 
           <dt class="product"> 
                    <?='&nbsp;&nbsp;'.$row['name'].' '.$i.'';?><br/><br/>
                   <img id="img-prod" src="<?=$img?>" height="188" width="212"/>
                   <input type="checkbox" checked="checked" name="id[<?=$row['id']?>]" id="checkboxs" value="id" />
             </dt>	
         </dl>
        <dl class="listyle" id="image_<?=$i?>"> 
           <dt class="product"> 
                    <?='&nbsp;&nbsp;'.$row['name'].' '.$i.'';?><br/><br/>
                   <img id="img-prod" src="<?=$img?>" height="188" width="212"/>
                   <input type="checkbox" checked="checked" name="id[<?=$row['id']?>]" id="checkboxs" value="id" />
             </dt>	
         </dl>
    ............
    </div>

    La mise en page est en css et se gere de la fcon qu'il y ai 3 box par lignes.
    LA mise en place Html est nikel et me donne ce que je veux.

    Pour ce qui est du code jquery, j ai utiliser cette fonction au chargement de la page :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     $("#firstlist").sortable({ 
                        placeholder: "ui-selected", 
                        revert: false,
                        tolerance :"pointer",   
                    });
    Voila le probleme : Lorsque je deplace ma box rapidement pour la changer de place avec celle da cote, celle ci se deplace au bon endroit mais reviens aussitot a sa place d origine . Ce qui fait que j ai le drag and drop qui se fait pas
    Par contre si je le fait lentement , bin ca fonctionne!

    Pourriez vous m aider O grand manitou du web

    Merki d avances!!

    tiger63
    ke le tigre soit en toi

Discussions similaires

  1. Utilisation du Plugin Jquery Boxy
    Par camcam8782 dans le forum jQuery
    Réponses: 2
    Dernier message: 12/08/2009, 00h06
  2. utilisation asyncrone avec jQuery
    Par bucheron007 dans le forum APIs Google
    Réponses: 1
    Dernier message: 29/04/2009, 00h04
  3. Utiliser le plugin jQuery.history
    Par SpIrIt505050 dans le forum jQuery
    Réponses: 1
    Dernier message: 19/02/2009, 11h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo