Comment faire un “Modifier l'Utilisateur” se former à l'intérieur de Bootstrap Modale à l'aide de JQUERY?

d'abord désolé pour mon mauvais anglais que je suis d'un pays hispanophone.
Je suis un peu nouveau dans le développement Web, j'ai donc quelques projet web dans les mains et avons rencontré des problèmes avec cette exigence.

Dans un contrôleur de fonction index() j'ai besoin de saisir un attribut ID qui passe à la pensée d'un lien comme ceci:

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

De sorte qu'il peut exécuter

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

et elle peut afficher les données de l'utilisateur que je suis en train de modifier. J'ai déjà un code JS qui capture le formulaire Modal de données et de les enregistrer dans la bd.

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

qui fonctionne déjà, mais je n'ai aucune idée de comment faire Modale de charger les données d'un utilisateur spécifique.

Toute suggestion, idée, critiques, etc...? Je vais apprécier quoi que ce soit.
Merci à l'avance!

OriginalL'auteur NexusProx | 2014-04-29

  1. 13

    Permettez-moi de vous montrer un bout de mon code qui fonctionne à partir d'un projet. Espérons qu'il vous aide.

    De mon point de vue, j'ai une table dans laquelle je suis en écho les données comme ceci:

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

    Dans mon jQuery, j'ai le code suivant:

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

    Le Bootstrap modale dans laquelle les données sont peuplées est ici:

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

    C'est la meilleure façon sans les rendre inutiles les requêtes AJAX. J'ai utilisé les "données" de la propriété et un peu de jQuery pour obtenir les valeurs modales.

    Espérons que cette aide! Cheers

    Merci @prat1kk, cela peut helpme beaucoup... j'obtiens une erreur dans le JS de la console. il dit Emty chaîne passée à la getElementById(). chaque fois que je clique sur le bouton modifier. J'ai donc adapter votre code pour l'adapter à la mienne et c'est le JQuery je endup avec...
    $(document).on("click", '.edit_button', function(e) { var username = $(this).de données('username'); var id = $(this).de données('id'); var nom = $(this).de données('fullname'); var password = $(this).de données('mot de passe'); var JCCE = $(this).de données('JCCE'); var privilegios = $(this).de données('privilegios'); $(".id").val(id); $(".nom d'utilisateur").val(nom d'utilisateur); $(".fullname").val(fullname); $(".le mot de passe").val(mot de passe); $(".JCCE").val(JCCE); $(".privilegios").val(privilegios); });
    J'espère que vous avez le code HTML dans le format que j'ai donné ci-dessus. Fondamentalement, les données attrubute aidera à aller chercher la balise. Faire "Inspecter l'Élément" et de voir si les valeurs sont à venir dans les champs de données. Aussi, dans le jquery "sur clic", d'essayer et d'alerter les valeurs de voir ce que vous obtenez
    merci, j'ai eu le même problème, votre méthode a fonctionné comme un charme.
    je vous remercie, votre méthode fonctionne très bien pour moi

    OriginalL'auteur prat1kk