Gérer l'ordre des éléments + sauvegarde en live en bd

dinolam - 3 août 2017 à 10:40 - Dernière réponse : jordane45 19246 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention
- 8 août 2017 à 13:49
Bonjour à tous,

J'aimerais faire la même chose que ce qu'il y a sur ce lien : http://www.sebastienangot.fr/blog/developpement/tutoriel-drag-and-drop-jquery-ajax-sauvegarde-en-base-de-donnees/

Mais seulement mes éléments (divs) ci-dessous ont des structures différentes dans une template (page). Je souhaiterais gérer leur ordre c-à-d les déplacer (ré-organiser) par glisser-déposer et ensuite sauvegarder en base de données comme dans le lien du tutoriel ci-haut .

Les différences avec l'exemple du tutoriel dans le lien ci-dessus sont : moi j'ai des blocs (div) au lieu des listes (li) et dans le tutoriel c'est une boucle pour afficher les puces comme il s'agit des mêmes éléments. Dans mon cas les divs n'ont pas les mêmes éléments donc je ne peux pas faire de boucle, d'ou la récupération individuel des divs. Hors pour avoir de l'ordre il faut qu'il y ait une boucle. Existe-il de solutions sans boucle ? Merci

Voici la structure de mes éléments :

// Structure de la table `order`
CREATE TABLE IF NOT EXISTS `order` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`titre` varchar(255) NOT NULL,
`description` text NOT NULL,
`image` varchar(255) NOT NULL,
`lien` varchar(255) NOT NULL,
`position` int(11) NOT NULL,
PRIMARY KEY (`newsletter_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;


<div id="<?=$row['id'];?>" class="bloc">
<h4><?=$row['titre'];?></h4>
<p><img src="<?=$row['image'];?>"></p>
<p><?=$row['description'];?></p>
<p><a href="#" rel="nofollow noopener noreferrer" target="_blank"><?= $row['lien']; ?></a></p>
</div>
<div id="<?=$row['id'];?>" class="bloc">
<h4><?=$row['titre'];?></h4>
<p><?=$row['description'];?></p>
<p><a href="#" rel="nofollow noopener noreferrer" target="_blank"><?= $row['lien']; ?></a></p>
</div>
<div id="<?=$row['id'];?>" class="bloc">
<h4><?=$row['titre'];?></h4>
<p><?=$row['description'];?></p>
</div>
<div id="<?=$row['id'];?>" class="bloc">
<p><img src="<?=$row['image'];?>"></p>
<p><a href="#" rel="nofollow noopener noreferrer" target="_blank"><?= $row['lien']; ?></a></p>
</div>
Afficher la suite 

12 réponses

Répondre au sujet
jordane45 19246 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention - Modifié par jordane45 le 3/08/2017 à 12:01
0
Utile
Bonjour,


Tu veux afficher dans l'ordre .... ce qui implique que :
Tu affiches le premier
Puis le second
Puis......
Puis le dernier ...;

Comment veux-tu... sans boucle... que ton programme puisse afficher les éléments du 1er au dernier .... sans système de "boucle" ????

Tu as déjà posé cette question plusieurs fois... la réponse ne changera pas magie sous prétexte que tu la reposes à nouveau !


Je t'ai déjà dit que le fait de passer par une boucle ne posait pas de problème........
Il faut juste que (en base de donnée ou tout autre moyen de "stockage") tu précises pour chaque DIV à afficher... celle que tu veux et que tu CODES des fonctions qui crée CHACUNE de tes div.

par exemple :
//------------------------------------
// fonctions qui permettent de créer les différents types de DIV
//------------------------------------
function div1(){
 echo "<div class='toto'> blablabla </div>";

}
function divtruc(){
 echo "<div class='tutu'><h3>test</h3> autre blablabla </div>";
}

//------------------------------------
//recup des div à afficher en bdd par exemple stockées dans un array
$a_afficher = array();
$a_afficher[] = array('quellediv'=>'div1');
$a_afficher[] = array('quellediv'=>'div1');
$a_afficher[] = array('quellediv'=>'div2');

//------------------------------------
//Et là... je génère l'affichage
//... via une BOUCLE !!!!
for ($i=0;$i<3;$i++){
  $a_afficher[$i]();
}





Cordialement, 
Jordane                                                                 
Commenter la réponse de jordane45
0
Utile
1
Re @jordane45,

Merci d'avoir pris le temps de me répondre. Mais je ne vois pas dans ton exemple le lien entre les fonctions qui permettent de créer les différents types de DIV et les div à afficher en bdd par exemple stockées dans un array.

Procèderait t-on ainsi :

// connexion BD
require_once('db.php');

$sql = 'SELECT * FROM maTable ORDER BY position';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$row = $req->fetchAll();

switch ($row['id']) {
case 1:
function div1(){
echo "<div class='toto'>$row['contenu_div1']</div>";
}
break;
case 2:
function div2(){
echo "<div class='tutu'>$row['contenu_div2']</div>";
}
break;
case 3:
function div3(){
echo "<div class='tata'>$row['contenu_div3']</div>";
}
break;
...
default:
code to be executed
}


Cdlt,
jordane45 19246 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention - 3 août 2017 à 15:29
$row = $req->fetchAll();

$row .. c'est un ARRAY ....
Il te faut donc faire une boucle dessus.....
Commenter la réponse de Utilisateur anonyme
0
Utile
1
Code modifié :
// connexion BD
require_once('db.php');

$sql = 'SELECT * FROM maTable ORDER BY position';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll();


foreach ($rows as $row){

switch ($row['id']) {
case 1:
function div1(){
echo "<div id='div_1'>$row['contenu_div1']</div>";
}
break;
case 2:
function div2(){
echo "<div id='div_2'>$row['contenu_div2']</div>";
}
break;
case 3:
function div3(){
echo "<div id='div_3'>$row['contenu_div3']</div>";
}
break;
...
default:
echo '';
}

}

//------------------------------------
//recup des div à afficher en bdd par exemple stockées dans un array
$a_afficher = array('div_1','div_2','div_3');

for($i=1;$i<count($a_afficher);$i++){
UPDATE maTable SET position = $i WHERE id = $a_afficher [$i];
}


??
jordane45 19246 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention - 4 août 2017 à 01:55
Oui et ???
Code modifié ... d'accord... mais alors quoi ?
Ne rencontres-tu pas des erreurs ??? ne serait-ce qu'au niveau de ta ligne 32 ??

Faut vraiment que tu apprennes à t'exprimer clairement ... et en DÉTAILLANT ....
Jouer aux devinettes.. ce n'est pas mon loisir favori.......
Lorsque tu postes un message (une question...) tu dois EXPLIQUER ce qui se passe.... et indiquer, si il y en a, les MESSAGES D'ERREUR.
Ce n'est pas à nous de tester ... ni de jouer les médiums pour essayer de comprendre tes questions et tes codes....
Commenter la réponse de dinolam
0
Utile
1
Re,

C'était juste pour dire j'ai fait des modifications mais j'attendrai pour faire le teste. Je sais que je demande trop mais toutes ces questions aideront peut être d'autres qui auront le même souci que moi. J'essayerai d'être plus explicite.

En testant, j'ai remarqué qu'en ajoutant une autre DIV (bloc) qui n'est pas dans ma boucle la sauvegarde ne marche pas. Je sais que tu vas me dire oui c'est normal...

Mais pour encore être plus explicite, je vais montrer un exemple. J'ai 2 blocs : bloc_1 et bloc_2. Je clone une DIV qui est dans le bloc_1 pour l’insérer dans le bloc_2. Et c'est le bloc_2 qui le bloc finale que je veux sauvegarder comme dans l'exemple précédent :

// connexion BD
require_once('db.php');

$sql = 'SELECT * FROM maTable ORDER BY position';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll();

<div id="container">
<div id="bloc_1">
<div id='div_1'>contenu_div1</div>
<div id='div_2'>contenu_div2</div>
<div id='div_3'>contenu_div3</div>
</div>

<div id="bloc_2">
foreach ($rows as $row){
switch ($row['id']) {
case 1:
<div id='div_1'>contenu_div1</div>
break;
case 2:
<div id='div_2'>contenu_div2</div>
break;
case 3:
<div id='div_3'>contenu_div3</div>
break;
...
default:
echo '';
}
}
</div>
</div>
jordane45 19246 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention - 4 août 2017 à 10:53
je n'ai rien compris
Commenter la réponse de dinolam
0
Utile
Re @jordane45

En fait, ce que je souhaiterais faire c'est ajouter (c-à-d cloner) une DIV du bloc_1 dans le bloc_2 puis la sauvegarder pour qu'après rechargement de la page ma nouvelle DIV insérée reste afficher dans la liste de mes DIV qui sont dans la boucle (bloc_2).
C'est un système d'ajout de modules (mes DIV sont de modules) comme c'est le cas dans certains systèmes d'édition de newsletter. Je peux rajouter des nouveaux modules puis les supprimer. Pour appuyer mon explication j'ai modifié le précédent code pour qu'on puisse comprendre ma démarche. Pour l'insertion d'un nouveau module (DIV) ça marche. C'est juste quand je rajoute ce dernier dans le bloc_2 je n'ai pas réussi à le sauvegarder.

Je mets un lien qui illustre ce que je souhaiterais faire : https://topol.io/editor/5984cdb91dc32/edit
Dans l'exemple qui est dans le lien c'est par glisser-déposer pour ajouter un élément mais dans mon cas l'élément est ajouté lorsqu'on le survole et clique sur "insert".

Merci

Cdlt,


// connexion BD
require_once('db.php');

$sql = 'SELECT * FROM maTable ORDER BY position';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll();

<!-- menu gauche -->
<div id="modules">
<div id="menu">
<div id="mod01"><img src="image-mod01.jpg"></div>
<div id="mod02"><img src="image-mod02.jpg"></div>
<div id="mod03"><img src="image-mod03.jpg"></div>
</div>

<div id="dropdown">
<div class="div_mod" data-type="mod01" data-id="1">nouveau contenu 1</div>
<div class="div_mod" data-type="mod02" data-id="2">nouveau contenu 2</div>
<div class="div_mod" data-type="mod03" data-id="3">nouveau contenu 3</div>
</div>
</div>
<div id="container">
<div id="bloc_1">
<div id="div_mod01" class="row" data-id="1">contenu div 1</div>
<div id="div_mod02" class="row" data-id="2">contenu div 2</div>
<div id="div_mod03" class="row" data-id="3">contenu div 3</div>
</div>

<div id="bloc_2">
foreach ($rows as $row){
switch ($row['id']) {
case 1:
<div id="div_1">contenu_div1</div>
break;
case 2:
<div id="div_2">contenu_div2</div>
break;
case 3:
<div id="div_3">contenu_div3</div>
break;
...
default:
echo '';
}
}
</div>
</div>


function(){
$("#mod01").hover(function() {
$(".div_mod[data-type='mod01']").show();
$(".div_mod[data-type='mod02']").hide();
$(".div_mod[data-type='mod03']").hide();
});
$("#mod02").hover(function() {
$(".div_mod[data-type='mod01']").hide();
$(".div_mod[data-type='mod02']").show();
$(".div_mod[data-type='mod03']").hide();
});
$("#mod03").hover(function() {
$(".div_mod[data-type='mod01']").hide();
$(".div_mod[data-type='mod02']").hide();
$(".div_mod[data-type='mod03']").show();
});

$(".div_mod").hover(
function() {
$(this).append('<div class="add"><i class="fa fa-plus"></i>Insert</div>');
$('.add').click(function() {
$("#div_1").prepend($("#bloc_1 .row[data-id='"+$(this).parent().attr("data-id")+"']").clone());
$("#dropdown").fadeOut(200);
});
}, function() {
$(this).children(".add").remove();
}
);
})();
Commenter la réponse de dinolam
0
Utile
1
Re @jordane45

Est-ce que mon dernier post est clair ?

Merci
jordane45 19246 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention - 8 août 2017 à 11:37
bof....
Mais.. de toutes façons.... ton message parle d' ENREGISTER ..... hors.. ta question initiale était comment AFFICHER .....
Donc.. nouvelle question ... = Ouvrir une nouvelle discussion.

Pour ma part ... tes questions étant toujours autant "bordéliques" à comprendre... je vais arrêter de financer les société pharmaceutiques qui fabriquent les dolipran ... et vais attendre (sans intervenir) que tes questions soit clairement exposées.
Tant que ça ne sera pas le cas... je n'interviendrai plus dans tes discussions.
Désolé.
Commenter la réponse de dinolam
0
Utile
1
Ça c'est de la méchanceté. Tu aurais dû ne pas répondre que dire c'est "bordélique". Il n'y personne qui t'oblige à répondre. Il faut quand un minimum de respect.
jordane45 19246 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention - 8 août 2017 à 13:49
J'ai le droit de penser que c'est bordélique. .. et te le dire plutôt que de te laisser dans l'ignorance...
Ta réponse me conforte dans l'idée que je me suis fait du personnage....
Bonne continuation..... sans moi !
Commenter la réponse de dinolam

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.