I'm working on a php CRUD application. I'm done coding for the Add part of it and it's working properly. Now I'm stuck at getting the data from sql database into the edit modal to update it further
This particular page loads titles based on the selection of type we make from a dropdown. So it displays all the titles that belong to the same type(typeId). On clicking the particular title it displays the respective data. Then it has a edit button which is associated to a modal.
The modal is being displayed on pressing the edit button, but there's no data being fetched in it.
Here's what I've tried:
admin.php
<?php
$titleId = filter_input(INPUT_GET, "titleId");
$active = "admin" . $titleId;
require_once './pages/header.php';
require_once './functions/queries.php';
$getAll = Queries::getAllTitle($typeId);
?>
<div class="container">
<div class="panel-group" id="titleAccordion">
<?php
for ($i = 0; $i < count($getAll); $i++) {
echo <<<HTML
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title">
<a data-toggle="collapse" data-
parent="#titleAccordion" href="#collapseF{$i}">{$getAll[$i]['title']}</a>
</h4>
</div>
<div id="collapseF{$i}" class="panel-collapse
collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed"><tbody>
<tr><td>Title:</td><td>{$getAll[$i]['title']}
</td></tr>
<tr><td>Units:</td><td>{$getAll[$i]['units']}
</td></tr>
<tr><td>Category:</td><td>{$getAll[$i]
['category']}</td></tr>
<tbody></table>
</div>
<button type="button" class="btn btn-warning btn-
sm" data-toggle="modal" data-target="#titleEditModal"
onclick="editTitleModal('{$getAll[$i]['titleId']}')"><span
class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit
Title</button>
</div>
</div>
</div>
HTML;
}
?>
<!-- Title Add Modal-->
<div class="modal fade" id="facultyAddModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal">×</button>
<h4 class="modal-title">Add Title</h4>
</div>
<div class="modal-body">
<div id="adminResult" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-
label="Close"><span aria-hidden="true">×</span></button>
<div id="resultAdminContent"></div>
</div>
<form class="cmxform" id="adminForm">
<label for="Activity">ActivityAttended (required)</label>
<input class="form-control" id="adminTitle"
name="title"
type="text" required>
<br>
<label for="units">Units (required)</label>
<input class="form-control" id="adminUnits" type="number"
name="units" required>
<br>
<label for="Category">Category (Optional)</label>
<input class="form-control" id="adminCategory" type="text"
name="category">
<br>
<?php echo
'<input type="hidden" id="addadminTypeId"
value="'.$typeId.'">';
?>
<button class="btn btn-info btn-primary"
type="submit">Submit</button>
<br>
<br>
</form>
</div>
</div>
</div>
</div>
main.js
function editTitleModalSubmit(titleId, title, units, category,
typeid) {
$.ajax({
url: 'functions/administration-functions.php',
type: 'POST',
data: {"title": $('#editadminTitle').val(), "units":
$('#editadminUnits').val(), "category":
$('#editadminCategory').val(), "titleId":titleId, "typeId":
$('#editTypeId').val(), "switch":"edit"},
dataType: "json",
success: function (data) {
$('#editadminTitle').val(data["title"]);
$('#editadminUnits').val(data["units"]);
$('#editadminCategory').val(data["category"]);
$('#editTitleId').val(data["titleId"]);
$('#editTypeId').val(data["typeId"]);
}, error: function (error) {
console.log(error);
}
});
}
function titles() {
$.ajax({
url: 'functions/administration-functions.php',
type: 'POST',
data: {"switch": "getAll"},
dataType: "json",
success: function (data) {
$('#titleAccordion').empty();
$.each(data, function (i) {
$('#titleAccordion').append('\
<div class="panel panel-default">
\
<div class="panel-heading"><h4 class="panel-title">
\
<a data-toggle="collapse" data-
parent="#titleAccordion" href="#collapseF' + i + '">' + data[i]
["title"] + ' ' + data[i]["units"] + ' (' + data[i]["category"] +
')
</a></h4>
\
</div>
\
<div id="collapseF' + i + '" class="panel-collapse
collapse">
\
<div class="panel-body">
\
<div class="table-responsive">
\
<table class="table table-condensed">
<tbody>
\
<tr><td>Title:</td><td>' + data[i]
["title"] + '</td></tr>
\
<tr><td>Units:</td><td>' + data[i]
["units"] + '</td></tr>
\
<tr><td>Category:</td><td>' + data[i]
["category"] + '</td></tr>
\
</td><td></td></tr>
\
<tbody></table>
\
</div>
\
<button type="button" class="btn btn-warning
btn-sm" data-toggle="modal" data-target="#facultyEditModal"
onclick="editTitleModal(\'' + data[i]["titleId"] + '\')">Edit
Title</button>
\
</div>
\
</div>
\
</div>');
});
$('#titleAccordion').change();
}, error: function (error) {
console.log("Socrates Error - faculty.js 105: " + error);
}
});
}
administration-functons
<?php
require_once './queries.php';
$title = filter_input(INPUT_POST, "title");
$units = filter_input(INPUT_POST, "units");
$category = filter_input(INPUT_POST, "category");
$typeId = filter_input(INPUT_POST, "typeId");
$titleId = filter_input(INPUT_POST, "titleId");
$switch = filter_input(INPUT_POST, "switch");
switch ($switch) {
case 'add';
echo Queries::addTitle($title, $units, $category, $typeId);
break;
case 'get';
echo Queries::getdata($titleId);
break;
case 'getAll';
echo Queries::getAllTitle($typeId);
break;
case 'edit':
echo Queries::editTitle($title, $units, $category, $typeId,
$titleId);
break;
}
?>
The above code isn't fetching the data in the modal. However I could see the data of the first title for every title I select in the console.
I'm expecting the respective data to be fetched on selecting the edit button to be made changes further.
