我正在制作新闻稿，可以添加新模块并直接在线修改。在这个例子中，我采用了我可以修改的链接的情况，通过显示带有字段的模态来输入链接的URL和链接标题的字段。但是这个例子对于编辑其他内容是有效的，例如：图像，文本等等。
每个简报都有一个我附加到其内容的ID。我想进行升级。问题是我会在简报中添加其他模块以对其进行个性化。这些新模块也可以修改。
我担心的是我无法保存我的更改。谢谢你的帮助。
使用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>