Can an associative array be utilized with Ajax for CRUD operations to insert data without reloading the page and appending it below existing data?
JavaScript Code
function addTextBox(section, id_group) {
row_section = "#row_" + section;
wrapper = $(row_section);
$(wrapper).append('<ul id="fail_' + section + '" class="input_fields" style="list-style-type:none"><li><div class="movement_group"><input type="text" id="txt_' + section + '" id_group="' + id_group + '"class="title_group" name="title_detail[\'' + section + '\']" placeholder="Input" required="" style="width: 300px" /><button type="button" style="margin-left:10px;" class="btn btn-sm sending" onClick="saveTitleGroup(\'' + section + '\', \'' + id_group + '\')">Ok</button><button type="button" onClick="remove_field(\'' + section + '\')" style="margin-left:10px;" class="btn btn-sm remove_content">X</button></div></li></ul>'); //add input box
}
function remove_field(section) {
section_id = "#fail_" + section;
$(section_id).remove();
}
function saveTitleGroup(section, id_group) {
title_group = "#txt_" + section;
title_group = $(title_group).val();
td_section = "#td_" + section;
row_section = "#row_section" + section;
$.ajax({
type: "POST",
url: adminUrl+"/interest/save_detail",
data: {title: title_group, interest_group_id: id_group},
dataType: "text",
cache:false,
success:
function(data, textStatus, jqXHR){
$(td_section).html(data);
}
});
}
View
<table id="tableinterest" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<?php
$n=0;
foreach ($interest_groups as $interest_group) {
$n++;
echo "<tr>";
echo "<td>";
echo $n . ". ";
?>
</td>
<?php
echo "<td id='td_section_$interest_group[id]' group-id='$interest_group[id]'>";
echo "<b style='font-size:11pt !important;'>" . $interest_group['title'] . "</b>" . "<span style='margin-left:850px; font-size:15pt;' class='glyphicon glyphicon-plus interest_add' data-toggle='tooltip' data-placement='top' title='Add Detail' onclick='addTextBox(\"section_$interest_group[id]\", \"$interest_group[id]\")'></span><button type='button' style='float:right;' class='btn btn-xs text-red btn-delete-group' data-id='$interest_group[id]' data-category='$interest_group[title]'><span class='glyphicon glyphicon-minus'></span></button> ";
echo "<br>";
echo "</br>";
foreach ($interest_details as $interest_detail) {
echo "<ul style='list-style-type:none'>";
if ($interest_detail['interest_group_id'] == $interest_group['id']) {
echo "<li id='" . $interest_detail['id'] . "'>" . "<label style='font-size:10pt !important;' data-title=\"$interest_detail[title]\" id=\"$interest_detail[id]\" detail_id=\"$interest_group[id]\" class='editme1' id-title='\"$interest_group[id]\"'>" . $interest_detail['title'] . "</label>" .
"<button type='button' style='float:right;' class='btn btn-xs btn-delete-interest text-red' data-id='$interest_detail[id]' data-category='$interest_detail[title]'><span class='glyphicon glyphicon-minus'></span></button>" . "</li>";
}
echo "</ul>";
}
echo "<div id='row_section_$interest_group[id]'></div>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
Controller
function save_detail(){
$title = $this->input->post('title');
$save = $this->save = $this->interest_group->save();
if ($save) {
echo $title;
$this->layout = false;
} else {
echo "save failed";
}
}
Model
function save(){
$id = $this->input->post('id');
$data = array(
"interest_group_id" => $this->input->post('interest_group_id'),
"title" => $this->input->post('title'),
"created_at" => date("Y-m-d H:i:s"),
"updated_at" => date("Y-m-d H:i:s"),
);
if ($id == null) {
$save = $this->db->insert('interest_detail',$data);
if ($save) {
return true;
} else {
return false;
}
} else {
$this->db->where('id', $id);
$update = $this->db->update('interest_detail', $data);
if ($update) {
return true;
} else {
return false;
}
}
}