Sujet Précédent Sujet Suivant

Edition de bouton

Utilisateur anonyme - Modifié le 10 juil. 2017 à 14:13
 Utilisateur anonyme - 10 juil. 2017 à 15:08
Bonjour à tous,

Je réalise une newsletter avec la possibilité de modifier en ligne mes boutons pour changer l'url et le titre du lien. Quand je clique sur un bouton pour le modifier, une modale s'affiche avec deux champs (input) : un champ pour titre et le second pour l'url. Ces champs récupèrent automatiquement le titre et l'url existant sur le bouton pour pouvoir les éditer. Tous les boutons font appel à la même fenêtre modale, c'est juste le contenu récupéré est qui différent d'un bouton à l'autre. Quand je clique sur le bouton "save" j'aimerais enregistrer la modification en base de données dans une même table mais dans des champs (colonnes table) différents pour chaque bouton. J'utilise la librairie jQuery et PHP pour l'interaction côté serveur.

Le problème est à lié à la sauvegarde de données à partir d'une seule modale et que chaque bouton soit sauvegarder dans un champ différent. Avec une seule modale je ne croix si c'est réalisable. Merci par avance. 


<!-- Partie HTML -->
<div>
     <h4>Item 1</h4>
     <p>Incenderat autem audaces usque ad insaniam homines ad haec, quae  nefariis egere conatibus, Luscus quidam curator urbis subito visus:  eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt  incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.</p>
      <div ><a href="#" rel="nofollow noopener noreferrer" target="_blank" class="row-edit" data-type="link">J en profite</a></div>
</div>
<div>
       <h4>Item 2</h4>
       <p>Incenderat autem audaces usque ad insaniam homines ad haec, quae  nefariis egere conatibus, Luscus quidam curator urbis subito visus:  eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt  incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.</p>
        <div ><a href="#" rel="nofollow noopener noreferrer" target="_blank" class="row-edit" data-type="link">Contact</a></div>
</div>
<div>
        <h4>Item 3</h4>
        <p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
         <div ><a href="#" rel="nofollow noopener noreferrer" target="_blank" class="row-edit" data-type="link">A propos</a></div>
</div>

