Sérialiser les éléments d'une onglet jquery

**informer** · 28/01/2016, 20h13

Bonjour à tous,

Voilà, mon problème est de sérialiser tous les éléments sous la balise

div id=itab-page-0

J'ai bien tenté un

var oSerialData = $( "div" ).serialize();

Pas de succès

Puis

var oSerialData = $( "#itab-page-0" ).serialize();

Pas plus de succès

La structure de la page est la suivante
Nom : struct_HTML.png
Affichages : 159
Taille : 199,1 Ko

Nom : struct_HTML_DOM.png
Affichages : 145
Taille : 216,8 Ko

Encore merci par avance pour toute aide apportée

Et bonjour chez vous

**danielhagnoul** · 28/01/2016, 20h57

La méthode serialize() recueille uniquement les valeurs des éléments du formulaire ayant un attribut 'name'.

Dans votre cas (complexe), je vous propose de tester : $( '#idFormulaire' ).find( '#idtab-page-0' ).serialize();

**informer** · 28/01/2016, 21h59

Bonsoir danielhagnoul

Merci pour ta solution que je vais tester demain.

En attendant, pourrais-tu m'expliquer le find svp pour être un peut plus intelligent demain?

Encore merci

Bonjour chez toi

**danielhagnoul** · 28/01/2016, 22h34

API jQuery : http://api.jquery.com/find/

Dans le formulaire $( '#idFormulaire' ), find trouve et sélectionne l'élément '#idtab-page-0'.

**informer** · 29/01/2016, 06h05

Bonjour danielhagnoul

Voilà les fichier js chargés
<script src="swfobject.js"></script>

<script src="jquery.ui.core.min.js"></script>
<script src="jquery.ui.widget.min.js"></script>
<script src="jquery.ui.mouse.min.js"></script>
<script src="jquery.ui.sortable.min.js"></script>
<script src="jquery.ui.tabs.min.js"></script>
<script src="jquery.ui.datepicker.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
J'ai testé mais la variable reste désespérément vide. Mais chose étrange dans le débugger NetBeans, si je comprends bien celui-ci, quand je clique sur #idFormulaire, j'ai bien la lste des éléments, cf. image!

Nom : struct_Html_debug.png
Affichages : 141
Taille : 67,8 Ko

Nom : struct_Html_debug.png
Affichages : 141
Taille : 67,8 Ko

Et quant je pointe sur idtab-page-0 le débugger donne une erreur
Nom : struct_Html_debug_page-0.png
Affichages : 128
Taille : 56,8 Ko

Par contre la variable test donne ceci

Nom : struct_HTML_DOM_#idformul #idtab.png
Affichages : 145
Taille : 41,7 Ko

Pas simple

bonjour chez toi

**danielhagnoul** · 29/01/2016, 11h15

Une remarque : pourquoi charger des parties de jQuery UI au lieu de la totalité. Certains modules dépendent de plusieurs autres. Vous êtes certain du bon fonctionnement de jQuery UI ?

Ne pas confondre le résultat de la méthode serialize() avec l'objet jQuery retourné dans votre variable "test" !

Dans le débugger, pour connaître le contenu de l'objet jQuery "test", il faut regarder dans test[0].

**informer** · 29/01/2016, 11h50

Le code HTML est génèré dans l'outil wysiwygwebbuilder qui permet de faire des pages en mode objets drag & drop. Par conséquent, je ne me suis pas vraiment penché sur le code produit car la partie JS, PHP et MySQL me prend dejà beaucoup de temps

Pour
var oSerialData = $( '#idTab' ).serialize(); => ""
oSerialData = $( '#idFormulaire #idtab-page-0' ).serialize(); => ""

var test = $( '#idFormulaire' ).find( '#idtab-page-0' ).serialize(); => ""
var serial1 =$( "#idFormulaire :input" ).serialize(); => "cboxClosed=2&pickerDateFin=&Comment=&pickerDateDeb="
serial1 =$( "div" ).serialize(); => ""
serial1 =$( "idFormulaire :checked" ).serialize(); => ""
serial1 =$( "form" ).serialize(); = "cboxClosed=2&pickerDateFin=&Comment=&pickerDateDeb="
serial1 = $( ":input" ).serialize();=> Error
serial1 =$( "#idTab" ).children();=> Cf image
Nom : struct_HTML_DOM_idtabChild.png
Affichages : 147
Taille : 22,8 Ko

