Discussion :

[mOscar007]

Bonjour à tous,


Je suis en train de réaliser une newsletter avec la possibilité de modifier en ligne mes boutons pour changer l'url et le titre du lien. Quand on 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.

Mon problème est je n'ai pas réussi à enregistrer mes modifs en base de données. Je ne sais pas comment procéder pour sauvegarder la modif dans la BD à partir d'une seule modale et que chaque bouton soit sauvegarder un champ différent. Merci par avance.

Code HTML :

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
 
<!-- 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="#" 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="#" 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="#" 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>

Code JavaScript :

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
// 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();

[ProgElecT]

Salut

Ligne 20 du code HTML, erreur copier/coller ou mauvaise mise en commentaire ?
// Modale (commentaire JavaScript)
<!-- Modale --> (commentaire HTML)

[pterrat]

Ton back-end php doit intéragir avec ta base de données. C'est lui qui va sauvegarder des données comme tu le souhaites.

Tu dois envoyer dans ton jquery les datas que tu veux sauvegarder via une requete ajax.

[mOscar007]

@pterrat, il faut bien lire l’énoncé.

Je sais bien qu'il faut faire une requête ajax pour appel côté serveur.
Mais ici le problème est beaucoup complexe que tu ne crois.