Modal window with database contents

Question

Modal window with database contents

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

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

This is what I have so far, I'm not very experienced in Jquery, I think 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>

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

php javascript jquery css

asked by anonymous 10.09.2014 / 02:49

2 answers

Create a web form generator Constructor abstract class

score 2 · Answer 1

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

Your loop assembles a% div for link and a id="usuario1" div with 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>

Simulating loop of records option

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>

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

score 0 · Answer 2

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