How to make an "Edit User" form inside Bootstrap Modal using JQUERY?

Question

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.

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>';

So it can run

$data['editar_instructor'] = $this->user->obtener_datos_por_id($id);

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

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!

Answer 1

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>

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

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 -->

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