Question

12

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

rated 0 times [ 17] [ 5] / answers: 1 / hits: 33636 / 10 Years ago, tue, april 29, 2014, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ashelye

Add To Favorites

Follow

Total Points: 479

Total Questions: 97

Total Answers: 85

Location: Benin

Member since Fri, Mar 24, 2023

1 Year ago

answered 10 Years ago tatyanna · Accepted Answer

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