Publicado em 31 de jul.

Passar parâmetros em modal Bootstrap

Olá pessoal, estou desenvolvendo um sistema em PHP que cadastra e atualiza dados através da Janela Modal Bootstrap, só que agora estou encontrando uma dificuldade no momento de atualizar um registro e gostaria da ajuda de vocês. Vamos lá vou descrever o problema.

1 - Tenho uma GRID que possui vários registros e a opção de atualizar ao lado de cada um registro.

2- Ao clicar em atualizar gostaria que as informações do usuário fosse aberto em uma MODAL, mas ao tentar passar o id do usuário pelo HREF a modal não abre, exemplo:

<a href="#MeuModalAtualizar?funcao=editar&id= <?php echo $usuario['id_usuario']?>" // não sei se esta é a forma correta

OBS: lembrando que estou trabalhando com banco de dados e estou querendo resgatar a id do banco para que a mesma seja passada para a MODAL, assim abrindo as informações do usuário a ser atualizado na MODAL.

Desde já agradeço a todos =)

Discussão (21)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Maykel-ctba· 31 de jul.

Eu faço dessa maneira:

No Link, passo o parametro data-toggle = modal. O registro01 pode ser alterado dinamicamente, você pode usar o seu $usuario['id_usuario'], mas lembre-se que tem que criar a div com esse nome.

Link:

<a data-toggle="modal" href="#registro01">Editar Registro 01</a>

Modal:

<div class="modal fade" id="registro01">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
 <h1 class="modal-title">Registro</h4>
 </div>
 <div class="modal-body">
 <p>Conteúdo</p>
 </div>
	</div>
 </div>
</div>

Antonio Marcos· 2 de ago.

Eu faço dessa maneira:

No Link, passo o parametro data-toggle = modal. O registro01 pode ser alterado dinamicamente, você pode usar o seu $usuario['id_usuario'], mas lembre-se que tem que criar a div com esse nome.

Link:

<a data-toggle="modal" href="#registro01">Editar Registro 01</a>

Modal:

<div class="modal fade" id="registro01">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
 <h1 class="modal-title">Registro</h4>
 </div>
 <div class="modal-body">
 <p>Conteúdo</p>
 </div>
	</div>
 </div>
</div>

Mas nesse caso, teria que criar um modal para cada registro?

Na ocasião de centenas de registros o código HTML ficaria imenso e pesado.

Ex:

<div class="modal fade" id="registro01">
<div class="modal-dialog"> .....

<div class="modal fade" id="registro02">
<div class="modal-dialog"> .....

Maykel-ctba· 4 de ago.

Acho que é o jeito, já que o modal é uma requisição enquanto a página está aberta. Talvez você consiga algo com AJAX, passando o ID não via HREF, e sim via algum outro atributo, ex: data-id:

<a href="#MeuModalAtualizar?funcao=editar" data-id="<?php echo $usuario['id_usuario']?>">Atualizar</a>

Aí no script, faça no evento onClick, ou no abrir do modal, e busque por esse atributo data-id para buscar. Aí, sem atualizar a página, só com AJAX mesmo.

Williams Duarte· 4 de ago.

Uma vez precisei fazer algo do gênero.

segue o link http://bit.ly/1kizsHz

Gerson Silas dos Santos· 6 de ago.

Eu precisei fazer algo parecido com isso, quebrei bastante a cabeça, mas consegui. Para isso utilizei o jquery para chamar a modal e dentro da função jquery fiz um $.post para chamar um arquivo php com o html da página. O teu botão terá quer ter o atributo data-id ( ou data-<qualquer coisa>) e este atributo será o id do seu registro.

Acho que o que voce quer é mais ou menos isso:

// jquery para chamar a modal

$("table").on('click',"#btnAlterarFone", function(){
 var idfone = $(this).attr('data-id'); // pega o id do botão

 $.post('fones_tela.php', {acao: 'alterar',idfone: idfone}, function(retorno){
 $("#modalFone").modal({ backdrop: 'static' });
 $("#telafone").html(retorno);
 });

});

// tabela com os dados

<table>
 <thead>
 <tr>
 <td>Ação</td>
 <td>Fone</td>
 </tr>
 </thead>
 <tbody>
 <?php
 do {
 ?>
 <tr>
 <td>
 <a id="btnAlterarFone" data-id="<?php echo $campos_fone['id_fone'];?>" class="btn btn-default">Alterar</a>
 </td>
 <td><?php echo $campos_fone['no_fone']; ?></td>
 </tr>
 <?php } while ($campos_fone = mysql_fetch_assoc($queryfone)); ?>
 </tbody>
