Popular Modal Bootstrap for User Edit

Question

Good morning, you guys,

I have a user screen with a list that was populated by a foreach, and each line has a link to edit the user. This link opens a modal that should already come with user information, but I’m having a hard time doing so. I’m using Codeigniter, if anyone can give me a hint...

Answer 1

good very well from what I understand of your problem is that here you need to generate modal editing to edit users, I will publish a template for you to follow as base, is pretty simple using only php,bootstrap,html and mysql.

inside your list or table add an Edit field and right after inside your foreach add this code here that will basically take each user’s id and send to their respective edit modal:

<td><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal<?php echo $aqui['login_id']?>"><i class="fa fa-pencil"></i></a></td>

soon after doing this you will add the modal the following code will create a modal for each user of your application to be able to change the data, within the foreach you will rethink the same foreach of your table or list, I advise to put at the end of the code but you who know where puts the following example is a modal to edit password:

    <?php foreach($suavariavel as $aqui){ ?>
    <!-- Modal -->
    <div id="myModal<?php echo $aqui['login_id']?>" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Troca de Senha</h4>
                </div>
                <div class="modal-body">
                    <form role="form" method="post" action="user/edicao.php">
                        <div class="form-group">
                                <input id="id" class="form-control" value=" <?php echo $log['login_id']; ?> " name="id" type="hidden">
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="password" class="form-control" required placeholder="Digite uma senha minimo 5 digitos" name="password">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                                <button id="ALTERAR" class="btn btn-lg btn-warning btn-block " type="submit">ALTERAR</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <?php  }  ?>

then only receive modal data via post:

<?php
include("banco/banco.php");
    session_start();

// Aqui você se conecta ao banco
     $id = $_POST['id'];
     $password = md5($_POST['password']);

    try{
        $query = "UPDATE login set login_password=:password WHERE login_id = $id";
        $stmt = $conexao_pdo->prepare($query);
        $stmt->bindParam(':password', $password, PDO::PARAM_STR);
        $stmt->execute();
         echo "
		<script type=\"text/javascript\">
			alert(\"Usuario Alterado!\");
			location.href='../usuarios.php';		
		</script>";
    }catch(PDOExecption  $e){
        echo "
		<script type=\"text/javascript\">
			alert(\"Erro, Contate o TI!\");
			location.href='../index.php';		
		</script>";
    }

?>

Answer 2

Create a generic modal, with the id "Model_id_do_usuario" and the button where you click to open the modal, you pass the link "Model_id_do_usuario", there will always open the modal of that user! This modal is inside a foreach, passing the information of each user referring to that id.

Answer 3

You may be using ajax to populate the fields, maybe this will help you:

<script>
function pupularModal(id)
{
    var cod_item = id;

    $.ajax({
        url: "/lista/popular_modal",
        type: "POST",
        data: {cod_item: cod_item},
        dataType: "html",
        success: function (result) {
            $("#form_list input").empty(); //limpa os inputs do formulário
            var data = jQuery.parseJSON(result);
            if (data.status == true) {
                $("#idInput").val(data.value1);
                $("#idInput2").val(data.value2);

                $("#modalId").modal('show');//mostra modal com as informações preenchidas
            } else {
                alert('Erro ao processar')
            }
        }
    });
}
</script>

Controller:

public function popular_modal()
{
    $cod_lista = $this->input->post('cod_item');

    $item = $this->list_model->get_by($cod_lista);

    if ($item) {

        $data = array(
            'status' => true,
            'value1' => $item->value1,
            'value2' => $item->value2
        );

        echo json_encode($data);
    }
}

And on the button you use a onclick="pupularModal(IdDoItem);"