Nom : struct_HTML_DOM_idtabChild.png
Affichages : 147
Taille : 22,8 Ko

Le problème reste entier, comment sérialiser tous les élements qui sont soit sous "idTab" ou sous "idtab-page-0"

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
54
55
56
57
<div id="idTab" style="position:absolute;left:22px;top:296px;width:577px;height:403px;z-index:31;">
<ul>
<li><a href="#idtab-page-0"><span>Questionnaire</span></a></li>
<li><a href="#idtab-page-1"><span>vidéo</span></a></li>
<li><a href="#idtab-page-2"><span>Inscription</span></a></li>
</ul>
<div style="height:363px;overflow:auto;padding:0;" id="idtab-page-0">
<div id="wb_Shape3" style="position:absolute;left:19px;top:52px;width:550px;height:113px;z-index:0;">
<img src="images/img0005.png" id="Shape3" alt="" style="border-width:0;width:550px;height:113px;"></div>
<div id="wb_Shape2" style="position:absolute;left:18px;top:173px;width:545px;height:200px;z-index:1;">
<img src="images/img0004.png" id="Shape2" alt="" style="border-width:0;width:545px;height:200px;"></div>
<div id="wb_Text5" style="position:absolute;left:180px;top:219px;width:57px;height:19px;z-index:2;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;">Moyen</span></div>
<div id="wb_Text6" style="position:absolute;left:343px;top:219px;width:37px;height:19px;z-index:3;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;">Bon</span></div>
<input type="radio" id="rdbNoteFormat1" name="rdbNoteFormat" value="0" style="position:absolute;left:239px;top:217px;z-index:4;">
<div id="wb_Text4" style="position:absolute;left:33px;top:218px;width:129px;height:19px;z-index:5;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;"><strong>Note Formateur</strong></span></div>
<input type="radio" id="rdbNoteFormat2" name="rdbNoteFormat" value="1" style="position:absolute;left:382px;top:217px;z-index:6;">
<div id="wb_Text1" style="position:absolute;left:28px;top:184px;width:152px;height:38px;z-index:7;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;"><strong>Formations suivies</strong></span></div>
<div id="wb_Text7" style="position:absolute;left:448px;top:220px;width:72px;height:19px;z-index:8;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;">Excellent</span></div>
<div id="wb_Text9" style="position:absolute;left:480px;top:187px;width:40px;height:19px;z-index:9;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;"><strong>Clos</strong></span></div>
<input type="radio" id="rdbNoteFormat3" name="rdbNoteFormat" value="2" style="position:absolute;left:521px;top:219px;z-index:10;">
<input type="checkbox" id="chkClos" name="chkClos" value="on" style="position:absolute;left:524px;top:186px;z-index:11;">
<div id="wb_Text8" style="position:absolute;left:31px;top:259px;width:126px;height:19px;z-index:12;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;"><strong>Commentaire</strong></span></div>
<input type="button" id="btUpDate" onclick="upDateInfoQuestionnaire();return false;" name="btUpDate" value="Modifier" style="position:absolute;left:456px;top:375px;width:96px;height:25px;z-index:13;">
<input type="button" id="btErase" name="btErase" value="Effacer" style="position:absolute;left:352px;top:377px;width:96px;height:25px;z-index:14;">
<select name="cboxClosed" size="1" id="cboxClosed" style="position:absolute;left:287px;top:68px;width:96px;height:21px;z-index:15;">
<option selected value="2">Tous</option>
<option value="1">Clos</option>
<option value="0">Ouvert</option>
</select>
<div id="wb_Text12" style="position:absolute;left:237px;top:70px;width:48px;height:19px;z-index:16;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;">Statut</span></div>
<input type="button" id="btSearch" onclick="setInfoSearch();return false;" name="btSearch" value="Recherche" style="position:absolute;left:287px;top:102px;width:96px;height:25px;z-index:17;">
<div id="wb_Text10" style="position:absolute;left:47px;top:74px;width:61px;height:19px;z-index:18;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;">Entre le</span></div>
<div id="wb_Text11" style="position:absolute;left:71px;top:103px;width:37px;height:19px;z-index:19;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:16px;">Et le </span></div>
<input type="text" id="pickerDateFin" style="position:absolute;left:118px;top:99px;width:98px;height:18px;line-height:18px;z-index:20;" name="pickerDateFin" value="" class="datepicker">
<textarea name="Comment" id="txtComment" style="position:absolute;left:174px;top:256px;width:371px;height:98px;z-index:21;" rows="5" cols="54"></textarea>
<select name="cbFormation" size="1" id="cbFormation" style="position:absolute;left:191px;top:185px;width:284px;height:21px;z-index:22;">
</select>
<input type="text" id="pickerDateDeb" style="position:absolute;left:118px;top:69px;width:98px;height:18px;line-height:18px;z-index:23;" name="pickerDateDeb" value="">
</div>
<div style="height:363px;overflow:auto;padding:0;" id="idtab-page-1">
<div id="wb_YouTube1" style="position:absolute;left:14px;top:54px;width:563px;height:344px;z-index:24;">
<iframe width="563" height="344" src="http://www.youtube.com/embed/u31OjOPF-ZI?rel=0&amp;showinfo=0&amp;version=3&amp;autohide=0&amp;fs=1&amp;theme=dark" allowfullscreen></iframe>
</div>
</div>
<div style="height:363px;overflow:auto;padding:0;" id="idtab-page-2">
</div>
</div>

