Passar parâmetros em modal Bootstrap

Weiller Schepis · Julho 31, 2014

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 =)

Maykel-ctba · Julho 31, 2014

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 · Agosto 2, 2014

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 · Agosto 4, 2014

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 · Agosto 4, 2014

Uma vez precisei fazer algo do gênero.

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

Gerson Silas dos Santos · Agosto 6, 2014

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 · Agosto 6, 2014

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]([/size]'fones_tela.php'[/size],[/size] [/size]{[/size]acao[/size]:[/size] [/size]'alterar'[/size],[/size]idfone[/size]:[/size] idfone[/size]}[/size]

2 - Na última instrução de código você mostrou a codificação do arquivo fones_tela.php. Esse arquivo é o mesmo que está contido a tabela HTML? ou é um arquivo php separado que serve só para fazer a consulta?

Muito obrigado por estar me ajudando =)

Gerson Silas dos Santos · Agosto 6, 2014

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 · Agosto 7, 2014

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 · Agosto 7, 2014

Que bom que funcionou! Valeu!

Aristides Neto · Setembro 12, 2014

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 · Setembro 12, 2014

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 · Setembro 12, 2014

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 · Setembro 12, 2014

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

Walfrido · Novembro 20, 2014

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 · Novembro 20, 2014

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 · Novembro 21, 2014

Onde vou inserir essa função?

<script type="text/javascript">
// jquery para chamar a modal
$("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 · Novembro 21, 2014

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 · Novembro 21, 2014

Ok!

wmomesso · Dezembro 1, 2015

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

Arquivado

Passar parâmetros em modal Bootstrap

Recommended Posts

Weiller Schepis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maykel-ctba 233

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonio Marcos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maykel-ctba 233

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerson Silas dos Santos 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weiller Schepis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerson Silas dos Santos 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weiller Schepis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerson Silas dos Santos 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aristides Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerson Silas dos Santos 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aristides Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerson Silas dos Santos 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Walfrido 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerson Silas dos Santos 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Walfrido 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Walfrido 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerson Silas dos Santos 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

wmomesso 0