如何制作“编辑用户"JQUERY在Bootstrap Modal内使用表单? [英] How to make an "Edit User" form inside Bootstrap Modal using JQUERY?
问题描述
首先抱歉我的英语不好，我来自一个讲西班牙语的国家.我是Web开发的新手，所以我手头有一些Web项目，并且在遇到此要求时遇到了问题.
first sorry for my bad English I'm from an Spanish speaking country. I'm kinda new in Web development, so I have some web project in hands and have been encountering problems with this requirement.
在控制器index()函数中，我需要捕获通过这样的链接传递的ID属性:
In a controller index() function I need to capture an ID attribute that passes thought a link like this:
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表单数据并将其保存到数据库中.
and it can show the user data I'm trying to edit. I already have a JS code that captures the Modal form data and save to the 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加载特定用户的数据.
that's working fine already, but I have no idea how to make the Modal load the data of an specific user.
有任何建议，想法，批评者等吗?我会感激的.预先感谢！
Any suggestion, idea, critics, etc...? I'll appreciate anything. Thanks in advance!
推荐答案
让我向您展示我的项目中的一部分工作代码.希望对您有帮助.
Let me show you a piece of my working code from a project. Hope it helps you.
在我看来，我有一个表，其中正在像这样回显数据:
In my view, I have a table in which I am echoing the data like this:
<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中，我有以下代码:
In my jQuery, I have the following code:
$(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模式如下:
The Bootstrap modal in which the data is getting populated is here:
<!-- 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请求的最佳方法.我使用了数据"属性和一些jQuery来获取模态中的值.
This is the best way without making unnecessary AJAX requests. I have used the "data" property and a bit of jQuery to get the values in the modal.
希望这会有所帮助！干杯
Hope this helps! Cheers
这篇关于如何制作“编辑用户"JQUERY在Bootstrap Modal内使用表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