</table>

//modal para edição dos campos

<div class="modal drag" id="modalFone" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
 <div class="modal-dialog">
 <div>

 <div id="telafone">

 </div>

 </div>

 </div>
</div>

// conteudo do arquivo fones_tela.php

$idfone = filter_input(INPUT_POST, 'idfone', FILTER_SANITIZE_NUMBER_INT); // recebe o parametro vindo do post do jquery

$sqlfone = "SELECT * FROM fones WHERE id_fone = '$idfone'";
$queryfone= mysql_query($sqlfone) or die(mysql_error());
$campos_fone= mysql_fetch_assoc($queryfone);

< codigo html com o form e os campos>

Weiller Schepis· 6 de ago.

Desculpe-me a ausência pessoal :) , estava em outra etapa do sistema e tinha parado um pouco de tentar essa da modal, mas agora estou em um beco sem saída e preciso fazer isso rs, daqui a pouquinho vou tentar os procedimentos que vocês me passaram e dou um retorno, mas desde já eu agradeço por se disponibilizarem a me ajudar. :yes:

Gerson estou aqui tentando fazer do jeito que você conseguiu, mas me encontrei com as seguintes dúvidas:

1 - Na linha 8 do código jquery você chama a ID #telafone, o que significa na verdade?

2 - Na linha 6 do código jquery você informou a instrução {acao: 'alterar', idfone: idfone}, de onde vem a instrução acao: 'alterar' e idfone: idfone?

$[/size].[/size]post/size

Gerson Silas dos Santos· 6 de ago.

Ola Weiller

1 - Na linha 8 do código jquery você chama a ID #telafone, o que significa na verdade?

R= Se você perceber em "modal para edição dos campos" tem uma div com o mesmo id. É nesta

div que irá aparecer os seus campos, pois o jquery irá executar o arquivo php e o resultado deste php irá aparecer nesta div.

2- $.post('fones_tela.php', {acao: 'alterar',idfone: idfone}

R= Nesta linha ele está chamando o fones_tela.php e passando os parametros acao e idfone, neste caso eu defini o nome do parametro acao com conteudo 'alterar' e o parametro idfone com o conteudo da variavel idfone ( que vem da linha 4 que por sua vez que vem do arquivo html linha 16 do atributo "data-id=<?php echo $campos_fone['id_fone'];?>" )

3- fones_tela.php é o arquivo onde você vai montar a sua tela com seus campos e etc conforme os parametros que vieram do jquery. Na linha 4 deste arquivo estou recuperando o idfone e com este idfone eu posso fazer um sql e buscar no banco este registro, assim vc pode atribuir o resultado deste sql nos teus inputs. Neste arquivo acabei esquecendo de recuperar o parametro acao, que pode ser feito conforme a linha abaixo:

$acao = filter_input(INPUT_POST, 'acao', FILTER_SANITIZE_STRING);

Weiller Schepis· 7 de ago.

Gerson

depois de mexer e mexer aqui consegui recuperar os dados na modal com o conhecimento que você passou para mim!! :)

Muitíssimo obrigado por se disponibilizar a tirar essa imensa dúvida, sou muito grato mesmo!!

Gerson Silas dos Santos· 7 de ago.

Que bom que funcionou! Valeu!

Aristides Neto· 12 de set.

>
Gerson

depois de mexer e mexer aqui consegui recuperar os dados na modal com o conhecimento que você passou para mim!! :)

Muitíssimo obrigado por se disponibilizar a tirar essa imensa dúvida, sou muito grato mesmo!!

Cara tem como voce postar o seu codigo funcinando?

Tentei seguir essas dicas mas nao consegui resolver meu problema...

Obrigado

Gerson Silas dos Santos· 12 de set.

abneto,

segue abaixo.

codigo da modal:

<div class="modal drag" id="modalContatos" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
 <div class="modal-dialog">
 <div class="panel formulario">

 <div id="pessoas_contato">

 </div>

 </div>

 </div>
</div>

código jquery para chamar a modal

function incluir_contato(id){

 $.post('pessoas/contatos_tela.php', {acao: 'incluir', id: id}, function(retorno){
 $("#modalContatos").modal({ backdrop: 'static' });
 $("#pessoas_contato").html(retorno);
 });
 }

arquivo php com o form para a modal

<?php
	$acao = filter_input(INPUT_POST, 'acao', FILTER_SANITIZE_STRING);
	$id = filter_input(INPUT_POST, 'id', FILTER_SANITIZE_NUMBER_INT);
?>

