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

Version imprimable

28/01/2016, 20h13
informer

2 pièce(s) jointe(s)

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

Bonjour à tous,

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

Citation:

div id=itab-page-0

J'ai bien tenté un

Citation:

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

Pas de succès

Puis

Citation:

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

Pas plus de succès

La structure de la page est la suivante
Pièce jointe 199378
Pièce jointe 199379

Encore merci par avance pour toute aide apportée

Et bonjour chez vous :pingoin2:
28/01/2016, 20h57
danielhagnoul

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();
28/01/2016, 21h59
informer

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 :pingoin2:
28/01/2016, 22h34
danielhagnoul

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

Dans le formulaire $( '#idFormulaire' ), find trouve et sélectionne l'élément '#idtab-page-0'.
29/01/2016, 06h05
informer

3 pièce(s) jointe(s)

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!

Pièce jointe 199396

Et quant je pointe sur idtab-page-0 le débugger donne une erreur
Pièce jointe 199397

Par contre la variable test donne ceci

Pièce jointe 199398

Pas simple

bonjour chez toi :pingoin2:
29/01/2016, 11h15
danielhagnoul

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].

1 pièce(s) jointe(s)

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
Pièce jointe 199417

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

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
<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:

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 :pingoin2:

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

Code:

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:

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

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:

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"]

Donc dans mon fichier JS j'ai fait cette fonction ajax

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
 
function ajaxOutput(optAction)
{	 var oReturn = {};
	 var oSerialData =  {};
	oSerialData .typeOpe  = optAction;// oSerialData["typeOpe"] = optAction; 
	var toReturn	= [];
	var els= $( "#idFormulaire" ).find(':input').get();
	$.each 
	(	els, function( indice, type )
		{	if (this.type !=="button" && this.type !=="text" ){ oSerialData[this.name] =  this.value; }
		}
	);
 
	//alert ("stop");
 
	$.ajax	({	
		type: "POST",
		url: "formulaire.php",
		data: oSerialData,
		dataType: "json",
		async: false,
		success: function(oDataSQL, statut)
		{	if (oDataSQL.length> 0 )
			{	oReturn = oDataSQL;
			}
		},
		error: function(oDataSQL, statut) {	alert ("error sqlConnect.js : " + oDataSQL.erreur);	}
	});
	return oReturn;
}

qui est appelée par exemple quand on change d'item dans la ["cbFormation"] par la fonction

Code:

1
2
3
4
function setRating ()
{	oDataSQL = ajaxOutput("setInfo");
	setInfoQuestionnaire(oDataSQL);	
}

Je ne suis ni expert JS ni PHP, donc de l'indulgence car on pourrait utiliser la surcharge de méthode? idée pour un autre post?

Encore un grand merci danielhagnoul

Bonjour chez toi :pingoin2: