Modal window with database contents

Question

I even know the PHP and Javascript, the problem is that I do not know how to create the modal dynamically for each click on a link, bring specific information from that link. If you click on user 1, bring information in user’s modal window 1, if you click on user 2, show user information 2, and so on.

Here’s what I have so far, I’m not very experienced in Jquery, I believe that gives my greatest difficulty in solving this problem

$(document).ready(function()
{
    //Show modal box
    $('.showdialog').click(function(e) {                            
        $('#dialog').show();
        e.preventDefault();
    })

    //Hide modal box        
    $('.closeModal').click(function(){
        $('.mask').hide();
    }); 
}); 

<a href="?acao=editar&idusuario=1" class="showindow">Usuário 1</a>
<a href="?acao=editar&idusuario=2" class="showindow">Usuário 2</a>

Following is a list of links coming from the database, in the database results, no error, outside the window the results appear normally.

Answer 1

I created a jsfiddle very basic. The loop will create a hidden div to receive the information and the modal will use it and accept formatting. I hope it serves as a basis for you to assemble your model.

Your loop mounts a div id="usuario1" for link and a div id="data_usuario1" with the formatting in HTML.

_JS

$(document).ready(function()
{
    $("a").click(function () {
        var id = $(this).attr('id');
        $('#myModal').modal('show');
        $("#conteudoModal").html($('#data_'+id).text());
    });
});

_{HTML / PHP}

Manual option

<a href="#" id="usuario1">usuário 1</a><br>
<div id="data_usuario1" style="display:none">Dados do usuário 1</div>

Option simulating loop of records

for($i = 1; $i <= 10; $i++)
{
    echo '<a href="#" id="usuario'.$i.'">usuário '.$i.'</a><br>';
    echo '<div id="data_usuario'.$i.'" style="display:none">Dados do usuário '.$i.'</div>';
}

Html of modal window

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                 <h4 class="modal-title">Paginas</h4>

            </div>
            <div class="modal-body" id="conteudoModal"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

_files

ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
http://getbootstrap.com/dist/js/bootstrap.min.js
http://getbootstrap.com/dist/css/bootstrap.min.css

Answer 2

Hello people wanted help from you, I did the example above and it worked, but I applied it to my project and I am not succeeding, can you help me? Below the codes used.

echo ''

echo '<div id="sequencial_'.$sequencial.'" style="display:none">'.$sequencial.'</div>';
echo '<div id="descricao_'.$sequencial.'" style="display:none">'.$descricao.'</div>';
echo '<div id="quantidade_'.$sequencial.'" style="display:none">'.$quantidade.'</div>';
echo '<div id="valor_item_'.$sequencial.'" style="display:none">'.$valor_item.'</div>';

and below the javascript

<script>
$("a").click(function () {

    var id = $(this).attr('id');

    $('#myModal').modal('show');        

    document.getElementById('edtdescricao').value  = $('#descricao_'+id).html(); 
    document.getElementById('edtquantidade').value = $('#quantidade_'+id).html(); 
    document.getElementById('edtvalor_item').value = $('#valor_item_'+id).html(); 
    document.getElementById('edtsequencial').value = $('#sequencial_'+id).html(); 
});