<form id="frmFone" method="post" action="">
 <div class="tituloform"><?php echo $titulo; ?></div>
 <input type="hidden" name="tf_id" id="tf_id_fone" value="<?php echo $id ;?>">
 <input type="hidden" name="tf_acao" id="acao_fone" value="<?php echo $acao ;?>">
 <fieldset <?php echo $st_disabled ;?>>

 <div class="row-fluid form-group" >
 <div id="vtipo" class="has-feedback span4">
 <label for="Titulo">Tipo Fone</label>
 <input type="text" name="tf_tipo" autofocus class="form-control input-sm" id="tipo" required value="<?php echo $tipo ;?>">
 <span id="spantipo" class="glyphicon form-control-feedback"></span>
 </div>

 <div id="vfone" class="has-feedback span4">
 <label for="Titulo">Número Fone</label>
 <input type="text" name="tf_fone" class="form-control input-sm" id="fone" required value="<?php echo $fone ;?>">
 <span id="spanfone" class="glyphicon form-control-feedback"></span>
 </div>
 <div id="vcpf" class="has-feedback span4">
 <div id="voperadora" class="has-feedback">
 <label for="Titulo">Operadora</label>
 <input type="text" name="tf_operadora" class="form-control input-sm" id="operadora" value="<?php echo $operadora ;?>">
 <span id="spanoperadora" class="glyphicon form-control-feedback"></span>
 </div>
 </div>
 </div>
 <div class="row-fluid ">
 <div class="span6">
 <label for="chkPrincpal">Marcar como Telefone Principal? </label>
 <input type="checkbox" name="st_principal" id="st_principal" <?php echo $st_marcado ;?>>
 </div>
 </div>

 <div id="vobservacoes" class="has-feedback row-fluid form-group">
 <label for="Titulo">Observações</label>
 <input type="text" name="tf_obs" autofocus class="form-control input-sm" id="observacoes" value="<?php echo $obs ;?>">
 <span id="spanobservacoes" class="glyphicon form-control-feedback"></span>
 </div>

 </fieldset>
 <div id="teste"></div>

 <div id="retorno4"></div>

 <div class="modal-footer">
 <button id="btnIncluirFone" name="btnSubmit" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-ok" ></span> Ok</button>
 <a id="btnFecharFone" href="#" name="btnFechar" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> Cancelar</a>

 </div>
 </form>

basicamente é isso, se tiver dúvidas poste o seu código aqui.

Aristides Neto· 12 de set.

Gerson valeu pela resposta...

Um pouco depois de eu postar aqui consegui resolver meu problema...

No meu caso não estava abrindo a modal...depois de algumas brigas descobri que preciso inserir o caminho inteiro na linha abaixo (isso porque estou usando URL amigáveis)...