J'ai essayé ce code pompé sur internet avec $( "#idFormulaire" ).serializeAnything mais pas plus de résultat que $( "form" ).serialize();

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
(function($) {
 
	$.fn.serializeAnything = function() {
 
		var toReturn	= [];
		var els 		= $(this).find(':input').get();
 
		$.each(els, function() {
			if (this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password/i.test(this.type))) {
				var val = $(this).val();
				toReturn.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( val ) );
			}
		});
 
		return toReturn.join("&").replace(/%20/g, "+");
 
	};
 
})(jQuery);

Mon code est disponible sur Code HTML avec

formulaire.html.txt code complet ici
selector.html.txt sans l'option style pour une lecture plus facile ici

Encore merci pour ton aide

bonjour chez toi

**danielhagnoul** · 29/01/2016, 19h18

Si on ne retient que l'essentiel pour la sérialisation, on a :

Code html :

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
<form name="formulaire" id="idFormulaire">
  <input type="text" id="txtNom" name="txtNom" value="" readonly disabled>
  <input type="text" id="txtPrenom" name="txtPrenom" value="" readonly disabled>
  <input type="text" id="txtMsg" name="txtMsg" value="" disabled>
  <div id="idTab">
    <div id="idtab-page-0">
      <input type="radio" id="rdbNoteFormat1" name="rdbNoteFormat" value="0" checked>
      <input type="radio" id="rdbNoteFormat2" name="rdbNoteFormat" value="1">
      <input type="radio" id="rdbNoteFormat3" name="rdbNoteFormat" value="2">
      <input type="checkbox" id="chkClos" name="chkClos" value="on" checked>
      <select name="cboxClosed" size="1" id="cboxClosed">
        <option selected value="2">Tous</option>
        <option value="1">Clos</option>
        <option value="0">Ouvert</option>
      </select>
      <input type="text" id="pickerDateFin" name="pickerDateFin" value="">
      <textarea name="Comment" id="txtComment" rows="5" cols="54"></textarea>
      <select name="cbFormation" size="1" id="cbFormation">
      </select>
      <input type="text" id="pickerDateDeb" name="pickerDateDeb" value="">
    </div>
  </div>
</form>

