Edition de bouton

Utilisateur anonyme - 10 juil. 2017 à 14:11 - Dernière réponse :  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();
Afficher la suite 

2 réponses

Répondre au sujet
jordane45 20570 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 avril 2018 Dernière intervention - 10 juil. 2017 à 14:20
0
Utile
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.

Commenter la réponse de jordane45
0
Utile
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);
Commenter la réponse de Utilisateur anonyme

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.