Ajout nouveau module+sauvegarde en BD |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
mecano31
Newbie Depuis le: 08 Août 2017 Pays: France Status: Inactif Points: 4 |
Options des messages
Thanks(0)
Envoyé : 08 Août 2017 à 18:15 |
Bonjour à tous,
Je suis en train de réaliser un système d'édition de newsletter en ligne. J'aurais la possibilité de rajouter des nouveaux modules, les supprimer, gérer l'ordre des éléments et les sauvegarder. J'ai deux blocs : bloc_1 et bloc_2. Le bloc_1 contient les modules à ajouter au bloc_2. Le bloc_2 contient l'ensemble des modules : les anciens et les nouveaux. J'ai la possibilité d'organiser mes modules (blocs) et les sauvegarder dans le bloc_2. Le bloc menu sert d'affichage des éléments sous forme d'image en miniature. Le bloc dropdown affiche l'élément au survole correspondant au module. Je mets un lien qui illustre ce que je souhaiterais faire : https://topol.io/editor/5984cdb91dc32/edit . Dans ce 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". Pour l'insertion d'un nouveau module (DIV) ça marche, la réorganisation (glisser-déplacer) marche aussi. Le problème c'est quand je rajoute un nouveau module je ne pourrai pas le sauvegarder. Pour infos mes modules sont enregistrés en base de données mais ils n'ont pas la même constitution des éléments (c-à-d structure différente). Je veux afficher mes éléments dans l'ordre du 1er au dernier. Hors quand je rajoute un nouveau élément dans le bloc_2, il casse l'ordre puisqu'il n'existait pas dans la boucle. Merci Cdlt, Exemple ci-dessous traite juste la partie ajout de module. Une fois ajouté je n'ai pas réussi à sauvegarder l'ajout et la réorganisation : <?PHP // 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(); ?> <html> <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"> <?php 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> </html> <script> (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(); } ); })(); </script> <?php $parametres = array('div_1','div_3','div_2'); for($i=1;$i<count($parametres);$i++){ UPDATE maTable SET position = $i WHERE id = $parametres[$i]; } ?> Edité par mecano31 - 09 Août 2017 à 12:06 |
|
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
Bonjour,
J'espere que vous avez bien mis les balises ouverture/fermeture PHP <?php ... ?> dans le code, car dans votre exemple tout est melangé. Et je ne vois pas du code de deplacement (changement d'ordre), je vois uniquement l'insertion. Pouvez-vous d'abord publier en ligne quelque part une page qui fonctionne (sauf enregistrement) et donner le lien? En gros, pour pouvoir enregistrer, il vous faut passer par Ajax - on ne peut pas executer PHP directement dans la page APRES son ouverture dans le navigateur, mais on peut appeler un script/une page PHP "en temps reel" via Ajax, par exemple $('.button-save').click(function(){ var params = [], position = 0; var $myDivs = $('.div_mod'); $myDivs.each(function(){ params.push({id: $(this).attr('id'), position: positiong}); position++; }); $.get('myscript-save.php?params=' + encodeURIComponent(JSON.stringify(params))); }); et dans myscript-save.php: $params = json_decode($_GET['params'], true); foreach ($params as $row) { $id = $row['id']; $position = $row['position']; } Le code est "brut" juste pour avoir une idee
|
|
mecano31
Newbie Depuis le: 08 Août 2017 Pays: France Status: Inactif Points: 4 |
Options des messages
Thanks(0)
|
Bonjour @Dmit OE
Merci d'avoir pris le temps de me répondre. En effet, j'ai 2 blocs : - un bloc de gauche qui contient les modules à ajouter. - un bloc de droite qui contient les modules par défaut et les nouveaux rajoutés. Dans le bloc de gauche on retrouve 3 éléments permettant au survol d'afficher en bas les modules correspondant pour l'ajout. Chaque élément dispose d'un bouton "Insert" permettant de l'insérer dans le bloc de droite au tout début des éléments existants. Dans le bloc de droite on a la possibilité réorganiser les éléments par glisser-déplacer en cliquant sur le bouton "Modifier la position des éléments" pour changer la position d'un élément et la sauvegarder. Mon problème se résume en 2 points : 1. Pouvoir sauvegarder un module après l'avoir ajouté dans le bloc de droite et même après rechargement de la page le nouveau élément reste dans la liste. 2. Pouvoir sauvegarder la réorganisation et récupérer cet ordre après chargement. Vous trouverez le lien de l'exemple avec la partie ajout de nouveau module et la partie réorganisation : https://jsfiddle.net/mecano/cdq07mjb/7/ . Merci ! Cdlt, Edité par mecano31 - 09 Août 2017 à 22:12 |
|
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
C'est votre code ou un copie-colle d'une exemple de quelqu'un?
Il y a deja du Ajax pour enregistrer mais dans jsFiddle il ne peut pas marcher, evidemment (sauf si vous utilisez un URL absolute, du genre http://domain.com/saveUpdate.php, et le type: "GET" ("POST" ne marchera pas cross-domain). De toute facon, il faut voir une page OE en ligne, jsFiddle n'est pas assez pratique dans ce cas. Je vous conseille d'essayer de trouver vous-meme une solutions, c'est un exellent entrainement. |
|
mecano31
Newbie Depuis le: 08 Août 2017 Pays: France Status: Inactif Points: 4 |
Options des messages
Thanks(0)
|
Bien sur que c'est mon code.
Je suis venu chercher de l'aide sur ce forum parce que j'avais cherché de mon côté sans résultat.
|
|
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |