Récupérer un SELECTABLE (Jquery) identique après chargement de page via un POST

Version imprimable

Bonjour à tous,

J'essaye depuis plusieurs jours de coder un petit morceau de Jquery qui à mon avis sera tout simple pour vous, mais j'avoue que je n'arrive pas à tomber sur le bon code malgré mes nombreuses recherches sur beaucoup de forums.

J'ai une page sur laquelle l'utilisateur sélectionne différentes valeurs dans un SELECTABLE et lorsque celui-ci valide le formulaire, la page se recharge en affichant toujours ce SELECTABLE.
Ma mission = que ce SELECTABLE conserve les valeurs précédement sélectionnées APRES rechargement de la page.

Mon code :

Code:

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
 
<HTML>
<HEAD>
<SCRIPT>
$(function() {
	$( ".selectableNATOP" ).selectable({
		// A chaque selection, le TEXTAREA "NatopSelect" qui contient toutes les valeurs s'incrémente. (cela fonctionne, j'ai testé)
		stop: function() {
			var result = $( "#NatopSelect" ).empty();
			$( ".ui-selected", this ).each(function() {
				result.append($(this).text() + ",");
			});
		}
	});
	// Si une analyse a déjà été lancée, on reprend les mêmes critères (C'EST ICI QUE CA NE FONCTIONNE PAS)
	<?php
		if ($_POST && $_POST['NatopSelect'] != "") {
			echo "$('.selectableNATOP option:selected').text('36');";
		}
	?>
});
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST action="PictrelNbInterRealisees.php">
 
<ul class="selectableNATOP">
	<?php 
                $sql = "SELECT * FROM `natop`";
                $ListeCriteres = mysql_query($sql) or die("La requête a échoué : ".mysql_error()); 
 
                while($ligne = mysql_fetch_row($ListeCriteres)){
                        echo '<li class="ui-state-default">'.$ligne[0].'</li>';
                }
        ?>
</ul>
 
<textarea id="NatopSelect" name="NatopSelect" hidden="true"></textarea> // Contient la future variable $_POST['NATOPSELECT'] qui sera envoyée 
                                                                                                                  // en validant le formulaire (cela fonctionne, la variable est bien envoyée).
<input type="submit" value="Valider" name="submit" style="height: 35px; width: 200px">
</FORM>
</BODY>
</HTML>

Auriez-vous une solution qui puisse m'aider? Ça me parait tellement simple, et courant comme fonction, je rage de ne pas trouver la réponse.. :(
A priori, je devrais utiliser un "AppendTo" ou un "Selected" de Jquerry, mais je n'ai pas bien saisi la syntaxe.

En vous remerciant 1000 fois par avance.
Laurent

16/09/2015, 10h22
liandar
Pour le :
Code:

1 2 3 4 5 <?php if ($_POST && $_POST['NatopSelect'] != "") { echo "$('.selectableNATOP option:selected').text('36');"; } ?>
J'ai déjà juste essayé de faire en sorte que si il y a un POST de réalisé, l' UI qui contient le texte "36" (il y en a un) se sélectionne. je ferais la bouche après pour sélectionner chaque UI.
16/09/2015, 10h33
danielhagnoul

Le code serveur ne sert à rien dans un forum JS. Il faut copier-coller le code généré dans le navigateur.
16/09/2015, 10h46
liandar

Mais si je copie/colle ici le code généré par le navigateur, vous ne verez plus le Jquery ou le php, et vous ne pourrez pas m'aider?! 8O
16/09/2015, 13h46
liandar

En fait, pour résumer, J'ai un selectable créé en Jquerry nommé ".selectableNATOP".

L'utilisateur sélectionne les UI qu'il désire et valide un formulaire. Voici le tableau :

val=#1, text=L5 val=#2, text=Y3 val=#3, text=01

val=#4, text=34 val=#5, text=36 val=#6, text=N4

Ici, l'utilisateur a sélectionné les élements #2 et #6 qui comportent respectivement les textes "Y3" et "N4".
Soumission du formulaire.

Quand je recharge ma page, la variable $_POST['NatopSelect'] qui a la valeur : "Y3,N4" est transmise et je la récupère au rechargement de la page.

TOUT CECI FONCTIONNE.

Maintenant, comment faire en jquery pour que mon selectable nommé ".selectableNATOP" puisse re-sélectionner les éléments qui comportent le texte "Y3" & "N4"?

Merci à vous
21/09/2015, 12h25
liandar

