Passar um ID para uma Janela modal

ExtremeSB · November 16, 2015 at 10:11 PM

Boa Noite, estou a fazar um website para um projeto de escola, no codigo abaixo tenho a tabela com os dados da base de dados e a modal, e queria que ao clicar no botão na linha da tabela, o botão obtese o Nome para a janela modal, e na janela modal apresente todos os dados relacionados com esse nome(Numero, Nome, Ano, Turma)


<html>
<body>

						 <table class="table">
							 <thead>
								 <tr>
									 <th></th>
									 <th>Num</th>
									 <th>Nome</th>
									 <th></th>
								 </tr>
							 </thead>
							 <?php
							 while ($row = $result->fetch_assoc()) {
								 ?>
								 <tbody>
									 <tr>
										 <td width="10%"><img src="avatar.jpg" class="img-circle img-responsive"></td>
										 <td width="20%"><?php echo $row["Numero"]; ?></td>
										 <td width="50%"><?php echo $row["Nome"]; ?></td>
										 <td width="20%"><a href="#myModal" data-toggle="modal" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-user"></span> Saída</a></td>
									 </tr>
								 </tbody>
							 <?php } ?>
						 </table>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
               <div class="modal-dialog" role="document">
                   <div class="modal-content">
                       <div class="modal-header">
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                           <h4 class="modal-title" id="myModalLabel">Ordem de saída</h4>
                       </div>
                       <div class="modal-body">
                           <div class="row">
                               <div class="col-md-12">
                                   <h5><b>Numero:</b></h5></br>
                                   <h5><b>Nome:</b></h5></br>
                                   <h5><b>Ano:</b></h5></br>
                                   <h5><b>Turma:</b></h5></br>
                               </div>
                           </div>
                           <div class="row">
                               <div class="col-md-12">

                               </div>
                           </div>
                       </div>
                       <div class="modal-footer">
                           <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                           <button type="button" class="btn btn-primary">Confirmar</button>
                       </div>
                   </div>
               </div>
           </div>

</body>
<html>

psiico · December 2, 2015 at 06:32 PM

Antes de mais, estou a ver que estás a usar Bootstrap, não te esqueças das outras classes (.col-xs-#, .col-sm-#, .col-lg-#) para as respectivas resoluções (neste momento estás só a utilizar as de Medium devices).

Pelo o que estou a perceber da tua dúvida, tu tens a listagem de alunos e queres que ao carregar num botão (que imagino que não esteja no teu snippet) faça aparecer a modal com os dados do aluno escolhido.

Visto que falas de modal, não deves querer um refresh na página, para isso terás que usar AJAX com Javascript (ou jQuery para facilitar a vida) nessa chamada AJAX terás que passar ao ficheiro que chamas por ajax o ID do aluno e o script faz então a query à BD para ir buscar as informações, apartir daqui há duas opções, ou retorna por ex um JSON com os dados e actualiza na Div da modal e faz a mesma aparecer ou então o script processa tudo e retorna a modal já gerada e então seria só escrevê-la no html (JS: document.write() ou jQ: $('body').append() ) e mostra-la. (se optar pela segunda opção, sugiro também a criação de uma div só para inserir a modal (que será retornado pela chamada AJAX) e poderes ir apagando e actualizando com outras modais se não ao ter várias modais umas em cima das outras, ao fazer uma delas aparecer, todas poderão se sobrepor)

Sign In

Passar um ID para uma Janela modal

Recommended Posts

ExtremeSB

Link to comment

Share on other sites

psiico

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information