如何使用JQUERY在Bootstrap Modal中创建“编辑用户”表单？

Question

如何使用JQUERY在Bootstrap Modal中创建“编辑用户”表单？

javascriptjquerycodeignitertwitter-bootstrapmodal-dialog

4

首先，抱歉我的英语不太好，我来自一个讲西班牙语的国家。

我在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代码，可以捕获模态表单数据并保存到数据库中。

//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();
            }
        }
    });
}

目前已经可以正常工作，但我不知道如何使模态框加载特定用户的数据。

有什么建议、想法、批评等吗？我会感激任何帮助。谢谢！

- NexusProx

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- prat1kk · Accepted Answer

让我展示一个来自项目中的工作代码片段，希望它能对你有所帮助。

在我的看法中，我有一个表格，我正在像这样回显数据：

<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">&times;</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来获取模态框中的值。

希望这有所帮助！干杯