Tout le monde sait comment récupérer une valeur sélectionnée par l'utilisateur dans un Widget en jQuery mais personne ne sait faire l'inverse, à savoir sélectionner une valeur au chargement du widget grace à un valeur passée en POST[] ?

Même une toute petite aide m'aiderait beaucoup, je cherche désespérement.. :calim2:

Bonjour,

Je penses que le fait de mélanger le code php dans du Javascript t'a un peu embrouillé, dans le futur je te conseillerais de te pencher sur AJAX, mais c'est un autre débat.

pour sélectionner une option au chargement de la page avec selectable en fait c'est simple : il suffit d'ajouter la classe "ui-selected" à l’élément souhaité.

alors pour donner une réponse qui colle grosso modo à ton code, il faudra déterminer si un élément doit être sélectionné dans ta boucle while, je te laisse te charger de l'implémentation mais voici comment je vois grosso modo la solution :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 ... while($ligne = mysql_fetch_row($ListeCriteres)){ if($ligne[0] == "35") // ou n'importe quelle condition pour tester si cette ligne sera séléctionnée { echo '<li class="ui-state-default">'.$ligne[0].'</li>'; } else { echo '<li class="ui-state-default ui-selected">'.$ligne[0].'</li>'; } } ...
bon courage.

21/09/2015, 16h20
SpaceFrog

Il suffit de regarder le code source html de ta page dans la console (onglet html ou exploratuer DOM) pour voir les attributs modifiés en cas de sélection et appliquer ces même attributs coté serveur directment avec php ou au chargement de la page avec jquery à partir dun array ou json passé par php

Bonjour à tous !

B.marwane et SpaceFrog, vos réponses m'ont inspiré et beaucoup aidé. cela m'a permit de trouver ma solution.
Ça fait des jours que je galère avec ma mémorisation d'une sélection multiple d'un "selectable" en jquery et même si ce n'est pas du jquery pur puisque cela mèle également du php, je suis heureux de partager mon code source avec vous.

Si cela peut aider quelqu'un :

Code:

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
54
55
56
57
58
59
60
61
 
<HTML>
<HEAD>
$(function() {
	$( ".selectableNATOP" ).selectable({
		// A chaque selection, la variable qui contient toutes les valeurs s'incrémente.
		stop: function() {
			var result = $( "#NatopSelect" ).empty();
			$( ".ui-selected", this ).each(function() {
				result.append($(this).text() + ",");
			});
		}
	});
});
</HEAD>
<BODY>
 
<ul class="selectableNATOP">
   <?php 
      $sql = "SELECT * FROM `natop`";
      $ListeCriteres = mysql_query($sql) or die("La requête a échoué : ".mysql_error()); 
 
      while($ligne = mysql_fetch_row($ListeCriteres)){
 
         if ($_POST and $_POST['NATOPSelect'] <> "") {
            $NbrLignesSelect = substr_count($_POST['NATOPSelect'], ",");
            $AnalyseSelect = explode(",", $_POST['NATOPSelect']); 
 
            $NATOPTrouvé = false;
            for ($l = 0; $l <= $NbrLignesSelect; $l++) {
               if ($AnalyseSelect[$l] == $ligne[0] and $ligne[0] != "") {
                  $NATOPTrouvé = true;
               }
            }
            if ($NATOPTrouvé == true) {
               echo '<li class="ui-state-default ui-selected">'.$ligne[0].'</li>';
            }
            else {
               if ($ligne[0] != "") echo '<li class="ui-state-default">'.$ligne[0].'</li>';
            }
         }
         else{
            if ($ligne[0] != "") echo '<li class="ui-state-default">'.$ligne[0].'</li>';
         }
      }
    ?>
</ul><br>
 
// TextArea invisible qui contient les NATOP à prendre en compte
 
<p>
   <?php
      if ($_POST) {
         echo '<textarea id="NATOPSelect" name="NATOPSelect" hidden="true">'.$_POST['NATOPSelect'].'</textarea>';
      }
      else echo '<textarea id="NATOPSelect" name="NATOPSelect" hidden="true"></textarea>';
   ?>
</p> <!-- CE DIV CONTIENT EN TEMPS REEL NOTRE SELECTION DE NATOP -->
 
</BODY>
</HTML>

Encore Merci.

val=#1, text=L5	val=#2, text=Y3	val=#3, text=01
val=#4, text=34	val=#5, text=36	val=#6, text=N4