Guriddo » Topic: dependent dropdown in subgrid

dependent dropdown in subgrid

Guriddo
subgrid dependent dropdown
dependent dropdown in subgrid

Tagged: subgrid dependent dropdown

This topic has 5 replies, 2 voices, and was last updated 9 years, 11 months ago by tony.

Creator

Topic

May 7, 2016 at 11:43 am #125139

Saroumane

Participant

Hello,

I have a new problem 😉 .

I have make a dependent dropdown in a subgrid. This dropdown is OK in simple grid, but the same code in a subgrid in the edit mode ( the add mode is OK) don’t work.

In first field of dropdown he first value of the query appears instead of the save value in database.

The console log say for the (sr) variable : sr: undefined

Have you an idea for solve my problem ?

Thanks for your help,
The subgrid:

require_once &#039;../PAS-config.php&#039;;
// include the jqGrid Class
require_once &quot;../php/PHPSuito/jqGrid.php&quot;;
// include the driver class
require_once &quot;../php/PHPSuito/DBdrivers/jqGridPdo.php&quot;;
require_once &quot;../php/PHPSuito/jqCalendar.php&quot;;

// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn-&gt;query(&quot;SET NAMES utf8&quot;);

// Get the needed parameters passed from the main grid
// By default we add to postData subgrid and rowid parameters in the main grid
$oper = jqGridUtils::GetParam(&quot;oper&quot;);
$subtable = jqGridUtils::GetParam(&quot;grid_PAS_sub&quot;);

//$subtable = jqGridUtils::GetParam(&quot;subgrid&quot;);
$rowid = jqGridUtils::GetParam(&quot;rowid&quot;);

//if(!$subtable &amp;&amp; !$rowid) die(&quot;Missed parameters&quot;);
// Create the jqGrid instance
$grid = new jqGridRender($conn);

$grid-&gt;debug = false;

// Write the SQL Query
$grid-&gt;SelectCommand = &quot;SELECT
 &lt;code&gt;seconde&lt;/code&gt;.id_detail, &lt;code&gt;seconde&lt;/code&gt;.CustomerID, &lt;code&gt;seconde&lt;/code&gt;.description, &lt;code&gt;seconde&lt;/code&gt;.UO, &lt;code&gt;seconde&lt;/code&gt;.unites2, &lt;code&gt;seconde&lt;/code&gt;.pilote, &lt;code&gt;seconde&lt;/code&gt;.commentair, &lt;code&gt;seconde&lt;/code&gt;.contributeur,  
 &lt;code&gt;seconde&lt;/code&gt;.planif_deb_2,&lt;code&gt;seconde&lt;/code&gt;.planif_fin_2,&lt;code&gt;seconde&lt;/code&gt;.date_modif, &lt;code&gt;seconde&lt;/code&gt;.date_real, &lt;code&gt;seconde&lt;/code&gt;.etat_avance, &lt;code&gt;seconde&lt;/code&gt;.comment 
FROM &lt;code&gt;seconde&lt;/code&gt; WHERE seconde.CustomerID = ?&quot;;

// set the ouput format to json
$grid-&gt;dataType = &#039;json&#039;;