txtNom, txtPrenom et txtMsg sont disabled OK
rdbNoteFormat (radio, aucun élément n'était checked !) OK
chkClos (checkbox, value on, n'était pas checked !) Ok
cboxClosed (select selected value = 2) OK
pickerDateFin (text value="") OK
Comment (textarea pas de texte par défaut) OK
cbFormation (select pas d'option !) OK
pickerDateDeb (text value="") OK

Pour une sérialisation partielle du formulaire, il n'y a qu'une écriture possible :

Code javascript :

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

1
2
3
var result = $( 'input, textarea, select', '#idtab-page-0' ).serialize();
 
console.log( result ); // rdbNoteFormat=0&chkClos=on&cboxClosed=2&pickerDateFin=&Comment=&pickerDateDeb=

**informer** · 29/01/2016, 19h56

Bonsoir danielhagnoul

Encore merci pour ton aide, car aider quelqu'un dont les idées étaient au début bien confuses, n'est pas une exercice facile. Et chacune de tes réponses m'ont permis de combler les pièces manquantes de mon puzzle.

Je peux maintenant mieux t'expliquer mon besoin et la solution trouvée grace à toi pour y répondre. Rentrons dans le vif du sujet:

L'objectif est de récupérer les valeurs associés aux objets graphiques HTML dans ajax pour les utiliser dans mon code PHP. Ces valeurs sont utilisées dans des requêtes et le résultat est retourné au format json à la fonction ajax.

Mon code PHP

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
<?php
session_start(); // Doit être appelée pour accéder à la superglobale $_SESSION
 
require "dbConnect.php";
 
$typeOpe= urldecode($_POST["typeOpe"]);
$userID = $_SESSION["userID"];
 
if ($typeOpe=== "init" || $typeOpe=== "search"  )
{   $sqlSelect =        "SELECT ..... WHERE `participer`.`IDUSER` =   $userID";   
        
        if ($typeOpe=== "search"  )
        {       $closed = urldecode($_POST["cboxClosed"]);
                ($closed == '2')? $andClosed = " " : $andClosed = " AND `participer`.`CLOSED` = $closed ";
    
                $regEx = "/(.{2})+\/+(.{2})\/+(.{4})/";
                $dateDeb = !empty($_POST["pickerDateDeb"]) ? urldecode($_POST["pickerDateDeb"]) : "01/01/1900";
                $dateDeb = preg_replace($regEx, "$3-$2-$1",$dateDeb);
    
                $dateFin = !empty($_POST["pickerDateFin"])? urldecode($_POST["pickerDateFin"]) : "01/01/3000";
                $dateFin = preg_replace($regEx, "$3-$2-$1",$dateFin);
                
                $andClosed = $andClosed + " AND `session`.`DATEDEB` BETWEEN '$dateDeb' AND '$dateFin' ";
        
        }
}       
elseif ($typeOpe==="setInfo")
{       $sessionID = urldecode($_POST["cbFormation"]);
        $sqlSelect =    " SELECT ....
                                WHERE
                                        `participer`.`IDUSER` =  $userID AND 
                                        `participer`.`IDSESSION` = $sessionID";         
}
 
try
{   $dbConnect = dbConnection(); 
    $dataSet = $dbConnect->query($sqlSelect);
    $rowsArray = $dataSet->fetchAll();
    $returnData =  json_encode($rowsArray);     
} catch (PDOException $err)
{   $returnData =  "erreur= sqlConnect.php !: " . $err->getMessage() ; //type data expected json
}
 
$dbConnect = null;// Fermeture connexion !
echo $returnData;
?>

$userID = $_SESSION["userID"] récupéré dans une variable de session initialisée lors de lancement de la page index.htlm qui demande username et userpass et récupère dans la base de données MySQL l'IdUser (clé primaire) associé

Par contre il me faut avoir des information sur

le type d'opération donné par $typeOpe= urldecode($_POST["typeOpe"]); => ["typeOpe"] est dans l'objet json envoyé depuis Ajax
Et pour chaque type d'opération les valeurs des objets HTML
["pickerDateDeb"]
["pickerDateFin"]
["cboxClosed"]
["cbFormation"]

Sérialiser les éléments d'une onglet jquery

jQuery

Discussions similaires

Partager

Partager