Discussion :

[dragazor]

bonjour à tous,
j'essaie d'utiliser jquery dans mon code pour deplacer certains éléments de ma page,le problème c'est que cela s'applique seulement au premier élément.
Moi j'aimerais qu'il s'applique pour chaque élément que je récupère dans ma table.
Je poste ici parceque je pense que le problème ne vient pas de jquery mais de mon code behind.

J'espère que vous pourrez m'aider. je vous remercie par avance

je vous mets le code :

code asp

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<asp:Repeater id="Repeater1" runat="server">
                <ItemTemplate>
                    <ul id="sortable">
                        <li class="ui-state-default" style="list-style:none;" id="<%# DataBinder.Eval(Container.DataItem, "id_question") %>"><%# DataBinder.Eval(Container.DataItem, "question") %></li>
                    </ul>
                </ItemTemplate>
            </asp:Repeater>

code behind

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
 protected void Page_Load(object sender, EventArgs e)
    {
 
        //Commande pour afficher le dernier formulaire entré(celui qu'on vient de faire)
        SqlCommand strCommand = new SqlCommand("SELECT TOP (1) id_formulaire, titre, questions FROM tformulaires ORDER BY id_formulaire DESC", strConnection.myConnectionString);
        strConnection.myConnectionString.Open();
        SqlDataReader dr = strCommand.ExecuteReader();
        string title;
        string formulaires_questions;
        int id_formulaire;
        //pas de boucle =>1 seul enregistrement dans le DataReader
        dr.Read();
            id_formulaire = (Int32)dr[0];
            title = dr[1].ToString();
            //on récupère la liste des id des questions du formulaire
            formulaires_questions = dr[2].ToString();
        strConnection.myConnectionString.Close();
 
        //Sélection des questions qui sont dans le 
        SqlCommand strCommand2 = new SqlCommand("SELECT id_question, question FROM tquestions WHERE id_question IN (" + formulaires_questions + ")", strConnection.myConnectionString);
        strConnection.myConnectionString.Open();
 
        SqlDataReader dr2 = strCommand2.ExecuteReader();
 
        while (dr2.Read())
        {
            //affichage du div avec l'id des questions
            Literal1.Text+="<div id='" + dr2[0] + "'>'" + dr2[1] + "'</div>";
 
        }
 
 
 
        strConnection.myConnectionString.Close();
 
 
 
 
        //define command
 
        SqlCommand cmd = new SqlCommand("SELECT id_question, question FROM tquestions WHERE id_question IN (" + formulaires_questions + ")", strConnection.myConnectionString);
 
        strConnection.myConnectionString.Open();
 
        SqlDataReader dr3 = cmd.ExecuteReader();
 
        Repeater1.DataSource = dr3;
        Repeater1.DataBind();
 
        strConnection.myConnectionString.Close();
 
    }

code jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
 
            $(function(){
                alert("rentré dans la fonction");
		        $("#sortable").sortable({axis:"y",//axis: "y" ne permet le deplacement que sur l'axe vertical
		         placeholder:"vacant"});// placeholder vacant réserve l'espace
		        $("#sortable").sisableSelection();
	        })
 
 
        </script>

[dragazor]

Bin en faite le code, il etait bon .
Le seul soucis était que je gérais mes <ul> pardes id. un id étant unique, je pense que le programme ne se retrouvait pas ou prenait le premier id correspondant.
J'ai donc résolu le problème en mettant une classe et la ca fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<ul id="sortable" class="sortable">
                        <li class="ui-state-default" style="list-style:none;" id="<%# DataBinder.Eval(Container.DataItem, "id_question") %>"><%# DataBinder.Eval(Container.DataItem, "question") %></li>
                    </ul>

dans le code jquery je remplace le # par un . (point)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
 
            $(function(){
                alert("rentré dans la fonction");
		        $(".sortable").sortable({axis:"y",//axis: "y" ne permet le deplacement que sur l'axe vertical
		         placeholder:"vacant"});// placeholder vacant réserve l'espace
		        $(".sortable").sisableSelection();
	        })
 
 
        </script>

Voici, en espérant que ca puisse servir