I am working on a newsletter creation with the possibility to add new modules and modify them directly online. In this example I took the case of my links that I can modify by displaying a modal with a field to enter the URL of the link and a field for the link title. But this example is valid for editing other content like: image, text, ... etc.
Each newsletter has an id that I attach to its content. I want to make that upgrade. The problem is that I will add other modules to the newsletter to personalize it. These new modules will also be modifiable.
My concern is I can not save my changes. Thank you for your help.
Javascript:
console.clear();
(function hover_edit() {
var big_parent;
$(".row-edit").hover(
function() {
$(this).append('<span class="row-edit-hover"><i class="fa fa-pencil" style="line-height:30px;"></i></span>');
},
function() {
$(this).children(".row-edit-hover").remove();
}
)
$("a").click(function(e) {
e.preventDefault()
});
$("body").on('click', ".row-edit-hover i", function(e) {
e.preventDefault();
big_parent = $(this).parents('.row-edit');
//edit link
if (big_parent.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() {
var toSave = {};
$(this).parents('.edit').fadeOut(500)
.children().slideUp(500);
big_parent.text($("#edit-link .title").val());
big_parent.attr("href", $("#edit-link .url").val());
toSave = {
'id': big_parent.data('id'),
'url': big_parent.attr('href'),
'text': big_parent.text()
}
console.info(toSave);
$.post("page-update_base.php", toSave, function(response) {
if (response.status) {
$("#msg").removeClass('danger');
$("#msg").addClass('success').html(response.msg);
} else {
$("#msg").removeClass('success');
$("#msg").addClass('danger').html(response.msg);
}
}, 'json');
});
$("#edit-link .edit-box-buttons-cancel").click(function() {
$(this).parents('.edit').fadeOut(500)
.children().slideUp(500);
});
})();
PHP:
<?
// page-update_base.php
// include connection file
include_once("db.php");
//récupération "propre" des variable)
$id = isset($_POST['id']) ? $_POST['id'] : "";
$url = isset($_POST['url']) ? $_POST['url'] : "";
$text = isset($_POST['text']) ? $_POST['text'] : "";
if ($id == 1) {
//préparation de la requete et des variables
$sql = "UPDATE tbl_newsletter SET url_1 = :url, titre_url_1 = :text WHERE newsletter_id = :id";
$datas = array(
":url" => $url,
":text" => $text,
":id" => $id
);
//exécution de la requete
try {
$req = $db->prepare($sql);
$req->execute($datas);
$msg = array(
'status' => true,
'msg' => 'Saisie enregistrée avec success !',
'debug' => ""
);
}
catch (Exception $e) {
//erreur dans la requete
$msg = array(
'status' => false,
'msg' => 'Erreur ! ' . $e->getMessage(),
'debug' => array(
"requete" => $sql,
"datas" => $datas
)
);
}
} else if ($id == 2) {
//préparation de la requete et des variables
$sql = "UPDATE tbl_newsletter SET url_2 = :url, titre_url_2 = :text WHERE newsletter_id = :id";
$datas = array(
":url" => $url,
":text" => $text,
":id" => $id
);
//exécution de la requete
try {
$req = $db->prepare($sql);
$req->execute($datas);
$msg = array(
'status' => true,
'msg' => 'Saisie enregistrée avec success !',
'debug' => ""
);
}
catch (Exception $e) {
//erreur dans la requete
$msg = array(
'status' => false,
'msg' => 'Erreur ! ' . $e->getMessage(),
'debug' => array(
"requete" => $sql,
"datas" => $datas
)
);
}
} else if ($id == 3) {
//préparation de la requete et des variables
$sql = "UPDATE tbl_newsletter SET url_3 = :url, titre_url_3 = :text WHERE newsletter_id = :id";
$datas = array(
":url" => $url,
":text" => $text,
":id" => $id
);
//exécution de la requete
try {
$req = $db->prepare($sql);
$req->execute($datas);
$msg = array(
'status' => true,
'msg' => 'Saisie enregistrée avec success !',
'debug' => ""
);
}
catch (Exception $e) {
//erreur dans la requete
$msg = array(
'status' => false,
'msg' => 'Erreur ! ' . $e->getMessage(),
'debug' => array(
"requete" => $sql,
"datas" => $datas
)
);
}
} else {
//pas d'ID
$msg = array(
'status' => false,
'msg' => "Erreur ! ID de ligne vide !",
'debug' => $_POST
);
}
// send data as json format
echo json_encode($msg);
}
?>
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="http://link-j-en-profite" class="row-edit" data-type="link" data-id="<?=$row1['newsletter_id'];?>">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="http://link-contact" class="row-edit" data-type="link" data-id="<?=$row1['newsletter_id'];?>">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="http://link-a-propos" class="row-edit" data-type="link" data-id="<?=$row1['newsletter_id'];?>">A propos</a></div>
</div>
<!-- Modale -->
<div class="edit" id="edit-link">
<div class="edit-box" style="">
<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>
