如何制作“编辑用户"使用 JQUERY 在 Bootstrap Modal 中形成?

How to make an quot;Edit Userquot; form inside Bootstrap Modal using JQUERY?(如何制作“编辑用户使用 JQUERY 在 Bootstrap Modal 中形成?)

问题描述

首先很抱歉我的英语不好，我来自一个说西班牙语的国家.我是 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 表单数据并保存到 DB.

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">&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 请求的最佳方式.我使用了数据"属性和一些 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 中形成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！