Jump to content

Passar um ID para uma Janela modal


ExtremeSB
 Share

Recommended Posts

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>
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.