![](/img/trans.png)
[英]how to get selected items when popup edit form in bootstrap 4 modal using jquery and laravel 6.x?
[英]How to make an “Edit User” form inside Bootstrap Modal using JQUERY?
首先抱歉我的英语不好我来自西班牙语国家。 我是Web开发的新手,所以我手头有一些Web项目,并且遇到了这个问题的问题。
在一个控制器index()函数中,我需要捕获一个ID属性,通过这样的链接:
echo '<td><a class="btn btn-default" role="button" data-toggle="modal" href="#edituser" data-href="admin/editar/' . $usuario->id . '"><i class="glyphicon glyphicon-edit"></i> Editar</a></td>';
所以它可以运行
$data['editar_instructor'] = $this->user->obtener_datos_por_id($id);
它可以显示我正在尝试编辑的用户数据。 我已经有了一个JS代码,可以捕获Modal表单数据并保存到DB中。
//Wait until the DOM is fully loaded
$(document).ready(function(){
//Listen for the form submit
$('#edituser').submit(editUser);
});
//The function that handles the process
function editUser(event)
{
//Stop the form from submitting
event.preventDefault();
//Collect our form data.
var form_data = {
username : $("[name='username']").val(),
password : $("[name='password']").val(),
repassword : $("[name='repassword']").val(),
JCCE : $("[name='JCCE']").val(),
fullname : $("[name='fullname']").val(),
privilegios : $("[name='privilegios']").val()
};
var action = $(this).attr('data-href');
//Begin the ajax call
$.ajax({
url: action,
type: "POST",
data: form_data,
dataType: "json",
cache: false,
success: function (json) {
if (json.error==1)
{
//Show the user the errors.
$('#EditUserError').html(json.message);
} else {
//Hide our form
$('#edituserform').slideUp();
//Show the success message
$('#EditUserError').html(json.message).show();
}
}
});
}
这已经很好了,但我不知道如何让Modal加载特定用户的数据。
任何建议,想法,评论等......? 我会很感激。 提前致谢!
让我向您展示一个项目中的工作代码。 希望它能帮到你。
在我看来,我有一个表格,我在其中回显这样的数据:
<table class="table table-striped table-bordered" id="store-table">
<thead>
<tr>
<th>Id</th>
<th>Program Name</th>
<th>Content</th>
<th>Quote</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php $i = 1; foreach($business_skills as $business_skill): ?>
<tr>
<td width="5%;"><?php echo $i; ?></td>
<td style="width:15%;"><?php echo $business_skill['name']; ?></td>
<td style="width:45%;"><?php echo $business_skill['content']; ?></td>
<td style="width:15%;"><?php echo $business_skill['quote']; ?></td>
<td>
<button type="button" class="btn btn-primary btn-xs edit_button"
data-toggle="modal" data-target="#myModal"
data-name="<?php echo $business_skill['name'];?>"
data-content="<?php echo htmlentities($business_skill['content']);?>"
data-quote="<?php echo $business_skill['quote'];?>"
data-id="<?php echo $business_skill['id']; ?>">
Edit
</button>
<button type="button" data-id="<?php echo $business_skill['id']; ?>"
data-toggle="modal" data-target="#myModal3" class="btn btn-danger btn-xs delete_button">
Delete
</button>
</td>
</tr>
<?php $i++; endforeach; ?>
</tbody>
</table>
在我的jQuery中,我有以下代码:
$(document).on( "click", '.edit_button',function(e) {
var name = $(this).data('name');
var id = $(this).data('id');
var content = $(this).data('content');
var quote = $(this).data('quote');
$(".business_skill_id").val(id);
$(".business_skill_name").val(name);
$(".business_skill_quote").val(quote);
tinyMCE.get('business_skill_content').setContent(content);
});
填充数据的Bootstrap模式在这里:
<!-- Modal for Edit button -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit Skill</h4>
</div>
<form method="post" action="<?php echo base_url(); ?>admin/edit_business_skill">
<div class="modal-body">
<div class="form-group">
<input class="form-control business_skill_id" type="hidden" name="id">
<input class="form-control business_skill_name" name="name" placeholder="Enter Skill" required>
</div>
<div class="form-group">
<input class="form-control business_skill_content" type="hidden" name="content">
<label for="heading">Enter program details</label>
<textarea id="business_skill_content" name="content"></textarea>
</div>
<div class="form-group">
<input class="form-control business_skill_quote" type="hidden" name="quote">
<input class="form-control business_skill_quote" name="quote" placeholder="Enter Quote" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- End of Modal for Edit button -->
这是不做不必要的AJAX请求的最佳方法。 我使用了“data”属性和一些jQuery来获取模态中的值。
希望这可以帮助! 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.