Discussion :

[oulahoup]

version: jquery-ui-1.7

J'ai des petites portlet dans un container que je peux déplacer sur 6 colonnes.

l'objectif est de sauvegarder leur position dans une SGBD ou un cookie.

Tout d'abord, je construis mon tableau avec le script ci-dessous; on voit bien la position des item, içi 4 (item-1 à item-4, cf code html plus bas) mais je n'arrive pas à sauvegarder mon tableau intégralement, mais seulement colonne à colonne (je vois bien l'update ans la SGBD).

Le probleme si situe au niveau du stop: function(), mais je ne n'arrive pas à trouver par quoi le remplacer pour sauvegarder la variable MonTableau intégralement pour le mettre dans ma SGBD via l'update que vous pouvez apercevoir.

code JQUERY:

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
$(function() {
 
$(".column").sortable({ 
  connectWith: ['.column'], 
  stop: function() { 
 
        $(".column").each(function(){ 
	var MonTableau = $(this).sortable("toArray");
 
	var totodb = "UPDATE  `widget` SET  `top` =  '" + MonTableau +"'  WHERE  `nom` = 'draggable0';";
 
	$.ajax({
		url: "sgbd_action.php",
		type: "POST",
		data: "data=" + totodb,
		// complete: function(){},
		success: function(feedback){ $('#data').html(feedback); }
	// error: function(){}
	});
 
	}); } });
 
//code du portlet classic issue de site jquery ui
 
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
		.find(".portlet-header")
		.addClass("ui-widget-header ui-corner-all")
		.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
		.end()
		.find(".portlet-content");
 
$(".portlet-header .ui-icon").click(function() {
	$(this).toggleClass("ui-icon-minusthick");
	$(this).parents(".portlet:first").find(".portlet-content").toggle();
		});
 
$(".column").disableSelection();
 
	});

Le code HTML:

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
        <div id="containment-wrapper">
 
          <div id="col1" class="column">
            <div class="portlet" id="item-1">
              <div class="portlet-header">1</div>
              <div class="portlet-content">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit</div>
            </div>
            <div class="portlet" id="item-2">
              <div class="portlet-header">2</div>
              <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
                        <div class="portlet" id="item-3">
              <div class="portlet-header">3</div>
              <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
          </div>
          <div id="col2" class="column">
                      <div class="portlet" id="item-4">
              <div class="portlet-header">4</div>
              <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            </div>
          <div id="col3" class="column"></div>
          <div id="col4" class="column"></div>
          <div id="col5" class="column"></div>
          <div id="col6" class="column"></div>
 
        </div>

Si vous pouviez m'aider

Merci

Oulahoup

[danielhagnoul]

Bonsoir.

Je ne connais rien au portlet, SGDB et autre PHP, mais je suggère de transformer :

Code :

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

1
2
 
$(".column").each(function(){ ...});

en :

Code :

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

1
2
 
$(".column").each(function(i, item){ ...});

pour traiter chaque item (column) séparèment.

[oulahoup]

Bonsoir,

En fait, j'ai trouvé une solution alternative qui me semble bonne et pas trop consommatrice en cpu.

C'est un travail intermédiaire dans le sens qu'il faut X champs dans la sgbd correspondant au nb de colonne dans le container.

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
$(function() {

i=1;
	
$(".column").sortable({ 
  connectWith: ['.column'], 
  stop: function() { 
 
        $(".column").each(function(){ 
	var MonTableau = $(this).sortable("toArray");
	
	var totodb = "UPDATE  `widget` SET  `top` =  '" + MonTableau +"'  WHERE  `num_colonne` = '"+i+"';";

if(i>=6) { i=1; }
	else { i++; }
	
	$.ajax({
		url: "sgbd_action.php",
		type: "POST",
		data: "data=" + totodb,
		// complete: function(){},
		success: function(feedback){ $('#data').html(feedback); }
	// error: function(){}
	});
	
	}); } });
 
//code du portlet classic issue de site jquery ui
 
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
		.find(".portlet-header")
		.addClass("ui-widget-header ui-corner-all")
		.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
		.end()
		.find(".portlet-content");
 
$(".portlet-header .ui-icon").click(function() {
	$(this).toggleClass("ui-icon-minusthick");
	$(this).parents(".portlet:first").find(".portlet-content").toggle();
		});
 
$(".column").disableSelection();
	
	});