Publicado em 19 de abr.

modal mysql, php e jquery

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

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Vinicius Rangel· 19 de abr.

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

pulao· 19 de abr.

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

Vinicius Rangel· 19 de abr.

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.

pulao· 20 de abr.

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