Я пытаюсь создать одностраничное приложение с помощью jquery, используя php. Я создал страницу, в которой есть 3 события, вставки обновляются и удаляются после того, как данные каждого события также повторно выбираются для отображения в таблице с новыми данными, но теперь проблема возникает, когда данные быть переизбранным, не позволяйте событиям работать снова, как есть две кнопки в каждой строке редактирования и удаления данных. но как только вы редактируете первую строку, она не позволяет вам редактировать любую другую строку. Должен быть способ сделать это, но что может быть решением, я новичок с JQuery.
Вот мой jquery.
$( document ).ready(function() {
// When click the button.
$("#save").on('click',function() {
// Assigning Variables to Form Fields
var category = $("#catname").val();
if(category){
$.ajax({
type: "post",
url: "insert.php",
asynch: false,
data: {
"category": category
},
success: function(data){
alert("Category Saved Successfully. ");
$("#ecname").html("");
$("#show").html(data);
$( '#form_category' ).each(function(){
this.reset();
});
}
});
}
else{
$("#ecname").html("fill category name");
}
});
});
Вот HTML-таблица.
<div class="m-portlet m-portlet--mobile">
<div class="row" id="categories">
<?php
$i = 1;
$categories = $obj->getallcategories();
echo '
<div class="col-lg-12">
<div class="m-portlet__body">
<table class="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
<thead>
<tr>
<th>
Id
</th>
<th>
category Name
</th>
<th>
category Name
</th>
<th>
Edit
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody id="show">
';
foreach($categories as $category){
echo'
<tr>
<td>'.$i.'</td><td>'.$category['cname'].'</td>
<td>categories</td>
<td><button value="'.$category['cid'].'" class="btn btn-primary get" id="get'.$category['cid'].'">edit </button></td>
<td><button class="btn btn-danger" id="del'.$category['cid'].'" value="'.$category['cid'].'" type="button">Delete</button></td>
</tr>
';
$i++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
Вот страница insert.php, которая возвращает данные о ajax-вызове нажатия кнопки #save.
<?php
include("../functions/backend.php");
$obj = new Crud();
if(isset($_POST['category']))
{
$cname = $_POST['category'];
$obj->addcategory($cname);
$i = 1;
$categories = $obj->getallcategories();
foreach($categories as $category){
echo'
<tr>
<td>'.$i.'</td><td>'.$category['cname'].'</td>
<td>categories</td>
<td><button value="'.$category['cid'].'" class="btn btn-primary get" id="get'.$category['cid'].'">edit </button></td>
<td><button class="btn btn-danger" id="del'.$category['cid'].'" value="'.$category['cid'].'" type="button">Delete</button></td>
</tr>
';
$i++;
}
}
else {
echo "<script>alert('Something went wrong')</script>";
}
?>
отредактировано с новой функцией self, которую я хочу сделать делегатом.
function removeitem() {
var cid = $("[id^=del]").val();
$.ajax({
type: "post",
url: "delete.php",
asynch: false,
data: {
"cid": cid
},
success: function(data){
$("#show").html(data);
}
});
}
$("[id^=del]").confirm({
text: "Are you sure you want to delete ?",
confirm: function(button) {
//removeitem();
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes I am",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-danger",
cancelButtonClass: "btn-default",
dialogClass: "modal-dialog modal-lg" // Bootstrap classes for large modal
});