<!-- Modale -->
<div class="edit" id="edit-link">
 <div class="edit-box" style="height:310px;">
  <div class="edit-box-title">Edit Link</div>

  <div class="edit-box-content">
   <div class="edit-box-content-text">Title</div>
   <div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input title"/></div>
   <div class="edit-box-content-text">URL:<span>(full address including  http://)</span></div>
 
   <div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input url"/></div>
  </div>
  <div class="edit-box-buttons">
   <div class="edit-box-buttons-save">Save</div>
   <div class="edit-box-buttons-cancel">Cancel</div>
  </div>
 </div>
</div>


// Partie JS
//Edit
function hover_edit(){
 $(".row-edit").hover(
    function() {
              $(this).append('<div class="row-edit-hover"><i class="fa fa-pencil" style="line-height:30px;"></i></div>');
   $(".row-edit-hover").click(function(e) {e.preventDefault()});
   $(".row-edit-hover i").click(function(e) {
           e.preventDefault();
           big_parent = $(this).parent().parent();

                                //edit link
                        if(big_parent.attr("data-type")=='link'){
                        $("#edit-link .title").val(big_parent.text());
                        $("#edit-link .url").val(big_parent.attr("href"));
                        $("#edit-link").fadeIn(500);
                        $("#edit-link .edit-box").slideDown(500);
 
                        $("#edit-link .edit-box-buttons-save").click(function() {
                            $(this).parent().parent().parent().fadeOut(500);
                            $(this).parent().parent().slideUp(500);
    
                                     big_parent.text($("#edit-link .title").val());
                          big_parent.attr("href",$("#edit-link .url").val());

                                              
                        });
                         }
                         });
                 }, function() {
                        $(this).children(".row-edit-hover").remove();
                 }
        );
}
hover_edit();

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 344
10 juil. 2017 à 14:20
Bonjour,

Sur chaque bouton tu places un data attribute avec l'id du bouton par exemple et tu récupères cette donnée dans ton JS avant l'insertion en BDD.

0
Réponse 2 / 2
Utilisateur anonyme
Modifié le 10 juil. 2017 à 15:12
Bonjour @jordane45,

Merci d'avoir prix le temps de me répondre. J'ai modifié le code ci-dessous et ma sauvegarde ne s'effectue toujours pas. J'ai l'erreur suivante : erreur ! ID de ligne vide !

Pourtant mon id existe. Merci 


// requete recup contenu newsletter
$sql = 'SELECT * FROM newsletter';
$req = $db->prepare($sql);
$req->execute() or die(print_r($req->errorInfo()));
$row = $req->fetch();


<!-- Partie HTML -->
<div id="msg"></div>
<div data-row-id="<?=$row['newsletter_id'];?>">
     <h4>Item 1</h4>
     <p>Incenderat autem audaces usque ad insaniam homines ad haec, quae  nefariis egere conatibus, Luscus quidam curator urbis subito visus:  eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt  incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.</p>
      <div class="editable-col" data-index='0' oldVal ="<?=$row['url_1'];?>"><a href="<?=$row['url_1'];?>" class="row-edit editable-col" data-type="link" data-index='1' oldVal="<?=$row['titre_url_1'];?>"><?=$row['titre_url_1'];?></a></div>
</div>
<div data-row-id="<?=$row['newsletter_id'];?>">
    <h4>Item 2</h4>
    <p>Incenderat autem audaces usque ad insaniam homines ad haec, quae  nefariis egere conatibus, Luscus quidam curator urbis subito visus:  eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt  incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.</p>
    <div class="editable-col" data-index='2' oldVal ="<?=$row['url_2'];?>"><a href="<?=$row['url_2'];?>" class="row-edit editable-col" data-type="link" data-index='3' oldVal="<?=$row['titre_url_2'];?>"><?=$row['titre_url_2'];?></a></div>
</div>
<div data-row-id="<?=$row['newsletter_id'];?>">
    <h4>Item 3</h4>
    <p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
    <div class="editable-col" data-index='4' oldVal ="<?=$row['url_3'];?>"><a href="<?=$row['url_3'];?>" class="row-edit editable-col" data-type="link" data-index='5' oldVal="<?=$row['titre_url_3'];?>"><?=$row['titre_url_3'];?></a></div>
</div>

<!-- Modale -->
<div class="edit" id="edit-link">
    <div class="edit-box" style="height:310px;">
        <div class="edit-box-title">Edit Link</div>

        <div class="edit-box-content">
            <div class="edit-box-content-text">Title</div>
            <div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input title"/></div>
            <div class="edit-box-content-text">URL:<span>(full address including  http://)</span></div>
 
            <div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input url"/></div>
        </div>
        <div class="edit-box-buttons">
            <div class="edit-box-buttons-save">Save</div>
            <div class="edit-box-buttons-cancel">Cancel</div>
        </div>
    </div>
</div>


// Partie JS
function hover_edit(){
    $(".row-edit").hover(
        function() {
            $(this).append('<div class="row-edit-hover"><i class="fa fa-pencil"></i></div>');
            $(".row-edit-hover").click(function(e) {e.preventDefault()});
            $(".row-edit-hover i").click(function(e) {
                e.preventDefault();
                big_parent = $(this).parent().parent();

                //edit link
                if(big_parent.attr("data-type")=='link'){
                    $("#edit-link .title").val(big_parent.text());
                    $("#edit-link .url").val(big_parent.attr("href"));
                    $("#edit-link").fadeIn(500);
                    $("#edit-link .edit-box").slideDown(500);
 
                    $("#edit-link .edit-box-buttons-save").click(function() {
                        $(this).parent().parent().parent().fadeOut(500);
                        $(this).parent().parent().slideUp(500);
    
                        big_parent.text($("#edit-link .title").val());
                        big_parent.attr("href",$("#edit-link .url").val()); 

                        data = {};
                        data['val'] = big_parent.text($("#edit-link .title").val());
                        data['val2'] = big_parent.attr("href",$("#edit-link .url").val());
                        data['id'] = big_parent.attr('data-row-id');
                        data['index'] =  big_parent.data('index');

                        if (big_parent.attr('oldVal') === data['val1'] && big_parent.attr('oldVal') === data['val2']) {
                            return false;
                        }  

                        $.ajax({   
                              type: "POST",  
                              url: "ajax.php",  
                              cache: false,  
                              data: data,
                              dataType: "json",       
                              success: function(response) {   
                                if(response.status) {
                                    $("#msg").removeClass('danger');
                                    $("#msg").addClass('success').html(response.msg);
                                } else {
                                    $("#msg").removeClass('success');
                                    $("#msg").addClass('danger').html(response.msg);
                                }
                              }   
                        });                    
                    });
                }
            });
        }, function() {
            $(this).children(".row-edit-hover").remove();
        }
    );
}
hover_edit();


// ajax.php
// include connection file
include_once("db.php");
//define index of column
$columns = array(
    0 => 'url_1', 
    1 => 'titre_url_1',
    2 => 'url_2',
    3 => 'titre_url_2',
    4 => 'url_3', 
    5 => 'titre_url_3'
);
//récupération "propre" des variable)
$colVal = isset($_POST['val']) ? $_POST['val'] : "";
$colIndex = !empty($_POST['index']) ? $_POST['index'] : 0;
$rowId = !empty($_POST['id']) ? $_POST['id'] : NULL;

$sql = 'SELECT count(*) AS nbr FROM newsletter';
$req = $db->prepare($sql);
$req->execute() or die(print_r($req->errorInfo()));
$data = $req->fetch();
 // Si un id est bien passé en paramètres
if($rowId){
    if ($data['nbr'] == 0) {
        $sql = "INSERT INTO newsletter (".$columns[$colIndex].") VALUES (:colVal)";
        $datas = array(":colVal"=>$colVal, ":rowId"=>$rowId);
        //exécution de la requete
        try {
            $req = $db->prepare($sql);
            $req->execute($datas);
            $msg = array(
                'status'=>false,
                'msg'=>'Saisie enregistrée avec success !',
                'debug'=>""
            );
        } catch (Exception $e) {
            //erreur dans la requete
            $msg = array(
                'status'=>true,
                'msg'=>'Erreur ! '.$e->getMessage(),
                'debug'=>array("requete"=>$sql, "datas"=>$datas)
            );
        }    
    } else {
        // Si un id est bien passé en paramètres
        //if($rowId){
        //préparation de la requete et des variables
        $sql = "UPDATE newsletter SET ".$columns[$colIndex]." = :colVal WHERE newsletter_id = :rowId";
        $datas = array(":colVal"=>$colVal, ":rowId"=>$rowId);
        //exécution de la requete
        try {
            $req = $db->prepare($sql);
            $req->execute($datas);
            $msg = array(
                'status'=>false,
                'msg'=>'Saisie enregistrée avec success !',
                'debug'=>""
            );
        } catch (Exception $e) {
            //erreur dans la requete
            $msg = array(
                'status'=>true,
                'msg'=>'Erreur ! '.$e->getMessage(),
                'debug'=>array("requete"=>$sql, "datas"=>$datas)
            );
        }    
    } 
} else {
    //pas d'ID
    $msg = array(
        'status'=>true,
        'msg'=>"Erreur ! ID de ligne vide !",
        'debug'=>$_POST
    );
}      
// send data as json format
echo json_encode($msg);
0

Discussions similaires

Activer un bouton de commande
Faya49 -
Faya49 -

2 réponses
Assigner un bouton de commande a une des fleches du clavier
glasgow1705 -
jack -

7 réponses
faire grisé un bouton
poomen -
billou_13 -

19 réponses
zones d'édition
tzan -
garslouche -

4 réponses
un bouton rechercher
kanabinch -
kanabinch -

5 réponses
Rejoignez-nous