I'm working on an admin-page for my website. So far I can get the title of my project out of the database and show it on my admin-page. I have multiple titles on my project page, but I want a delete and update button for every title and when I click on one of those buttons I want to delete or edit that specific title. This is my code so far:
$result = $db->query("SELECT * FROM projects");
if($result->num_rows != 0) {
while ($rows = $result->fetch_assoc()) {
$title_ = $rows["Title"];
$projects[] = "<div class='row'>
<div class='project'>
<input type='text' class='form-control title' value='$title_'/>
<button type='button' class='btn' name='updateProject'>Save Changes</button>
<button type='button' class='btn' name='deleteProject'>Delete Project</button>
</div>
</div>";
}
}
All the titles are in $projects[]
, and for every $project
in the database the title gets placed in an <input>
and for every $project
it adds 2 buttons (delete and edit). Does anyone know how I can make those button work per title? So if I click on the delete button of a specific title, I only want to delete that specific title.
Try this:
while ($rows = $result->fetch_assoc()) {
$title_ = $rows["Title"];
$id = $rows["id"] // or whatever your table id is called in the db
$projects[] = "<div class='row'>
<div class='project'>
<input type='text' class='form-control title' value='$title_'/>
<a type='button' href='/path/to/page/update?id='".$id."' class='btn' name='updateProject'>Save Changes</a>
<a type='button' href='/path/to/page/delte?id='".$id."' class='btn' name='deleteProject'>Delete Project</a>
</div>
</div>";
}
Then create the scripts for update and delete on those pages. Thre are nice ways to do this, but I think this should get you started and then you can improve once you have it working.
I assuming you meant do that with ajax
(and thus - with jQuery)
First, you must supply that project div with project id:
$projectID = $rows["ID"];
Second, put that ID in html:
<div class='project' data-id="$projectID">
<input type='text' class='form-control title' value='$title_'/>
<button type='button' class='btn' name='update'>Save Changes</button>
<button type='button' class='btn' name='delete'>Delete Project</button>
</div>
Third, add corresponding script:
$('.project [name=update]').click(function () {
var div = $($(this).parents('.project').first());
var id = div.data("id");
var title = div.find('input.title').val();
$.post('/.../.../script-that-will-process-request.php'{
project: id,
title: title,
}).success(function (r) {
if (r.response == "ok") {
alert("Updated!");
}
});
});
$('.project [name=delete]').click(function () {
var div = $($(this).parents('.project').first());
var id = div.data("id");
$.post('/.../.../script-that-will-process-request.php'{
project: id,
delete: true,
}).success(function (r) {
if (r.response == "ok") {
alert("Deleted!");
}
});
});
Fourth, add request processing script (that /.../.../script-that-will-process-request.php
part):
$result = ["error" => "unknown action"];
$id = inval($_POST['project']);
if (isset($_POST['delete'])) {
$db->query('delete from projects where ID = ' . $id); // or smth like that
$result = ["response" => "ok"];
} else if (isset($_POST['title'])) {
$title = escape_sql($_POST['title']);
$db->query("update projects set Title = '$title' where ID = $id"); // or smth like that
$result = ["response" => "ok"];
}
die(json_encode($result);
Fifth, supply html with no-js fallback:
<div class='project' data-id="$projectID">
<form action="/.../.../script-that-will-process-request.php" method="POST">
<input type="hidden" name="project" value="$projectID" />
<input type='text' class='form-control title' value='$title_'/>
<input type="submit" class='btn' name='update'>Save Changes
</form>
<form action="/.../.../script-that-will-process-request.php" method="POST">
<input type="hidden" name="project" value="$projectID" />
<input type="hidden" name="delete" value="1" />
<input type="submit" class='btn' name='delete'>Delete Project
</form>
</div>