我正在建立一个学校数据库网站,我想添加一个“编辑”按钮。我想在模式框中编辑和保存元素。我写了一些代码,第一步(即当您单击元素模式框时)正在工作。 但是,在模式框内,我看不到单击的元素,并且当我单击编辑按钮时,删除了单击的元素的内容。如何调用模式框中的clicked元素? 另外,您能解释一下编辑后如何保存吗?非常感谢。
$(document).ready(function () {
//// CHECK INPUT FIELD: Not empty
notEmpty();
/* START: Get List on Pageload */
function getList() {
var data = {'action': 'getList'};
$.ajax({
url: 'Controller/CourseController.php',
data: data, // action = getList muss dem Controller ,
type: 'post',
success: function (data) {
$('#lecture-result').html(data);
//ajax is finished!
}
});
}
/* END: Get List on Pageload*/
// Also cut leading and trailing whitespace
$('body').on('keydown', '.lecture-name-field', function (e) {
console.log();
if (e.which === 32 && e.target.selectionStart === 0) {
return false;
}
});
/* START: Add a new Lecture */
$('body').on('submit', '#add-lecture-form', function (e) {
e.preventDefault();
//// CHECK INPUT FIELD: Not empty
notEmpty();
var postData = $(this).serialize();
var url = $(this).attr('action');
var type = $(this).attr('method');
$.ajax({
url: url,
data: postData,
type: type,
success: function (data) {
$("#lecture-result").html(data);
console.log('new lecture added');
}
});
//clean the input field after click
$('#add-lecture-form')[0].reset();
});
/* END: Add a new Lecture */
function notEmpty() {
$('#save').attr('disabled', 'disabled');
$('.lecture-name-field').keyup(function () {
if ($(this).val() !== '') {
$('#save').removeAttr('disabled');
} else {
$('#save').attr('disabled', 'disabled');
}
});
}
/* Handle Click on action Buttons
* This is used for Actions:
* - delete
* - edit
* */
$("body").on('click', '.action-button', function (e) {
e.preventDefault();
var action = $(this).data('action');
// if action == edit
// validate Input
save();
input ();
var data = {'action': action};
var url = $(this).attr('href');
var id = $(this).data('id');
$.ajax({
url: url,
type: 'POST',
cache: false,
data: {
'action': action,
'id': id
},
success: function (data) { //we want to see this data as result it will appeare as result
if (!data.error) {
$('#lecture-result').html(data); //data from above
}
}
});
});
function input() {
$('#edit').on('click', function () {
var url = $(this).attr('href');
var text = $('.autofiller');
$.ajax({
url: url,
method: "GET",
data: {
'id': text
},
success: function (data) {
var name = JSON.parse(data);
$(".autofiller").val(name.name);// Try this
}
});
});
}
function save() {
$('#btnSave').on('click', function (event) {
alert("save button clicked");
event.preventDefault();
});
}
/* Initial Function Calls: */
getList();
});
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Lecture</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">..... </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="row">
<form method="post" id="add-lecture-form" class="col-xs-6 ajax-form" action="Controller/CourseController.php">
<div class="form-group">
<input type="text" name="title" class="form-control lecture-name-field" placeholder="Please enter a lecture name!!">
</div>
<input type="hidden" id="action" name="action" value="create">
<div class="form-group">
<input type="submit" id="save" class="btn btn-success" value="add a lecture">
</div>
</form>
<div class="col-xs-6"> </div>
<div id="lecture-result"></div>
</div>
</div>
function getCourseListAsView() {
$dbConfigObject = new DbConfig;
$dbConnection = $dbConfigObject->getDBConnection();
$query = "SELECT * FROM courses";
$search_query = mysqli_query($dbConnection, $query);
$listview = "<ul class='course-list'>";
while ($row = mysqli_fetch_array($search_query)) {
//title column in db
$listview .= '<li class="course-list-element">'
. '<a class="detail-link" data-id="' . $row['id'] . '" href="/CourseController">' . $row['title'] . '</a>'
. '<button type="button" id="edit" data-toggle="modal" data-target="#myModal" class="btn btn-primary action-button" data-id="' . $row['id'] . '" data-action="edit" href="Controller/CourseController.php">edit</button>'
. '<button type="button" class="btn btn-danger action-button" data-id="' . $row['id'] . '" data-action="delete" href="Controller/CourseController.php">delete</button>'
. '</li>';
}
$listview .= "</ul>";
echo $listview;
}
function deleteCourse($id) {
$dbConfigObject = new DbConfig;
$dbConnection = $dbConfigObject->getDBConnection();
/** @var type $id */
/** @var type $query */
$query = "DELETE FROM courses WHERE id = $id";
/** @var type $query_delete_lecture */
$query_delete_lecture = mysqli_query($dbConnection, $query);
if (!$query_delete_lecture) {
die('QUERY FAILED');
}
}
function editCourse($id) {
$dbConfigObject = new DbConfig;
$dbConnection = $dbConfigObject->getDBConnection();
/** @var type $title */
if ($dbConnection->connect_error) {
die("Connection failed: " . $dbConfigObject->connect_error);
}
$query = "UPDATE courses set title='Math' where id=$id";
if ($dbConnection->query($query) === TRUE) {
echo "Record updated successfully";
} else {
echo "Error updating record: " . $dbConnection->error;
}
$dbConnection->close();
}
}
答案 0 :(得分:0)
您可以将需要编辑的数据放入 has_many :ticket_purchase_details, foreign_key: :ticket_purchase_id, source: :ticket_purchase_details, class_name: 'TicketPurchaseDetail'
has_many :details, through: :ticket_purchase_details, source: :ticket_purchase, class_name: 'TicketPurchaseDetail'
中。假设您需要编辑来自数据库的<button>
,即:
title
现在,单击<button type="button" id="edit" class="btn btn-primary action-button" data-id="' . $row['id'] . '" data-action="edit"
data-value="'.$row['title'].'" href="Controller/CourseController.php">edit</button>
<!--^added this-->
按钮将在edit
中打开模态,得到jquery
,其标题位于模态下的data-value
字段中,即:>
您的jquery如下所示:
input
只需使用$('#edit').on('click', function () {
var url = $(this).attr('href');
var text = $('.autofiller');
var title=$(this).attr("data-value");//getting title
var id=$(this).attr("data-id"); //getting id
$(".title").val(title); //assiging value of title to your input under modal
//opening modal
$("#myModal").modal('show');
//if save button click
$(".btn-primary").on("click", function() {
//getting title if made change
var new_title=$(".title").val();
$.ajax({
url: url,
method: "GET",
data: {
'id': id,
'title':title //<--sending new title
},
success: function (data) {
$('#myModal').modal('hide');//<--hiding modal
var name = JSON.parse(data);
$(".autofiller").val(name.name);// Try this
}
});
});
});
在模态中添加一个输入字段即可:即:
您的情态:
class =title
在您的php文件中,只需使用 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
..
<div class="modal-body">
<!--added input box to edit data -->
Title : <input type="title" class="title"/>
</div>
...
</div>
</div>
</div>
获取新标题和ID,然后在您的$_GET
查询中传递它们即可。