Modal window with database content

Question

Modal window with database content

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 user 1 , bring information into the user 1 modal window, if you click user 2, show user 2 information, and so on.

Here's what I have so far, I'm not very experienced in Jquery, I think I give my biggest 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>

The following is a list of links from the database, in the results of the bank, there is no error, outside the window the results appear normally.

2

php javascript css jquery

Author: Papa Charlie, 2014-09-10

Source

2 answers

score 2 · Answer 1

I created a very basic jsfiddle . The loop will create a hidden div to receive the information and the modal will use it and accept formatting. I hope it will serve as the 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>';
}

Modal window Html

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

_archives

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

score 0 · Answer 2

Hello guys I wanted help from you, I did the example above and it worked, but I applied it in my project and I'm not having success, can you help me? Below are 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 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(); 
});