Discussion :

[french-petzouille]

bonjour

j'ai utilisé le plug-in SORTABLE pour organiser des colonnes modifiables.
tout va bien avec le modèle qui utilise les "PORTLETS".

exemple officiel ici --> https://jqueryui.com/sortable/#portlets

La mise a jour de la position de tous les éléments en bdd se fait via :

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
    $(".column").sortable({
        connectWith: ".column",
        handle: ".portlet-header",
        cancel: ".portlet-toggle",
        placeholder: "portlet-placeholder ui-corner-all",
        update: function() {
                var dat = [];
                var i = 0;
                $(".column").each(function() {
                    dat[i++] = [this.id,$(this).sortable("toArray")]; // this.id is the column id, the 2nd element are the job id's in that column
                });    
                $.ajax({
                    method: "POST",
                    url: "b_getdetailsmodelebulletin.php",
                    data: {data: dat}
                });
            }
    });

ca marche.

j'ai un bouton qui me permet d'ajouter dynamiquement un élément (portlets) à la fin de la première colonne de ma page :

Code :

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

1
2
3
    $('#addSeparateur').click(function(){
        $('.column:first').append('<div class="red portlet separateur ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ID_999"><div class="portlet-header ui-widget-header ui-corner-all"><span class="ui-icon portlet-toggle ui-icon-minusthick"></span><hr /></div><div class="portlet-content hidden">- simple ligne de séparation - </div></div>');
    });

cela insère l'élément dans la première colonne... avec un aspect identique aux autres éléments.
je peux en insérer plusieurs afin de des mettre par la suite où je veux.

le hic est que la suppression d'un élément ainsi créé par un bouton dédié ne permet pas de mettre à jour la position des tous mes éléments dans la vdd. En effet ... je n'ai pas drag&dropé via ma souris un élément vers une autre position.

Le script mis le bouton de SUPPRESIION d'un portlets est :

Code :

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

1
2
3
4
    $('#suppSeparateur').click(function(){
        $('.column > div.separateur').last().remove();
        $( ".column" ).sortable( "refresh" );
    });

ma question :

comment forcer la MAJ quand j'ajoute ou supprime un élément via un click sur un bouton qui me fait un .append() ou un .remove() ?


merci +++

[french-petzouille]

auto réponse :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 function refreshData(){
        var dat = [];
        var i = 0;
        $(".column").each(function() {
            dat[i++] = [this.id,$(this).sortable("serialize"),$('#nommodele').val()]; // this.id is the column id, the 2nd element are the job id's in that column
        });    
        $.ajax({
            method: "POST",
            url: "b_getdetailsmodelebulletin.php",
            data: {data: dat}
        });
    }

Code :

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

1
2
3
4
    $('#suppSeparateurEntete').click(function(){
        $('.column > div.separateur').last().remove();
        refreshData();
    });