Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

pulao

modal mysql, php e jquery

Recommended Posts

boa tarde, estou fazendo um sistema onde exibo alguns valores do banco de dados com um link e gostaria de exibir detalhes desses valores com um modal, onde passaria uma id o modal faria um consulta no banco e retornaria os dados do valor selecionado.

 

caso possam me indicar algo que faça essa interação entre php,mysql e jquery agradeço mto.

 

att

Compartilhar este post


Link para o post
Compartilhar em outros sites

Utilizando ajax

 

Jquery - Ajax

 

ficaria mais ou menos assim

 

html

<a href="javascript:modal(10)">Produto 10</a>

 

Jquery

function modal(id){
 $('#modal').hide();
 $.post(
     'pagina.php',
      {id: id}, //campo, valor
      function(data){
         $(data).html('#modal');
         $('#modal').show();
       }
  );
}

 

pagina.php

//nessa página você recupera um post normal, $_POST['id'] = 10 nesse caso
$sql = "SELECT * FROM produtos WHERE id = '$_POST['id']' ";
$query = mysql_query($sql);
$l = mysql_fetch_array($query);

$retorno = <<<HTML
// aqui você monta o seu modal
HTML;

echo $retorno;

 

o que você der echo na pagina.php é o que vai retornar como data no Jquery

 

acho que isso ira ajudar

Compartilhar este post


Link para o post
Compartilhar em outros sites

entendi, o esse modal teria como adaptar a opção de fechar, como se fosse um popup ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

sim, no exemplo que dei era só fazer

 

<script type="text/javascript">
$('#fechar').click(function(
$(this).hide();
))
</script>
<a href="javascript:void()" class="fechar">fechar</a>

ele iria esconder e mostrar, mais não de fato fechar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

oi meu codigo do modal é o seguinte



<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>


<script type="text/javascript">
$(document).ready(function() {
  $('table tbody tr:odd').addClass('zebraUm');
  $('table tbody tr:even').addClass('zebraDois');
});

$(function(){

   // Dialog
   $('.dialog').dialog({
       autoOpen: false,
       width: 500,
   });

   // Dialog Link
   $('.dialog_link').click(function(){

   $('.dialog').dialog('close');

   var id_link = $(this).attr('id');
   var index = id_link.split('_');

   $('#txt_'+index[1]).dialog('open');
   $('#id_curso').val(index[1]);

   return false;

   });

   //hover states on the static widgets
   $('.dialog_link, ul.icons li').hover(
   function() { $(this).addClass('ui-state-hover'); },
   function() { $(this).removeClass('ui-state-hover'); }
   );
})
</script>

</head>

aqui pego o id 
<?php
$opcao = "<a style='cursor:pointer' id='lk_".$id_curso."' class='dialog_link ui-state-default ui-corner-all'>Inscrição</a>";
?>
abaixo exibe o modal apos o click

<div title="Teste" id="txt_1"  class="dialog">
<p><font size="2">teste</font></p>
<table>
 <form action="inscricao.php" method="POST">
 <input type="text" name="id_curso" id="id_curso" value="id" >
 <tr>
   <td>Usuário</td>
   <td><input type="text" name="usuario"></td>
   <td>Senha</td>
   <td><input type="password" name="senha"></td>
  </tr>
  <tr>
  <td><input type="submit" value="| Logar |"></td>
  </tr>
  </table>
</div>

 

para o primeiro registro esta dando certo, para os outros o modal nao abre, o input dentro do div é so para confirmar o que está vindo apos o clic

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.