$grid-&gt;setPrimaryKeyId(&#039;id_detail&#039;);

// Let the grid create the model
$grid-&gt;setColModel(null,array(&amp;$rowid));

// Set the url from where we obtain the data
$grid-&gt;setUrl(&#039;../PAS/grid_PAS_sub.php&#039;);
$grid-&gt;table = &#039;seconde&#039;;
// Set some grid options
$grid-&gt;setGridOptions(array(
	&quot;height&quot;=&gt;&quot;Auto&quot;,							// Hauteur automatique du tableau
	&quot;hoverrows&quot;=&gt;true,            	    		// highlight la ligne survolée   
	&quot;caption&quot;=&gt;&quot;Action UO/Pôle 2&quot;,   		// Titre du tableau	
    &quot;width&quot;=&gt;1670,
	&quot;rowList&quot;=&gt;array(20,35,50),			// Déclaration du nombres de lignes affichables
    &quot;rowNum&quot;=&gt;10,
    &quot;sortname&quot;=&gt;&quot;id_detail&quot;,
   // &quot;postData&quot;=&gt;array(&quot;grid_PAS_sub&quot;=&gt;$subtable,&quot;rowid&quot;=&gt;$rowid)));
	&quot;postData&quot;=&gt;array(&quot;subgrid&quot;=&gt;$subtable,&quot;rowid&quot;=&gt;$rowid)));
//$grid-&gt;setNavOptions(&quot;add&quot;,array(&quot;editData&quot;=&gt;array(&quot;CustomerID&quot;=&gt;$rowid)));

// Changement des propriétés des champs.
$grid-&gt;setColProperty(&#039;CustomerID&#039;, array(&quot;hidden&quot;=&gt;true,&quot;editable&quot;=&gt;false));

$grid-&gt;setColProperty(&#039;id_detail&#039;, array(&quot;label&quot;=&gt;&quot;Réf détail&quot;, &quot;hidden&quot;=&gt;true,&quot;editable&quot;=&gt;false, &quot;width&quot;=&gt;60));

$grid-&gt;setColProperty(&#039;contributeur&#039;, array(&quot;label&quot;=&gt;&quot;Contributeur&quot;, &quot;width&quot;=&gt;100));

// champ zone de texte.
$grid-&gt;setColProperty(&#039;description&#039;, array(&quot;label&quot;=&gt;&quot;Description Action UO/Pôle&quot;, &quot;editpilote&quot;=&gt; &#039;textarea&#039;,&quot;editoptions&quot;=&gt;array(&quot;style&quot;=&gt;&quot;width:98%;&quot;),	&quot;width&quot;=&gt;250, 	&quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;commentair&#039;, array(&quot;label&quot;=&gt;&quot;Commentaire Pilote Action&quot;, &quot;editpilote&quot;=&gt; &#039;textarea&#039;,&quot;editoptions&quot;=&gt;array(&quot;style&quot;=&gt;&quot;width:98%;&quot;),	&quot;width&quot;=&gt;200, 	&quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;comment&#039;, array(&quot;label&quot;=&gt;&quot;Commentaire QSE&quot;,  &quot;editpilote&quot;=&gt; &#039;textarea&#039;,&quot;editoptions&quot;=&gt;array(&quot;style&quot;=&gt;&quot;width:98%;&quot;),	&quot;width&quot;=&gt;200, 	&quot;editable&quot;=&gt;true));
// ****************************************

	//Champ date Datepicker
$grid-&gt;setColProperty(&#039;date_modif&#039;, 		array(&quot;label&quot;=&gt;&quot;Date modif&quot;,&quot;align&quot;=&gt;&quot;center&quot;,	&quot;width&quot;=&gt;80,&quot;formatter&quot;=&gt;&quot;date&quot;,	// Défini le champ comme un champ &quot;&quot;date&quot;&quot;
    &quot;formatoptions&quot;=&gt;array(&quot;srcformat&quot;=&gt;&quot;Y-m-d&quot;,&quot;newformat&quot;=&gt;&quot;d/m/Y&quot;), 				// Défini le format d&#039;affichage en jj/mm/aaaa
    &quot;search&quot;=&gt;true	));																// Autorise la recherche sur ce champ																						
$grid-&gt;setDatepicker(&#039;date_modif&#039;, array(&quot;buttonIcon&quot;=&gt;true, &#039;changeMonth&#039;=&gt; true), true, true);  // Active le Datepicker  en mode bouton 
$grid-&gt;datearray = array(&#039;date_modif&#039;);				// Déclaration du champ contenant une date
$grid-&gt;SetUserDate(&quot;d/m/Y&quot;); 				// Configuration de l&#039;affichage de la date coté utilisateur

// -------
$grid-&gt;setColProperty(&#039;date_real&#039;, 		array(&quot;label&quot;=&gt;&quot;Date réalisation&quot;,&quot;align&quot;=&gt;&quot;center&quot;,	&quot;width&quot;=&gt;80,&quot;formatter&quot;=&gt;&quot;date&quot;,	// Défini le champ comme un champ &quot;&quot;date&quot;&quot;
    &quot;formatoptions&quot;=&gt;array(&quot;srcformat&quot;=&gt;&quot;Y-m-d&quot;,&quot;newformat&quot;=&gt;&quot;d/m/Y&quot;), 				// Défini le format d&#039;affichage en jj/mm/aaaa
    &quot;search&quot;=&gt;true));																// Autorise la recherche sur ce champ																							
$grid-&gt;setDatepicker(&#039;date_real&#039;, array(&quot;buttonIcon&quot;=&gt;true, &#039;changeMonth&#039;=&gt; true), true, true);  // Active le Datepicker  en mode bouton 
$grid-&gt;datearray = array(&#039;date_real&#039;);		// Déclaration du champ contenant une date
$grid-&gt;SetUserDate(&quot;d/m/Y&quot;); 				// Configuration de l&#039;affichage de la date coté utilisateur

// -------
$grid-&gt;setColProperty(&#039;planif_deb_2&#039;, 		array(&quot;label&quot;=&gt;&quot;Début planif&quot;,&quot;align&quot;=&gt;&quot;center&quot;,	&quot;width&quot;=&gt;80,&quot;formatter&quot;=&gt;&quot;date&quot;,	// Défini le champ comme un champ &quot;&quot;date&quot;&quot;
    &quot;formatoptions&quot;=&gt;array(&quot;srcformat&quot;=&gt;&quot;Y-m-d&quot;,&quot;newformat&quot;=&gt;&quot;d/m/Y&quot;), 				// Défini le format d&#039;affichage en jj/mm/aaaa
    &quot;search&quot;=&gt;true));																// Autorise la recherche sur ce champ																							
$grid-&gt;setDatepicker(&#039;planif_deb_2&#039;, array(&quot;buttonIcon&quot;=&gt;true, &#039;changeMonth&#039;=&gt; true), true, true);  // Active le Datepicker  en mode bouton 
$grid-&gt;datearray = array(&#039;planif_deb_2&#039;);		// Déclaration du champ contenant une date
$grid-&gt;SetUserDate(&quot;d/m/Y&quot;); 				// Configuration de l&#039;affichage de la date coté utilisateur

// -------
$grid-&gt;setColProperty(&#039;planif_fin_2&#039;, 		array(&quot;label&quot;=&gt;&quot;Fin planif&quot;,&quot;align&quot;=&gt;&quot;center&quot;,	&quot;width&quot;=&gt;80,&quot;formatter&quot;=&gt;&quot;date&quot;,	// Défini le champ comme un champ &quot;&quot;date&quot;&quot;
    &quot;formatoptions&quot;=&gt;array(&quot;srcformat&quot;=&gt;&quot;Y-m-d&quot;,&quot;newformat&quot;=&gt;&quot;d/m/Y&quot;), 				// Défini le format d&#039;affichage en jj/mm/aaaa
    &quot;search&quot;=&gt;true));																// Autorise la recherche sur ce champ																							
$grid-&gt;setDatepicker(&#039;planif_fin_2&#039;, array(&quot;buttonIcon&quot;=&gt;true, &#039;changeMonth&#039;=&gt; true), true, true);  // Active le Datepicker  en mode bouton 
$grid-&gt;datearray = array(&#039;plannif_fin_2&#039;);		// Déclaration du champ contenant une date
$grid-&gt;SetUserDate(&quot;d/m/Y&quot;); 				// Configuration de l&#039;affichage de la date coté utilisateur

// ****************************************

// champ avec menu déroulant

$grid-&gt;setColProperty(&#039;etat_avance&#039;, array(&quot;label&quot;=&gt;&quot;avancement&quot;,	&quot;width&quot;=&gt;60,&quot;align&quot;=&gt;&quot;center&quot;,	&quot;editable&quot;=&gt;true, &quot;formatter&quot;=&gt;&quot;integer&quot;, &quot;formatoptions&quot;=&gt;array(&quot;elmprefix&quot;=&gt;&quot;(*)&quot;, &quot;suffix&quot;=&gt;&quot; %&quot;,))); 
$grid-&gt;setSelect(&quot;etat_avance&quot;, &quot;SELECT avance,avance FROM &lt;code&gt;menu_avancement&lt;/code&gt; ORDER BY &lt;code&gt;avance&lt;/code&gt; ASC &quot;,false,true,true);	

$grid-&gt;setColProperty(&#039;UO&#039;, array(&quot;edittype&quot;=&gt;&quot;select&quot;, &quot;label&quot;=&gt;&quot;UO/Pôle&quot;, &quot;width&quot;=&gt;70, &quot;align&quot;=&gt;&quot;left&quot;, &quot;editoptions&quot; =&gt; array(&quot;value&quot;=&gt;&quot; :Select&quot;)));
$grid-&gt;setColProperty(&#039;pilote&#039;, array(&quot;edittype&quot;=&gt;&quot;select&quot;,&quot;label&quot;=&gt;&quot;Pilote&quot;, &quot;width&quot;=&gt;70, &quot;align&quot;=&gt;&quot;left&quot;, &quot;editoptions&quot; =&gt; array(&quot;value&quot;=&gt;&quot; :Select&quot;)));
$grid-&gt;setColProperty(&#039;unites2&#039;, array(&quot;edittype&quot;=&gt;&quot;select&quot;, &quot;label&quot;=&gt;&quot;Unités&quot;, &quot;width&quot;=&gt;70, &quot;align&quot;=&gt;&quot;left&quot;, &quot;editoptions&quot; =&gt; array(&quot;value&quot;=&gt;&quot; :Select&quot;)));

// $grid-&gt;setColProperty(&#039;unites&#039;, array(&quot;label&quot;=&gt;&quot;Unités&quot;, &quot;width&quot;=&gt;80));
// $grid-&gt;setSelect(&quot;unites&quot;, &quot;SELECT &lt;code&gt;unites&lt;/code&gt;,&lt;code&gt;unites&lt;/code&gt; FROM &lt;code&gt;menu_unite&lt;/code&gt; ORDER BY unites ASC&quot;,false,true,true);

// ****************************************

//   &lt;---------------------------------------------&gt;

// Fonction de génération des menus déroulants en cascade des responsables
$beforeshowadd = &lt;&lt;&lt; BEFORESHOW
function(formid)
{
    //
	jQuery.ajax({
		url: &#039;drop_uo_n1.php&#039;,
		dataType: &#039;json&#039;,
		async : false,
		// envoi q:1 dans le cas d&#039;ajout ou de modification drop_uo_n1.php
		data: {q:1},
		data: {z:1},

		success : function(response)
		{
			var t=&quot;&lt;option value=&#039;&#039;&gt;Select&lt;/option&gt;&quot;;
			jQuery.each(response, function(i,item) {
				t += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
			});
			jQuery(&quot;#UO&quot;,formid).html(&quot;&quot;).append(t);
		}
	});
	jQuery(&quot;#unites2&quot;,formid).html(&quot;&lt;option&gt;Select&lt;/option&gt;&quot;);
}
BEFORESHOW;

$beforeshowedit = &lt;&lt;&lt; BEFORESHOW2
function(formid)
{

	var sr = jQuery(&quot;$subtable&quot;).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
	var selc = jQuery(&quot;$subtable&quot;).jqGrid(&#039;getCell&#039;,sr,&#039;UO&#039;);
	
		console.info(&quot;sr:&quot;,sr);
		console.log(&quot;selc:&quot;,selc);
		console.log(&quot;selc:&quot;,selc);
		console.log(&quot;selc:&quot;,selc);
		
	jQuery.ajax({
		url: &#039;drop_uo_n1.php&#039;,
		dataType: &#039;json&#039;,
		async : false,
		// Ne pas envoyer q en cas d&#039;ajout ou de modif
		success : function(response)
		{
			var t=&quot;&quot;;
			jQuery.each(response, function(i,item) {
				if( selc == item.id) {
					t += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039; selected=&#039;selected&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
				} else {
					t += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
				}
			});
			jQuery(&quot;#UO&quot;,formid).html(&quot;&quot;).append(t);
		}
	});
	
    // Prend la valeur du menu déroulant 1
	var cntryval = $(&quot;#UO&quot;,formid).val();
	jQuery(&quot;#unites2&quot;,formid).html(&quot;&lt;option&gt;Select&lt;/option&gt;&quot;);
	console.log(cntryval);
	if(cntryval) {
	    // Si la valeur est trouvée, utilise AJAX  pour obtenir les valeurs de Niv 2
		// SVP regarder le fichier drop_uo_n2.php
		jQuery.ajax({
			url: &#039;drop_uo_n2.php&#039;,
			dataType: &#039;json&#039;,
			data: {q:cntryval},
			success : function(response)
			{
				var t=&quot;&quot;, sv=&quot;&quot;;
				if(sr)
				{
				    // récupére le menu N2 dans le Grid
					sv = jQuery(&quot;#grid&quot;).jqGrid(&#039;getCell&#039;,sr,&#039;unites2&#039;);
					jQuery.each(response, function(i,item) {
						t += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
					});
					// vide la selection et ajoute la nouvelle valeur
					jQuery(&quot;#unites2&quot;,formid).html(&quot;&quot;).append(t);
					if(sv)
					{
					    // sélectionne la valeur du menu N2
						jQuery(&quot;#unites2&quot;,formid).val(sv).removeAttr(&quot;disabled&quot;);
					}
				}
			}
		});
	} else {
		jQuery(&quot;#unites2&quot;,formid).attr(&quot;disabled&quot;,&quot;disabled&quot;);
	}
 

	var sr3 = jQuery(&quot;$subtable&quot;).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
	var selc3 = jQuery(&quot;$subtable&quot;).jqGrid(&#039;getCell&#039;,sr,&#039;unites2&#039;);
	jQuery.ajax({
		url: &#039;drop_uo_n2.php&#039;,
		dataType: &#039;json&#039;,
		async : false,
		// Ne pas envoyer q en cas d&#039;ajout ou de modif
		success : function(response)
		{
			var t3=&quot;&quot;;
			jQuery.each(response, function(i,item) {
				if( selc3 == item.id) {
					t3 += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039; selected=&#039;selected&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
				} else {
					t3 += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
				}
			});
			jQuery(&quot;#unites2&quot;,formid).html(&quot;&quot;).append(t);
		}
	});	

//	Prend la valeur du menu déroulant 2

  var N3val = $(&quot;#unites2&quot;,formid).val();

		
	jQuery(&quot;#pilote&quot;,formid).html(&quot;&lt;option&gt;Select&lt;/option&gt;&quot;);
	if(N3val) {
	    // Si la valeur est trouvée, utilise AJAX  pour obtenir les valeurs de Niv 3
		// SVP regarder le fichier drop_uo_N3.php
		jQuery.ajax({
			url: &#039;drop_uo_N3.php&#039;,
			dataType: &#039;json&#039;,
			data: {z:N3val},
			success : function(response)
			{
				var t3=&quot;&quot;, sv3=&quot;&quot;;
				if(sr3)
				{
				    // récupére le menu 3 dans le Grid
					sv3 = jQuery(&quot;$subtable&quot;).jqGrid(&#039;getCell&#039;,sr3,&#039;pilote&#039;);
					jQuery.each(response, function(i,item) {
						t3 += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
					});
					// vide la selection et ajoute la nouvelle valeur
					jQuery(&quot;#pilote&quot;,formid).html(&quot;&quot;).append(t3);
					if(sv3)
					{
					    // sélectionne la valeur du menu N2
						jQuery(&quot;#pilote&quot;,formid).val(sv3).removeAttr(&quot;disabled&quot;);
					}
				}
			}
		});
	} else {
		jQuery(&quot;#pilote&quot;,formid).attr(&quot;disabled&quot;,&quot;disabled&quot;);
	}	

	// fin de test menu lvl 3
	
}

BEFORESHOW2;

// Avec cet événement nous lions un changement au niveau du premier dropdown
// Si une nouvelle valeur est choisi, nous faisons un appel AJAX pour avoir les valeurs du second dropdown lié au premier
// Notez que cet événement doit être exécutée une seule fois si le formulaire est construit.

$initform = &lt;&lt;&lt; INITFORM
function(formid)
{
	jQuery(&quot;#UO&quot;,formid).change(function(e) {
		var cntryval = $(this).val();
		if(cntryval) {
			jQuery(&quot;#unites2&quot;,formid).html(&quot;&quot;);
			jQuery.ajax({
				url: &#039;drop_uo_n2.php&#039;,
				dataType: &#039;json&#039;,
				data: {q:cntryval},
				success : function(response)
				{
					var t=&quot;&quot;;
					jQuery.each(response, function(i,item) {
						t += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
					});
					jQuery(&quot;#unites2&quot;,formid).append(t).removeAttr(&quot;disabled&quot;);
				}
			});
		}
	});

		jQuery(&quot;#unites2&quot;,formid).change(function(e) {
		var N3val = $(this).val();
		if(N3val) {
			jQuery(&quot;#pilote&quot;,formid).html(&quot;&quot;);
			jQuery.ajax({
				url: &#039;drop_uo_n3.php&#039;,
				dataType: &#039;json&#039;,
				data: {z:N3val},
				success : function(response)
				{
					var t3=&quot;&quot;;
					jQuery.each(response, function(i,item) {
						t3 += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
					});
					jQuery(&quot;#pilote&quot;,formid).append(t3).removeAttr(&quot;disabled&quot;);
				}
			});
		}
	});
	
		

//	fin de test menu lvl 3
	

}
INITFORM;

// *****************   Fin du script des menus en cascade ***********************

// set a option when we add a record to insert a CustomerID too.
$grid-&gt;setNavOptions(&quot;add&quot;,array(&quot;editData&quot;=&gt;array(&quot;CustomerID&quot;=&gt;$rowid)));

$grid-&gt;setSubGridGrid (&quot;../PAS/grid_PAS_subsub.php&quot;);

$grid-&gt;navigator = true;
$grid-&gt;setNavOptions(&#039;navigator&#039;, array(&quot;excel&quot;=&gt;false,&quot;add&quot;=&gt;true,&quot;edit&quot;=&gt;true,&quot;del&quot;=&gt;true,&quot;view&quot;=&gt;true));
$grid-&gt;setNavOptions(&#039;edit&#039;, array(&quot;editCaption&quot;=&gt;&quot;MaJ Action Niveau UO/pôle&quot;,&quot;height&quot;=&gt;&#039;auto&#039;,&quot;dataheight&quot;=&gt;&quot;auto&quot;,&quot;width&quot;=&gt;&#039;1000&#039;,&quot;top&quot;=&gt;&#039;50&#039;, &quot;left&quot;=&gt;&#039;100&#039;,&quot;closeAfterEdit&quot; =&gt; true));  									// Paramètre du formulaire d&#039;édition
$grid-&gt;setNavOptions(&#039;add&#039;, array(&quot;CustomerID&quot;=&gt;$rowid, &quot;addCaption&quot;=&gt;&quot;Nouvelle Action UO/pôle&quot;,&quot;closeAfterAdd&quot;=&gt;true,&quot;height&quot;=&gt;&#039;auto&#039;,&quot;dataheight&quot;=&gt;&quot;auto&quot;,&quot;width&quot;=&gt;&#039;1000&#039;,&quot;top&quot;=&gt;&#039;50&#039;, &quot;left&quot;=&gt;&#039;100&#039;));

// Liaison des fonctions avant l&#039;ouverture du formulaire
$grid-&gt;setNavEvent(&#039;edit&#039;, &#039;beforeShowForm&#039;, $beforeshowedit);
$grid-&gt;setNavEvent(&#039;add&#039;, &#039;beforeShowForm&#039;, $beforeshowadd);
// Liaison des fonctions en cas de modifications
$grid-&gt;setNavEvent(&#039;edit&#039;, &#039;onInitializeForm&#039;, $initform);
$grid-&gt;setNavEvent(&#039;add&#039;, &#039;onInitializeForm&#039;, $initform);

// Enjoy
$subtable = $subtable.&quot;_t&quot;;
$pager = $subtable.&quot;_p&quot;;
$grid-&gt;renderGrid($subtable,$pager, true, null, array(&amp;$rowid), true,true);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

require_once '../PAS-config.php';

// include the jqGrid Class

require_once "../php/PHPSuito/jqGrid.php";

// include the driver class

require_once "../php/PHPSuito/DBdrivers/jqGridPdo.php";

require_once "../php/PHPSuito/jqCalendar.php";

// Connection to the server

$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);

// Tell the db that we use utf-8

$conn->query("SET NAMES utf8");

// Get the needed parameters passed from the main grid

// By default we add to postData subgrid and rowid parameters in the main grid

$oper = jqGridUtils::GetParam("oper");

$subtable = jqGridUtils::GetParam("grid_PAS_sub");

//$subtable = jqGridUtils::GetParam("subgrid");

$rowid = jqGridUtils::GetParam("rowid");

//if(!$subtable && !$rowid) die("Missed parameters");

// Create the jqGrid instance

$grid = new jqGridRender($conn);

$grid->debug = false;

// Write the SQL Query

$grid->SelectCommand = "SELECT

<code>seconde</code>.id_detail, <code>seconde</code>.CustomerID, <code>seconde</code>.description, <code>seconde</code>.UO, <code>seconde</code>.unites2, <code>seconde</code>.pilote, <code>seconde</code>.commentair, <code>seconde</code>.contributeur,

<code>seconde</code>.planif_deb_2,<code>seconde</code>.planif_fin_2,<code>seconde</code>.date_modif, <code>seconde</code>.date_real, <code>seconde</code>.etat_avance, <code>seconde</code>.comment

FROM <code>seconde</code> WHERE seconde.CustomerID = ?";

// set the ouput format to json

$grid->dataType = 'json';

$grid->setPrimaryKeyId('id_detail');

// Let the grid create the model

$grid->setColModel(null,array(&$rowid));

// Set the url from where we obtain the data

$grid->setUrl('../PAS/grid_PAS_sub.php');

$grid->table = 'seconde';

// Set some grid options

$grid->setGridOptions(array(

"height"=>"Auto", // Hauteur automatique du tableau

"hoverrows"=>true, // highlight la ligne survolée

"caption"=>"Action UO/Pôle 2", // Titre du tableau

"width"=>1670,

"rowList"=>array(20,35,50), // Déclaration du nombres de lignes affichables

"rowNum"=>10,

"sortname"=>"id_detail",

// "postData"=>array("grid_PAS_sub"=>$subtable,"rowid"=>$rowid)));

"postData"=>array("subgrid"=>$subtable,"rowid"=>$rowid)));

//$grid->setNavOptions("add",array("editData"=>array("CustomerID"=>$rowid)));

// Changement des propriétés des champs.

$grid->setColProperty('CustomerID', array("hidden"=>true,"editable"=>false));

$grid->setColProperty('id_detail', array("label"=>"Réf détail", "hidden"=>true,"editable"=>false, "width"=>60));

$grid->setColProperty('contributeur', array("label"=>"Contributeur", "width"=>100));

// champ zone de texte.

$grid->setColProperty('description', array("label"=>"Description Action UO/Pôle", "editpilote"=> 'textarea',"editoptions"=>array("style"=>"width:98%;"), "width"=>250, "editable"=>true));

$grid->setColProperty('commentair', array("label"=>"Commentaire Pilote Action", "editpilote"=> 'textarea',"editoptions"=>array("style"=>"width:98%;"), "width"=>200, "editable"=>true));

$grid->setColProperty('comment', array("label"=>"Commentaire QSE", "editpilote"=> 'textarea',"editoptions"=>array("style"=>"width:98%;"), "width"=>200, "editable"=>true));

// ****************************************

//Champ date Datepicker

$grid->setColProperty('date_modif', array("label"=>"Date modif","align"=>"center", "width"=>80,"formatter"=>"date", // Défini le champ comme un champ ""date""

"formatoptions"=>array("srcformat"=>"Y-m-d","newformat"=>"d/m/Y"), // Défini le format d'affichage en jj/mm/aaaa

"search"=>true )); // Autorise la recherche sur ce champ

$grid->setDatepicker('date_modif', array("buttonIcon"=>true, 'changeMonth'=> true), true, true); // Active le Datepicker en mode bouton

$grid->datearray = array('date_modif'); // Déclaration du champ contenant une date

$grid->SetUserDate("d/m/Y"); // Configuration de l'affichage de la date coté utilisateur

// -------

$grid->setColProperty('date_real', array("label"=>"Date réalisation","align"=>"center", "width"=>80,"formatter"=>"date", // Défini le champ comme un champ ""date""

"formatoptions"=>array("srcformat"=>"Y-m-d","newformat"=>"d/m/Y"), // Défini le format d'affichage en jj/mm/aaaa

"search"=>true)); // Autorise la recherche sur ce champ

$grid->setDatepicker('date_real', array("buttonIcon"=>true, 'changeMonth'=> true), true, true); // Active le Datepicker en mode bouton

$grid->datearray = array('date_real'); // Déclaration du champ contenant une date

$grid->SetUserDate("d/m/Y"); // Configuration de l'affichage de la date coté utilisateur

// -------

$grid->setColProperty('planif_deb_2', array("label"=>"Début planif","align"=>"center", "width"=>80,"formatter"=>"date", // Défini le champ comme un champ ""date""

"formatoptions"=>array("srcformat"=>"Y-m-d","newformat"=>"d/m/Y"), // Défini le format d'affichage en jj/mm/aaaa

"search"=>true)); // Autorise la recherche sur ce champ

$grid->setDatepicker('planif_deb_2', array("buttonIcon"=>true, 'changeMonth'=> true), true, true); // Active le Datepicker en mode bouton

$grid->datearray = array('planif_deb_2'); // Déclaration du champ contenant une date

$grid->SetUserDate("d/m/Y"); // Configuration de l'affichage de la date coté utilisateur

// -------

$grid->setColProperty('planif_fin_2', array("label"=>"Fin planif","align"=>"center", "width"=>80,"formatter"=>"date", // Défini le champ comme un champ ""date""

"formatoptions"=>array("srcformat"=>"Y-m-d","newformat"=>"d/m/Y"), // Défini le format d'affichage en jj/mm/aaaa

"search"=>true)); // Autorise la recherche sur ce champ

$grid->setDatepicker('planif_fin_2', array("buttonIcon"=>true, 'changeMonth'=> true), true, true); // Active le Datepicker en mode bouton

$grid->datearray = array('plannif_fin_2'); // Déclaration du champ contenant une date

$grid->SetUserDate("d/m/Y"); // Configuration de l'affichage de la date coté utilisateur

// ****************************************

// champ avec menu déroulant

$grid->setColProperty('etat_avance', array("label"=>"avancement", "width"=>60,"align"=>"center", "editable"=>true, "formatter"=>"integer", "formatoptions"=>array("elmprefix"=>"(*)", "suffix"=>" %",)));

$grid->setSelect("etat_avance", "SELECT avance,avance FROM <code>menu_avancement</code> ORDER BY <code>avance</code> ASC ",false,true,true);

$grid->setColProperty('UO', array("edittype"=>"select", "label"=>"UO/Pôle", "width"=>70, "align"=>"left", "editoptions" => array("value"=>" :Select")));

$grid->setColProperty('pilote', array("edittype"=>"select","label"=>"Pilote", "width"=>70, "align"=>"left", "editoptions" => array("value"=>" :Select")));

$grid->setColProperty('unites2', array("edittype"=>"select", "label"=>"Unités", "width"=>70, "align"=>"left", "editoptions" => array("value"=>" :Select")));

// $grid->setColProperty('unites', array("label"=>"Unités", "width"=>80));

// $grid->setSelect("unites", "SELECT <code>unites</code>,<code>unites</code> FROM <code>menu_unite</code> ORDER BY unites ASC",false,true,true);

// ****************************************

// <--------------------------------------------->

// Fonction de génération des menus déroulants en cascade des responsables

$beforeshowadd = <<< BEFORESHOW

function(formid)

{

jQuery.ajax({

url: 'drop_uo_n1.php',

dataType: 'json',

async : false,

// envoi q:1 dans le cas d'ajout ou de modification drop_uo_n1.php

data: {q:1},

data: {z:1},

success : function(response)

{

var t="<option value=''>Select</option>";

jQuery.each(response, function(i,item) {

t += "<option value='"+item.id+"'>"+item.value+"</option>";

});

jQuery("#UO",formid).html("").append(t);

}

});

jQuery("#unites2",formid).html("<option>Select</option>");

}

BEFORESHOW;

$beforeshowedit = <<< BEFORESHOW2

function(formid)

{

var sr = jQuery("$subtable").jqGrid('getGridParam','selrow');

var selc = jQuery("$subtable").jqGrid('getCell',sr,'UO');

console.info("sr:",sr);

console.log("selc:",selc);

jQuery.ajax({

url: 'drop_uo_n1.php',

dataType: 'json',

async : false,

// Ne pas envoyer q en cas d'ajout ou de modif

success : function(response)

{

var t="";

jQuery.each(response, function(i,item) {

if( selc == item.id) {

t += "<option value='"+item.id+"' selected='selected'>"+item.value+"</option>";

} else {

t += "<option value='"+item.id+"'>"+item.value+"</option>";

}

});

jQuery("#UO",formid).html("").append(t);

}

});

// Prend la valeur du menu déroulant 1

var cntryval = $("#UO",formid).val();

jQuery("#unites2",formid).html("<option>Select</option>");

console.log(cntryval);

if(cntryval) {

// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 2

// SVP regarder le fichier drop_uo_n2.php

jQuery.ajax({

url: 'drop_uo_n2.php',

dataType: 'json',

data: {q:cntryval},

success : function(response)

{

var t="", sv="";

if(sr)

{

// récupére le menu N2 dans le Grid

sv = jQuery("#grid").jqGrid('getCell',sr,'unites2');

jQuery.each(response, function(i,item) {

t += "<option value='"+item.id+"'>"+item.value+"</option>";

});

// vide la selection et ajoute la nouvelle valeur

jQuery("#unites2",formid).html("").append(t);

if(sv)

{

// sélectionne la valeur du menu N2

jQuery("#unites2",formid).val(sv).removeAttr("disabled");

}

});

} else {

jQuery("#unites2",formid).attr("disabled","disabled");

}

var sr3 = jQuery("$subtable").jqGrid('getGridParam','selrow');

var selc3 = jQuery("$subtable").jqGrid('getCell',sr,'unites2');

jQuery.ajax({

url: 'drop_uo_n2.php',

dataType: 'json',

async : false,

// Ne pas envoyer q en cas d'ajout ou de modif

success : function(response)

{

var t3="";

jQuery.each(response, function(i,item) {

if( selc3 == item.id) {

t3 += "<option value='"+item.id+"' selected='selected'>"+item.value+"</option>";

} else {

t3 += "<option value='"+item.id+"'>"+item.value+"</option>";

}

});

jQuery("#unites2",formid).html("").append(t);

}

});

// Prend la valeur du menu déroulant 2

var N3val = $("#unites2",formid).val();

jQuery("#pilote",formid).html("<option>Select</option>");

if(N3val) {

// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 3

// SVP regarder le fichier drop_uo_N3.php

jQuery.ajax({

url: 'drop_uo_N3.php',

dataType: 'json',

data: {z:N3val},

success : function(response)

{

var t3="", sv3="";

if(sr3)

{

// récupére le menu 3 dans le Grid

sv3 = jQuery("$subtable").jqGrid('getCell',sr3,'pilote');

jQuery.each(response, function(i,item) {

t3 += "<option value='"+item.id+"'>"+item.value+"</option>";

});

// vide la selection et ajoute la nouvelle valeur

jQuery("#pilote",formid).html("").append(t3);

if(sv3)

{

// sélectionne la valeur du menu N2

jQuery("#pilote",formid).val(sv3).removeAttr("disabled");

}

});

} else {

jQuery("#pilote",formid).attr("disabled","disabled");

}

// fin de test menu lvl 3

}

BEFORESHOW2;

// Avec cet événement nous lions un changement au niveau du premier dropdown

// Si une nouvelle valeur est choisi, nous faisons un appel AJAX pour avoir les valeurs du second dropdown lié au premier

// Notez que cet événement doit être exécutée une seule fois si le formulaire est construit.

$initform = <<< INITFORM

function(formid)

{

jQuery("#UO",formid).change(function(e) {

var cntryval = $(this).val();

if(cntryval) {

jQuery("#unites2",formid).html("");

jQuery.ajax({

url: 'drop_uo_n2.php',

dataType: 'json',

data: {q:cntryval},

success : function(response)

{

var t="";

jQuery.each(response, function(i,item) {

t += "<option value='"+item.id+"'>"+item.value+"</option>";

});

jQuery("#unites2",formid).append(t).removeAttr("disabled");

}

});

}

});

jQuery("#unites2",formid).change(function(e) {

var N3val = $(this).val();

if(N3val) {

jQuery("#pilote",formid).html("");

jQuery.ajax({

url: 'drop_uo_n3.php',

dataType: 'json',

data: {z:N3val},

success : function(response)

{

var t3="";

jQuery.each(response, function(i,item) {

t3 += "<option value='"+item.id+"'>"+item.value+"</option>";

});

jQuery("#pilote",formid).append(t3).removeAttr("disabled");

}

});

}

});

// fin de test menu lvl 3

}

INITFORM;

// ***************** Fin du script des menus en cascade ***********************

// set a option when we add a record to insert a CustomerID too.

$grid->setNavOptions("add",array("editData"=>array("CustomerID"=>$rowid)));

$grid->setSubGridGrid ("../PAS/grid_PAS_subsub.php");

$grid->navigator = true;

$grid->setNavOptions('navigator', array("excel"=>false,"add"=>true,"edit"=>true,"del"=>true,"view"=>true));

$grid->setNavOptions('edit', array("editCaption"=>"MaJ Action Niveau UO/pôle","height"=>'auto',"dataheight"=>"auto","width"=>'1000',"top"=>'50', "left"=>'100',"closeAfterEdit" => true)); // Paramètre du formulaire d'édition

$grid->setNavOptions('add', array("CustomerID"=>$rowid, "addCaption"=>"Nouvelle Action UO/pôle","closeAfterAdd"=>true,"height"=>'auto',"dataheight"=>"auto","width"=>'1000',"top"=>'50', "left"=>'100'));

// Liaison des fonctions avant l'ouverture du formulaire

$grid->setNavEvent('edit', 'beforeShowForm', $beforeshowedit);

$grid->setNavEvent('add', 'beforeShowForm', $beforeshowadd);

// Liaison des fonctions en cas de modifications

$grid->setNavEvent('edit', 'onInitializeForm', $initform);

$grid->setNavEvent('add', 'onInitializeForm', $initform);

// Enjoy

$subtable = $subtable."_t";

$pager = $subtable."_p";

$grid->renderGrid($subtable,$pager, true, null, array(&$rowid), true,true);

This topic was modified 9 years, 12 months ago by Saroumane.
This topic was modified 9 years, 12 months ago by Saroumane.

Jqgrid PHP 5.1.0

Creator

Topic

Viewing 5 replies - 1 through 5 (of 5 total)

Author

Replies

May 9, 2016 at 11:17 am #125142

tony

Keymaster

Hello,

I think you have mixed the PHP code with javaScript. Thuis can be seen in beforeShowForm event, where the code is stored in $beforeshowedit variable.

In this code you have calls to jQuery(“$subtable”).jqGrid(‘getGridParam’,…);

$subtable is a PHP variable while jQuery(..) is a JavaScript code.

Since this id is changed dynamically you can not obtain it in this way.

To solve the problem use this insteag of $subtable in beforeShowForm event.

The this point to the current active grid.

In beforeShowForm event replace all

jQuery("$subtable").jqGrid(...);

with

jQuery(this).jqGrid(...);

Best Regards,

May 9, 2016 at 3:08 pm #125143

Saroumane

Participant

Hello,
thanks for your hell Tony.
I remplaced the variable ($subtable) by (this) in this part of code:

function(formid)
{
	var sr = jQuery(this).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
	var selc = jQuery(this).jqGrid(&#039;getCell&#039;,sr,&#039;UO&#039;);

function(formid)

{

var sr = jQuery(this).jqGrid('getGridParam','selrow');

var selc = jQuery(this).jqGrid('getCell',sr,'UO');

Now the first dropdown is OK, but the second dropdown is empty and the third display “select”. I think the “q” variable is not fill.
I changed all ($subtable) variable by (this) everywherein the script, but the dropdowns are not OK.

What do you think about this new problem ?

Thank,

PS: Sorry my english is poor.

The “beforeshow edit” script

$beforeshowedit = &lt;&lt;&lt; BEFORESHOW2
function(formid)
{
	var sr = jQuery(this).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
	var selc = jQuery(this).jqGrid(&#039;getCell&#039;,sr,&#039;UO&#039;);
	jQuery.ajax({
		url: &#039;drop_uo_n1.php&#039;,
		dataType: &#039;json&#039;,
		async : false,
		// Ne pas envoyer q en cas d&#039;ajout ou de modif
		success : function(response)
		{
			var t=&quot;&quot;;
			jQuery.each(response, function(i,item) {
				if( selc == item.id) {
					t += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039; selected=&#039;selected&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
				} else {
					t += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
				}
			});
			jQuery(&quot;#UO&quot;,formid).html(&quot;&quot;).append(t);
		}
	});
	
    // Prend la valeur du menu déroulant 1
	var cntryval = $(&quot;#UO&quot;,formid).val();
	jQuery(&quot;#unites2&quot;,formid).html(&quot;&lt;option&gt;Select&lt;/option&gt;&quot;);
	if(cntryval) {
	    // Si la valeur est trouvée, utilise AJAX  pour obtenir les valeurs de Niv 2
		// SVP regarder le fichier drop_uo_n2.php
		jQuery.ajax({
			url: &#039;drop_uo_n2.php&#039;,
			dataType: &#039;json&#039;,
			data: {q:cntryval},
			success : function(response)
			{
				var t=&quot;&quot;, sv=&quot;&quot;;
				if(sr)
				{
				    // récupére le menu N2 dans le Grid
					sv = jQuery(this).jqGrid(&#039;getCell&#039;,sr,&#039;unites2&#039;);
					jQuery.each(response, function(i,item) {
						t += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
					});
					// vide la selection et ajoute la nouvelle valeur
					jQuery(&quot;#unites2&quot;,formid).html(&quot;&quot;).append(t);
					if(sv)
					{
					    // sélectionne la valeur du menu N2
						jQuery(&quot;#unites2&quot;,formid).val(sv).removeAttr(&quot;disabled&quot;);
					}
				}
			}
		});
	} else {
		jQuery(&quot;#unites2&quot;,formid).attr(&quot;disabled&quot;,&quot;disabled&quot;);
	}
 

	var sr3 = jQuery(this).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
	var selc3 = jQuery(this).jqGrid(&#039;getCell&#039;,sr,&#039;unites2&#039;);
	jQuery.ajax({
		url: &#039;drop_uo_n2.php&#039;,
		dataType: &#039;json&#039;,
		async : false,
		// Ne pas envoyer q en cas d&#039;ajout ou de modif
		success : function(response)
		{
			var t3=&quot;&quot;;
			jQuery.each(response, function(i,item) {
				if( selc3 == item.id) {
					t3 += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039; selected=&#039;selected&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
				} else {
					t3 += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
				}
			});
			jQuery(&quot;#unites2&quot;,formid).html(&quot;&quot;).append(t);
		}
	});	

//	Prend la valeur du menu déroulant 2

  var N3val = $(&quot;#unites2&quot;,formid).val();

		
	jQuery(&quot;#pilote&quot;,formid).html(&quot;&lt;option&gt;Select&lt;/option&gt;&quot;);
	if(N3val) {
	    // Si la valeur est trouvée, utilise AJAX  pour obtenir les valeurs de Niv 3
		// SVP regarder le fichier drop_uo_N3.php
		jQuery.ajax({
			url: &#039;drop_uo_N3.php&#039;,
			dataType: &#039;json&#039;,
			data: {z:N3val},
			success : function(response)
			{
				var t3=&quot;&quot;, sv3=&quot;&quot;;
				if(sr3)
				{
				    // récupére le menu 3 dans le Grid
					sv3 = jQuery(this).jqGrid(&#039;getCell&#039;,sr3,&#039;pilote&#039;);
					jQuery.each(response, function(i,item) {
						t3 += &quot;&lt;option value=&#039;&quot;+item.id+&quot;&#039;&gt;&quot;+item.value+&quot;&lt;/option&gt;&quot;;
					});
					// vide la selection et ajoute la nouvelle valeur
					jQuery(&quot;#pilote&quot;,formid).html(&quot;&quot;).append(t3);
					if(sv3)
					{
					    // sélectionne la valeur du menu N2
						jQuery(&quot;#pilote&quot;,formid).val(sv3).removeAttr(&quot;disabled&quot;);
					}
				}
			}
		});
	} else {
		jQuery(&quot;#pilote&quot;,formid).attr(&quot;disabled&quot;,&quot;disabled&quot;);
	}	

	// fin de test menu lvl 3
	
}

BEFORESHOW2;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

$beforeshowedit = <<< BEFORESHOW2

function(formid)

{

var sr = jQuery(this).jqGrid('getGridParam','selrow');

var selc = jQuery(this).jqGrid('getCell',sr,'UO');

jQuery.ajax({

url: 'drop_uo_n1.php',

dataType: 'json',

async : false,

// Ne pas envoyer q en cas d'ajout ou de modif

success : function(response)

{

var t="";

jQuery.each(response, function(i,item) {

if( selc == item.id) {

t += "<option value='"+item.id+"' selected='selected'>"+item.value+"</option>";

} else {

t += "<option value='"+item.id+"'>"+item.value+"</option>";

}

});

jQuery("#UO",formid).html("").append(t);

}

});

// Prend la valeur du menu déroulant 1

var cntryval = $("#UO",formid).val();

jQuery("#unites2",formid).html("<option>Select</option>");

if(cntryval) {

// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 2

// SVP regarder le fichier drop_uo_n2.php

jQuery.ajax({

url: 'drop_uo_n2.php',

dataType: 'json',

data: {q:cntryval},

success : function(response)

{

var t="", sv="";

if(sr)

{

// récupére le menu N2 dans le Grid

sv = jQuery(this).jqGrid('getCell',sr,'unites2');

jQuery.each(response, function(i,item) {

t += "<option value='"+item.id+"'>"+item.value+"</option>";

});

// vide la selection et ajoute la nouvelle valeur

jQuery("#unites2",formid).html("").append(t);

if(sv)

{

// sélectionne la valeur du menu N2

jQuery("#unites2",formid).val(sv).removeAttr("disabled");

}

});

} else {

jQuery("#unites2",formid).attr("disabled","disabled");

}

var sr3 = jQuery(this).jqGrid('getGridParam','selrow');

var selc3 = jQuery(this).jqGrid('getCell',sr,'unites2');

jQuery.ajax({

url: 'drop_uo_n2.php',

dataType: 'json',

async : false,

// Ne pas envoyer q en cas d'ajout ou de modif

success : function(response)

{

var t3="";

jQuery.each(response, function(i,item) {

if( selc3 == item.id) {

t3 += "<option value='"+item.id+"' selected='selected'>"+item.value+"</option>";

} else {

t3 += "<option value='"+item.id+"'>"+item.value+"</option>";

}

});

jQuery("#unites2",formid).html("").append(t);

}

});

// Prend la valeur du menu déroulant 2

var N3val = $("#unites2",formid).val();

jQuery("#pilote",formid).html("<option>Select</option>");

if(N3val) {

// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 3

// SVP regarder le fichier drop_uo_N3.php

jQuery.ajax({

url: 'drop_uo_N3.php',

dataType: 'json',

data: {z:N3val},

success : function(response)

{

var t3="", sv3="";

if(sr3)

{

// récupére le menu 3 dans le Grid

sv3 = jQuery(this).jqGrid('getCell',sr3,'pilote');

jQuery.each(response, function(i,item) {

t3 += "<option value='"+item.id+"'>"+item.value+"</option>";

});

// vide la selection et ajoute la nouvelle valeur

jQuery("#pilote",formid).html("").append(t3);

if(sv3)

{

// sélectionne la valeur du menu N2

jQuery("#pilote",formid).val(sv3).removeAttr("disabled");

}

});

} else {

jQuery("#pilote",formid).attr("disabled","disabled");

}

// fin de test menu lvl 3

}

BEFORESHOW2;

Jqgrid PHP 5.1.0

May 10, 2016 at 9:57 am #125147

tony

Keymaster

Hello,

Please check if the cntryval is filed using console.log.

One more advice. I suggest you to create variable which refer to this and use it in your code, something like this:

var that = this;
var sr = jQuery(that).jqGrid(‘getGridParam’,’selrow’);

This is needed since in some scopes like ajax and each this refers to the current content.

I suggest you to make first two depended list boxes – i.e as simple as possible and see where the problem is.

You can check every variable and see what is happen.

Also be a sure that the ajax calls are ok and they return the expected content.

Please let me know if you have difficulties on realizing this.

Kind Regards,

May 12, 2016 at 9:06 pm #125163

Saroumane

Participant

Hello Tony,
I followed your advice, and I create a variable that=this. After this change, the second dropdown work fine, but not the third dropdown. In the console, the N3val variable is not filled. var N3val = $("#unites2",formid).val();

I created a variable var N3val = selc3; and my third dropdown seems to work fine.

What do think about this solution?

Kind Regards,

$beforeshowedit = &lt;&lt;&lt; BEFORESHOW2
function(formid)
{
var that = this;
var sr = jQuery(that).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
var selc = jQuery(that).jqGrid(&#039;getCell&#039;,sr,&#039;UO&#039;);
jQuery.ajax({
url: &#039;drop_uo_n1.php&#039;,
dataType: &#039;json&#039;,
async : false,
// Ne pas envoyer q en cas d&#039;ajout ou de modif
success : function(response)
{
var t=&quot;&quot;;
jQuery.each(response, function(i,item) {
if( selc == item.id) {
t += &quot;&quot;+item.value+&quot;&quot;;
} else {
t += &quot;&quot;+item.value+&quot;&quot;;
}
});
jQuery(&quot;#UO&quot;,formid).html(&quot;&quot;).append(t);
}
});

// Prend la valeur du menu déroulant 1

var cntryval = $(&quot;#UO&quot;,formid).val();

console.log (&quot;cntryval:&quot;+cntryval);

jQuery(&quot;#unites2&quot;,formid).html(&quot;Select&quot;);
if(cntryval) {
// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 2
// SVP regarder le fichier drop_uo_n2.php
jQuery.ajax({
url: &#039;drop_uo_n2.php&#039;,
dataType: &#039;json&#039;,
data: {q:cntryval},
success : function(response)
{

var t=&quot;&quot;, sv=&quot;&quot;;
console.log (&quot;t:&quot;+t);

console.log (&quot;sr:&quot;+sr);

if(sr)
{
// récupére le menu N2 dans le Grid
sv = jQuery(that).jqGrid(&#039;getCell&#039;,sr,&#039;unites2&#039;);
console.log (&quot;sv:&quot;+sv);
jQuery.each(response, function(i,item) {
t += &quot;&quot;+item.value+&quot;&quot;;
});
// vide la selection et ajoute la nouvelle valeur
jQuery(&quot;#unites2&quot;,formid).html(&quot;&quot;).append(t);
if(sv)
{
// sélectionne la valeur du menu N2
jQuery(&quot;#unites2&quot;,formid).val(sv).removeAttr(&quot;disabled&quot;);
}
}
}
});
} else {
jQuery(&quot;#unites2&quot;,formid).attr(&quot;disabled&quot;,&quot;disabled&quot;);
}

var sr3 = jQuery(that).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
var selc3 = jQuery(that).jqGrid(&#039;getCell&#039;,sr,&#039;unites2&#039;);
console.log (&quot;selc3:&quot;+selc3);

jQuery.ajax({
url: &#039;drop_uo_n2.php&#039;,
dataType: &#039;json&#039;,
async : false,
// Ne pas envoyer q en cas d&#039;ajout ou de modif
success : function(response)
{
var t3=&quot;&quot;;
jQuery.each(response, function(i,item) {
if( selc3 == item.id) {
t3 += &quot;&quot;+item.value+&quot;&quot;;
} else {
t3 += &quot;&quot;+item.value+&quot;&quot;;
}
});
jQuery(&quot;#unites2&quot;,formid).html(&quot;&quot;).append(t);
}
});

// Prend la valeur du menu déroulant 2

// var N3val = $(&quot;#unites2&quot;,formid).val();
var N3val = selc3;

console.log (&quot;N3val:&quot;+N3val);

jQuery(&quot;#pilote&quot;,formid).html(&quot;Select&quot;);
if(N3val) {
// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 3
// SVP regarder le fichier drop_uo_N3.php
jQuery.ajax({
url: &#039;drop_uo_N3.php&#039;,
dataType: &#039;json&#039;,
data: {z:N3val},
success : function(response)
{

var t3=&quot;&quot;, sv3=&quot;&quot;;
console.log (&quot;N3val:&quot;+N3val);
console.log (&quot;t3:&quot;+t3);
console.log (&quot;sv3:&quot;+sv3);
console.log (&quot;sr3:&quot;+sr3);
if(sr3)
{
// récupére le menu 3 dans le Grid
sv3 = jQuery(that).jqGrid(&#039;getCell&#039;,sr3,&#039;pilote&#039;);
jQuery.each(response, function(i,item) {
console.log (&quot;sv3:&quot;+sv3);
t3 += &quot;&quot;+item.value+&quot;&quot;;
});
// vide la selection et ajoute la nouvelle valeur
jQuery(&quot;#pilote&quot;,formid).html(&quot;&quot;).append(t3);
if(sv3)
{
// sélectionne la valeur du menu N2
jQuery(&quot;#pilote&quot;,formid).val(sv3).removeAttr(&quot;disabled&quot;);
}
}
}
});
} else {
jQuery(&quot;#pilote&quot;,formid).attr(&quot;disabled&quot;,&quot;disabled&quot;);
}

// fin de test menu lvl 3

}
BEFORESHOW2;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

$beforeshowedit = <<< BEFORESHOW2

function(formid)

{

var that = this;

var sr = jQuery(that).jqGrid('getGridParam','selrow');

var selc = jQuery(that).jqGrid('getCell',sr,'UO');

jQuery.ajax({

url: 'drop_uo_n1.php',

dataType: 'json',

async : false,

// Ne pas envoyer q en cas d'ajout ou de modif

success : function(response)

{

var t="";

jQuery.each(response, function(i,item) {

if( selc == item.id) {

t += ""+item.value+"";

} else {

t += ""+item.value+"";

}

});

jQuery("#UO",formid).html("").append(t);

}

});

// Prend la valeur du menu déroulant 1

var cntryval = $("#UO",formid).val();

console.log ("cntryval:"+cntryval);

jQuery("#unites2",formid).html("Select");

if(cntryval) {

// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 2

// SVP regarder le fichier drop_uo_n2.php

jQuery.ajax({

url: 'drop_uo_n2.php',

dataType: 'json',

data: {q:cntryval},

success : function(response)

{

var t="", sv="";

console.log ("t:"+t);

console.log ("sr:"+sr);

if(sr)

{

// récupére le menu N2 dans le Grid

sv = jQuery(that).jqGrid('getCell',sr,'unites2');

console.log ("sv:"+sv);

jQuery.each(response, function(i,item) {

t += ""+item.value+"";

});

// vide la selection et ajoute la nouvelle valeur

jQuery("#unites2",formid).html("").append(t);

if(sv)

{

// sélectionne la valeur du menu N2

jQuery("#unites2",formid).val(sv).removeAttr("disabled");

}

});

} else {

jQuery("#unites2",formid).attr("disabled","disabled");

}

var sr3 = jQuery(that).jqGrid('getGridParam','selrow');

var selc3 = jQuery(that).jqGrid('getCell',sr,'unites2');

console.log ("selc3:"+selc3);

jQuery.ajax({

url: 'drop_uo_n2.php',

dataType: 'json',

async : false,

// Ne pas envoyer q en cas d'ajout ou de modif

success : function(response)

{

var t3="";

jQuery.each(response, function(i,item) {

if( selc3 == item.id) {

t3 += ""+item.value+"";

} else {

t3 += ""+item.value+"";

}

});

jQuery("#unites2",formid).html("").append(t);

}

});

// Prend la valeur du menu déroulant 2

// var N3val = $("#unites2",formid).val();

var N3val = selc3;

console.log ("N3val:"+N3val);

jQuery("#pilote",formid).html("Select");

if(N3val) {

// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 3

// SVP regarder le fichier drop_uo_N3.php

jQuery.ajax({

url: 'drop_uo_N3.php',

dataType: 'json',

data: {z:N3val},

success : function(response)

{

var t3="", sv3="";

console.log ("N3val:"+N3val);

console.log ("t3:"+t3);

console.log ("sv3:"+sv3);

console.log ("sr3:"+sr3);

if(sr3)

{

// récupére le menu 3 dans le Grid

sv3 = jQuery(that).jqGrid('getCell',sr3,'pilote');

jQuery.each(response, function(i,item) {

console.log ("sv3:"+sv3);

t3 += ""+item.value+"";

});

// vide la selection et ajoute la nouvelle valeur

jQuery("#pilote",formid).html("").append(t3);

if(sv3)

{

// sélectionne la valeur du menu N2

jQuery("#pilote",formid).val(sv3).removeAttr("disabled");

}

});

} else {

jQuery("#pilote",formid).attr("disabled","disabled");

}

// fin de test menu lvl 3

}

BEFORESHOW2;

Jqgrid PHP 5.1.0

May 13, 2016 at 1:40 pm #125164

tony

Keymaster

Hello,

If this work as expected it is ok to get the variable this way.

Maybe Your ajax which get unitest2 does not have async = false. Try to add this to this ajax request.

dependent dropdown in subgrid

Search Forum

Recent Replies

Forum Statistics

UserOnline