$home = 'localhost/sistema/';
$.post('<?php echo $home ?>/edit-class.php', {eventos_id: eventos_id}, function(retorno){

Agora esta funcionando de boa... mas não entendi como faço para enviar os dados do form e salvar no banco.

Ao clicar no botão salvar ele fecha a modal e não faz nada... esse é o código da modal.

<?php

// Recebe o parametro
$eventos_id = (int)$_POST['eventos_id'];

// Evento salvar classfificacao

if(isset($_POST['btnSalvarClass']) && $_POST['btnSalvarClass'] == 1){

	$eventos_id = (int)$_POST['eventos_id'];
	$evento = addslashes($_POST['evento']);

	// Update
	$update = $conectar->prepare("UPDATE eventos SET evento = ? WHERE id = ? ") or die (mysqli_error($conectar));
	$update->bind_param('si', $evento, $eventos_id);
	$update->execute();

	$tab = 2;
}

// Busca a classificacao

$sqlClass = $conectar->prepare("SELECT id, evento FROM eventos WHERE id = ? ") or die (mysqli_error($conectar));
$sqlClass->bind_param('i', $eventos_id);
$sqlClass->execute();
$sqlClass->store_result();
$sqlClass->bind_result($id, $evento);
$sqlClass->fetch();

?>

<form role="form" action="" method="post">
	<div class="form-group">
 <label for="exampleInputEmail1">Descrição</label>
 <input type="text" name="evento" class="form-control" value="<?php echo $evento ?>" >
 <input type="hidden" name="eventos_id" value="<?php echo $eventos_id ?>" >
	</div>

	<div class="form-group">
 <button type="submit" name="btnSalvarClass" value="1" class="btn btn-success" ><i class="fa fa-save fa-fw"></i> Salvar alterações</button>
	</div>
</form>

Valeu...

Gerson Silas dos Santos· 12 de set.

Eu fiz utilizando jquery/ ajax, desta forma não cheguei a testar.

Walfrido· 20 de nov.

Eu fiz utilizando jquery/ ajax, desta forma não cheguei a testar.

Posta ai como você fez... to procurando uma solução e até o momento não consegui, estou suando a versão 3.2

Gerson Silas dos Santos· 20 de nov.

segue:

Confesso que não testei o código abaixo, pois exclui algumas coisas para simplificar o exemplo.

Javascript para chamar a modal:

// jquery para chamar a modal

$("table").on('click',".btnChamarModal", function(){
 var id = $(this).attr('id'); // pega o id do botão

 $.post('form_tela.php', {acao: 'alterar',idnome: id}, function(retorno){
 $("#modalForm").modal({ backdrop: 'static' });
 $("#telaEdicao").html(retorno);
 });

});

<table>
 <thead>
 <tr>
 <td>Ação</td>
 <td>Nome</td>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>
 <a id="1" class="btnChamarModal btn btn-default">Alterar</a>
 </td>
 <td>Nome 1</td>
 </tr>

 <tr>
 <td>
 <a id="2" class="btnChamarModal btn btn-default">Alterar</a>
 </td>
 <td>Nome 2</td>
 </tr>
 <tr>
 <td>
 <a id="3" class="btnChamarModal btn btn-default">Alterar</a>
 </td>
 <td>Nome 3</td>
 </tr>

 <tr>
 <td>
 <a id="4" class="btnChamarModal btn btn-default">Alterar</a>
 </td>
 <td>Nome 4</td>
 </tr>

 </tbody>

</table>

//modal para edição dos campos

<div class="modal drag" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
 <div class="modal-dialog">
 <div>

 <div id="telaEdicao">

 </div>

 </div>

 </div>
</div>

// conteudo do arquivo form_tela.php

$idnome = filter_input(INPUT_POST, 'idnome', FILTER_SANITIZE_NUMBER_INT); // recebe o parametro vindo do post do jquery
$acao = filter_input(INPUT_POST, 'acao', FILTER_SANITIZE_STRING); // recebe o parametro vindo do post do jquery

$sqlNome = "SELECT * FROM nomes WHERE id = '$id'";
$queryNome= mysql_query($sqlNome) or die(mysql_error());
$campos_nome= mysql_fetch_assoc($queryNome);

$nome = $campos_nome['nome'];

<form>
	<input type="text" name="nome" id="nome" value="<?php echo $nome;?>">
</form>

Walfrido· 21 de nov.

Onde vou inserir essa função?

$("table").on('click',".btn", function(){
var id = $(this).attr('id'); // pega o id do botão

$.post('pessoas.detalhes.php', {acao: 'view', id: id}, function(retorno) {
$("#modal-form").modal({ backdrop: 'static' });
$("#modal-body").html(retorno);
});
});
</script>

Coloquei no header e footer e nada de chamar a função!!!

<a type="button" id="<?=$l->id_pessoa;?>" class="btn btn-xs btn-success">ver</a>

<div id="modal-form" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
 <!-- data-backdrop="false" data-keyboard="false" -->
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">×</button>
 <h4 class="blue bigger">Form Modal</h4>
 </div>

 <div class="modal-body"></div>

 </div>
 </div>
</div>

Walfrido· 21 de nov.

Resolvido :natalbiggrin:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
 <script src="app.js"></script>

<script type="text/javascript">
$('#myModal').on('hidden.bs.modal', function () {
 $(this).removeData('bs.modal');
});
</script>

Gerson Silas dos Santos· 21 de nov.

Ok!

wmomesso· 1 de dez.

Perfeito usei a dica postada por Maykel-ctba, e funcionou perfeitamente, muito obrigado!

Fernandiinhoo· 25 de ago.

Em 31/07/2014 at 15:16, Maykel-ctba disse:

Eu faço dessa maneira:

No Link, passo o parametro data-toggle = modal. O registro01 pode ser alterado dinamicamente, você pode usar o seu $usuario['id_usuario'], mas lembre-se que tem que criar a div com esse nome.

Link:

<a data-toggle="modal" href="#registro01">Editar Registro 01</a>

 **Modal:**

<div class="modal fade" id="registro01">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
 <h1 class="modal-title">Registro</h4>
 </div>
 <div class="modal-body">
 <p>Conteúdo</p>
 </div>
	</div>
 </div>
</div>

	MARAVILHOSO! Funcionou muito! Obrigadooo!!!

Maykel-ctba· 28 de ago.

@Fernandiinhoo imagina! :)