Jump to content
Samuel Candido

Colocar variável $_GET em link do modal

Recommended Posts

Olá todos. Estou fazendo um projeto e gostaria que, após o usuário clicar no botão de deletar, abra um modal de confirmação.

Se o usuário confirmar, ele é direcionado para o script que deleta a informação do banco.

Porém, não consigo fazer com que o link do modal receba como parâmetro $_GET o id da informação.

O código do modal é este.

<div id="confirmDelete" class="modal">
	<div class="modal-content">
		<h4 class="center">Confirmar Deleção de Anúncio</h4>
		<p>Deseja mesmo deletar o anúncio?</p><br><br>
		<p class="right-align"><b>ATENÇÃO:</b> AÇÃO PERMANENTE!</p>
	</div>
	<div class="modal-footer">
		<a class="btn-flat waves-effect waves-green modal-action" onclick="deletar();">Sim, deletar!</a>
		<a class="btn-flat waves-effect waves-red modal-action modal-close" href="anuncios.php">Não, continue com ele!</a>
	</div>
</div>

E para preencher as informações da tabela em que estou escrevendo os dados do banco faço o seguinte.

echo "
	<tr>
		<td>".$row['id']."</td>
		<td>".$row['nome']."</td>
		<td>".$row['descricao']."</td>
		<td><img class='responsive-img' src='../../".$fotoExibida[0]."' style='height:100px;'/></td>
		<td>R$ ".$row['preco']."</td>
		<td>".$row['tags']."</td>
		<td>".$row['vend']."</td>
		<td>".$row['t_anun']."</td>
		<td><a class='btn waves-effect waves-light' href='editar.php?id=".$row['id']."'><i class='material-icons'>mode_edit</i></a><br><br><a class='btn waves-effect waves-light' href='?id=".$row['id']."#confirmDelete'><i class='material-icons'>delete_forever</i></a></td>
	</tr>
";

Mas o modal nem abre desse jeito, e quando abre, não consigo pegar o id.

Alguém tem alguma solução?

Share this post


Link to post
Share on other sites

Provavelmente o modal tenha um modo para você passar parâmetros, você terá que ler a documentação do mesmo, pois isso varia conforme  vontade de quem desenvolveu o modal.

Share this post


Link to post
Share on other sites

Uma maneira 'easy' seria utilizar o confirm() do JavaScript.

 

Porém se quer usar o modal é necessário estudar o mesmo como o @ESerra disse

Share this post


Link to post
Share on other sites

Agora entendi sua duvida, e ela não tem relação nenhuma com o Modal.

 

 

 

E sim como passar variáveis do php para o JavaScript/HTML.

 

Exemplo de como passar parametros para o JS/HTML

Chamando a página por exemplo:

http://localhost/index.php?id=2

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	
	<h1>Número - <?php echo $_GET['id']?></h1>
	
	
	<script type="text/javascript">
		var idModal = '<?php echo $_GET['id']?>';
		alert(idModal);
	
	</script>
</body>
</html>

 

 

Ok agora que sabemos como manipular informações do php e passar para o JS/HTML

 

Citar

Se o usuário confirmar, ele é direcionado para o script que deleta a informação do banco.

Pra isso você tem algumas opções.

 

Como deveria enviar isso?

Via Form/GET ou POST (form mais simples)?

AJAX?

 

Exemplo do form/GET (misturar php com html fica óóóó Uma beleza)

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
	<div class="modal-content">
	  <h4>Modal Header</h4>
	  <p>A bunch of text</p>
	</div>
	<div class="modal-footer">
		<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Cancelar</a>	
		
		<form method="GET" action="delete.php">
			<input type="hidden" name="id" value="<?php echo $_GET['id'];?>"/>		
			<input class="waves-effect waves-green btn-flat " type="submit" value="Excluir" />
		</form>
		
	</div>
	</div>

Então se o cara clicar 'Cancelar ele fecha... se ele clicar 'Excluir' é disparado o form/get.

 

Share this post


Link to post
Share on other sites

Desculpe a ignorância, mas como conseguiria aplicar esse método no meu caso?

A imagem é como o resultado é apresentado ao usuário.

E pra preencher a tabela, estou usando php com o seguinte código.

echo "<tr>
		<td>".$row['id']."</td>
		<td>".$row['nome']."</td>
		<td>".$row['descricao']."</td>
		<td><img class='responsive-img' src='../../".$fotoExibida[0]."' style='height:100px;'/></td>
		<td>R$ ".$row['preco']."</td>
		<td>".$row['tags']."</td>
		<td>".$row['vend']."</td>
		<td>".$row['t_anun']."</td>
		<td><a class='btn waves-effect waves-light' href='editar.php?id=".$row['id']."'><i class='material-icons'>mode_edit</i></a><br><br><a class='btn waves-effect waves-light' href='?id=".$row['id']."#confirmDelete'><i class='material-icons'>delete_forever</i></a></td>
	</tr>
";

Eu tentei passar o id pelo botão de delete, mas ele não abre o modal. Tentei também com o data-target, o modal abre, mas não deleta.

Screenshot_1.png

Share this post


Link to post
Share on other sites
1 hora atrás, Samuel Candido disse:

Eu tentei passar o id pelo botão de delete, mas ele não abre o modal. Tentei também com o data-target, o modal abre, mas não deleta.

 

Provavelmente você cometeu algum erro de JS?

Abriu o Navegador na aba console? (Ctrl + Shift + J -> no Google Chrome)

 

Falando nisso...

Você importou o jQuery no seu projeto?

Você importou o materialize.min.js no seu projeto?

Como informado na própria documentação?

http://materializecss.com/getting-started.html

 

Verificou se o mesmos estão sendo carregados  corretamente?

 

Citar

mas como conseguiria aplicar esse método no meu caso?

O exemplo eu dei exatamente em cima do seu código/contexto, caso queira que alguem faça para você a area é essa:

https://forum.imasters.com.br/forum/87-empregos-e-parcerias/

 

 

Novamente... faça por partes,

Abre a documentação do MaterializeCss, esquecendo por hora do php, a hora q conseguir manipular 100% o modal em uma pagina de testes isolada, pense no seu sistema.

 

 

 

 

Share this post


Link to post
Share on other sites

Obs:  data-target é mais focado qnd se trabalha com JS.

 

Outra coisa q vale a pena citar.

é eu fiz um pequeno ajustes no meu post, releia ele.

Basicamente esqueci de colocar os hiddens no form:

<form action="delete.php" method="GET">
	<input type="hidden" name="id" value="1" />
</form>

 

 

Share this post


Link to post
Share on other sites

outra opção é passar direto pelo link, ex:

 

<a href="delete.php?id=156">Excluir</a>

Porem isso é bem básico em html.



Recomendo a leitura:

https://www.caelum.com.br/apostila-html-css-javascript/

Share this post


Link to post
Share on other sites

Consegui fazer. Obrigado!

Mas, aproveitando o tópico, sabe como faço por método POST?

Eu tentei assim:

HTML

<div id="confirm" class="modal">
	<div class="modal-header">
		<a class="btn-flat waves-effect modal-action modal-close">&times</a>
		<h4 class="center">AVISO!</h4>
	</div>
	<div class="modal-content">
		<p>Ao clicar em ENVIAR, você nos enviará um e-mail com as informações preenchidas neste formulário, se aprovarmos sua solicitação você será notificado em seu menu de "Alertas" caso já tenha uma conta, caso contrário entraremos em contato por e-mail ou celular</p>
	</div>
	<div class="modal-footer">
		<form method="POST" action="actions/enviar_anuncio.php">
			<input type="hidden" name="nome" id="nomeH">
			<input type="hidden" name="email" id="emailH">
			<input type="hidden" name="conta" id="contaH">
			<input type="hidden" name="celular" id="celularH">
			<input type="hidden" name="produto" id="produtoH">
			<button class="btn-flat waves-effect waves-green modal-action modal-close agree" type="submit">Entendi!</button>
		</form>
	</div>
</div>

<form>
	<div class="row">
		<div class="input-field col s12">
			<i class="material-icons prefix">account_circle</i>
			<input id="nome" type="text" class="validate" name="nome" required>
			<label for="nome">Nome completo</label>
		</div>
	</div>
	<div class="row">
		<div class="input-field col s8 m10">
			<i class="material-icons prefix">contact_mail</i>
			<input id="email" type="text" class="validate" name="email" required>
			<label for="email">E-mail</label>
		</div>
		<div class="input-field col s4 m2">
			<input id="conta" type="checkbox" name="conta" value="X">
			<label for="conta" class="flow-text">Já tenho conta.</label>
		</div>
	</div>
	<div class="row">
		<div class="input-field col s12">
			<i class="material-icons prefix">stay_primary_portrait</i>
			<input id="celular" type="tel" class="validate" name="celular">
			<label for="celular">Celular</label>
		</div>
	</div>
	<div class="row">
		<div class="input-field col s12">
			<i class="material-icons prefix">perm_media</i>
			<input id="produto" name="produto" class="validate" type="text" required>
			<label for="produto">O que deseja vender?</label>
		</div>
	</div>
	<div class="row right">
		<button class="aviso waves-effect waves-light btn" data-target="confirm"><i class="material-icons right">send</i>Enviar</button>
	</div>
</form>

E o JS

$('.aviso').on('click', function(){
    var nome = $('#nome').val();
    var email = $('#email').val();
    var conta = $('#conta').val();
    var celular = $('#celular').val();
    var produto = $('#produto').val();
    $('#nomeH').val(nome);
    $('#emailH').val(email);
    $('#contaH').val(conta);
    $('#celularH').val(celular);
    $('#produtoH').val(produto);
    $('#confirm').modal('open');
});

Estou fazendo algo de errado?

O formulário envia normalmente, mas, se deixar algo sem preencher, não envia.

Share this post


Link to post
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

  • Similar Content

    • By guilherme_soi
      Ao acessar o meu aplicativo recebo a seguinte mensagem: 'the dbname and launch parameters must be specified on first run' como resolver?
       
      Ao acessar o meu aplicativo recebo a seguinte mensagem: 'the dbname and launch parameters must be specified on first run' como resolver? Existe algo que possa ser feito?
    • By lamounier
      Estou desenvolvendo um site que carrega os últimos 6 vídeos adicionados, e quando clica em algum abre um modal para assistir o vídeo, quando fecho o modal o vídeo continua rodando, estou tentando fazer com que o vídeo pare mas não estou conseguindo.

      home.php
      <?php if (!empty($videos)) { $i=0; foreach ($videos $videos) { ?> <div class="col-md-4"> <div class="ot-portfolio-item"> <figure class="effect-bubba"> <div class="embed-responsive embed-responsive-16by9"> <iframe width="949" height="534" src="https://www.youtube.com/embed/<?=$video["link"]?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <figcaption> <a href="#" class="video-btn" id="#video_<?=$video["video_id"]?>" data-src="https://www.youtube.com/embed/<?=$video["link"]?>" data-toggle="modal" data-target="#video_<?=$video["video_id"]?>"></a> </figcaption> </figure> </div> </div> <div class="modal fade" id="video_<?=$video["video_id"]?>" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="X"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="Modal-label-1"><?=$video["titulo"]?></h4> </div> <div class="modal-body"> <div class="embed-responsive embed-responsive-16by9"> <iframe id="video_iframe" width="949" height="534" src="https://www.youtube.com/embed/<?=$video["link"]?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="modal-works"><span><?=$video["autor"]?></span></div> <p><?=$video["video_description"]?></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default teste" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> <?php if (++$i == 6) break;} // FOREACH } // IF ?> </div>  

      .js
      var videoSrc; var videoId; $('.video-btn').click(function() { videoSrc = $(this).data( "src" ); videoId = $(this).data('target'); //aqui pego o id do modal }); //aqui pauso o vídeo quando fecho o modal, mas só funciona se eu colocar diretamente o id "$('#video_...') " $(videoId ).on('hide.bs.modal', function () { $("#video_iframe").attr('src',videoSrc); })  
      alguém sabe como faço para o modal para o vídeo quando fechado?
    • By manolegal
      Bom dia
      Após selecionar a Pessoa em um formulário, tenho um botão para editar os dados desta pessoa em um Modal:
      <span class="input-group-addon"><a href="#" id="btn_editar" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#modal_edit_pessoa_red"></a></span> Busco os dados no BD e preencho os inputs do modal:
      <script type="text/javascript"> $(document).ready(function () { $('#btn_editar').click(function () { var id = $("#id_cont_hid").val(); var id_cont= JSON.stringify(id); $.ajax({ type: "POST", url: "minha_busca_bd?id=" + id, cache: false, data: "{'id':'" + id_cont + "'}", dataType: 'json', }).done(function(retorno){ if (retorno.inserido == true) { $('#md_edit_pes_cpf').val(retorno.dados.cpf); // Atualizo valor campo cpf $("#md_edit_pes_cpf").mask("999.999.999-99"); // Adiciono máscara cpf } .......... Em relação aos dados está funcionando corretamente.
      O problema é em relação às máscaras de entrada dos campos (cpf) que na primeira vez que for alterar os dados está vindo corretamente, porém, caso tente alterar novamente os dados da mesma pessoa, a máscara não funciona (não vem formatado corretamente).
      Outro detalhe é  que o modal não está sendo resetado (limpo), principalmente após tentativa de edição e ser mostrada mensagem do arquivo PHP que faz a validação dos dados inseridos, uma vez que ao fechar o modal e ao reabri-lo novamente continua mostrando a mensagem de validação, o que eu não gostaria que acontecesse, mas que cada vez que o modal fosse fechado ou finalizado, limpassem os seus dados, para novamente serem carregados após clicar no botão de edição.
      Partes do código que faço a validação do modal:
       
      var serialize_dados = $('#form_mod_pes_edit_red').serialize(); $.ajax({ type: "POST", url: "arquivo_validar.php", data: serialize_dados, dataType: 'json', encode: true, cache: false, }).done(function(retorno){ if (retorno.inserido == true) { $("#mensagem_edit_pes_red").html("Cadastro alterado com sucesso!"); //auto.trigger('click'); $('#form_mod_pes_edit_red').each (function(){ // Limpar campos do Form this.reset(); $('#mensagem_edit_pes_red').html(""); $('#form_mod_pes_edit_red')[0].reset(); }); setTimeout(function () { //$('#modal_edit_pessoa_red').on("hidden.bs.modal", function(){ $(this).removeData(); }); $('#mensagem_edit_pes_red').html(""); // Limpa mensagens $('#modal_edit_pessoa_red').modal('hide') //$('#form_mod_pes_edit_red').on('hidden.bs.modal', function () { //$('#modal_edit_pessoa_red').on('hidden.bs.modal', function(){ $(this).find('form')[0].reset(); }); }, 2000); // 2seg $('#obs_ped').val("Endereço: "+ retorno.dados.endereco+ " Telefone: "+ retorno.dados.telefone); } else{ if (retorno.erros){ $('#mensagem_edit_pes_red').html(""); for(var i=0;i<retorno.erros.length;i++) { $('#mensagem_edit_pes_red').append(retorno.erros[i] + "<br>"); } } else{ $("#mensagem_edit_pes_red").html("Não foi possível completar o cadastro. Tente novamente!"); } } }); Já tentei de várias maneiras, porém não consigo encontrar a solução.
      No botão fechar do modal também inseri vários códigos para tentar limpar o modal ao sair, porém não obtive sucesso.
      Se alguém tiver alguma dica, agradeço.
    • By Rengavitp
      Boa noite pessoal, estou aprendendo web e estou passando trabalho com uma janela modal. na versão desktop para que o modal apareça direito preciso colocar varios <br> antes do footer se não ele fica perdido no meio do modal, ja na versão mobile ele fica com um espação antes do footer devido aos <br> se eu tiro ele acerta o mobile mas da problema no desktop. alguém pode me ajudar? abaixo o modal
      <!-- Modal Cadastrar--> <div class="modal fade" id="novo_cadastro" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Novo Associado</h4> </div> <div class="modal-body"> <div class="col-md-2"> <label for="c_id">ID</label> <input type="text" class="form-control cadastro" id="c_id" placeholder="*" disabled=""> <br> </div> <div class="col-md-10"> <label for="c_empresa">Empresa</label> <input type="text" class="form-control cadastro" id="c_empresa" name="c_empresa" placeholder="Empresa" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-3"> <label for="c_cnpj">CNPJ</label> <input type="text" class="form-control cadastro" id="c_cnpj" name="c_cnpj" onkeypress="$(this).mask('00.000.000/0000-00');" placeholder="Ex.: 00.000.000/0001-00" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_ie">I.E</label> <input type="text" class="form-control cadastro" id="c_ie" name="c_ie" onkeypress="$(this).mask('0.000.000');" placeholder="Ex.: 000.000.000" autocomplete="off" required> <br> </div> <div class="col-md-3"> <label for="c_ass">Contato</label> <input type="text" class="form-control cadastro" id="c_nome" name="c_nome" placeholder="Nome" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_segmento">Segmento</label> <select id="c_segmento" name="c_segmento" class="form-control input-md cadastro"> <option value='1'>ALIMENTAÇÃO</option> <option value='0'>COMÉRCIO</option> </select> <br> </div> <div class="col-md-3"> <label for="c_telefone">Telefone</label> <input type="text" class="form-control cadastro" id="c_telefone" name="c_telefone" onkeypress="$(this).mask('(00) 0000-00009')" placeholder="(XX) XXXXX-XXXX" autocomplete="off" required> <br> </div> <div class="col-md-5"> <label for="c_email">E-mail</label> <input type="email" class="form-control cadastro" id="c_email" name="c_email" placeholder="XXX@XXX.com.XX" style="text-transform:lowercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_status">Status</label> <select id="c_status" name="c_status" class="form-control input-md cadastro"> <option value='1'>ATIVO</option> <option value='0'>INATIVO</option> </select> <br> </div> <div class="col-md-2"> </div> <div class="col-md-6"> <label for="c_endereco">Endereço</label> <input type="text" class="form-control cadastro" id="c_endereco" name="c_endereco" placeholder="Endereço" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_nro">Nro</label> <input type="number" class="form-control cadastro" id="c_nro" name="c_nro" placeholder="NRO" onkeypress="$(this).mask('00000')" required> <br> </div> <div class="col-md-4"> <label for="c_bairro">Bairro</label> <input type="text" class="form-control cadastro" id="c_bairro" name="c_bairro" placeholder="Bairro" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_complemento">Complemento</label> <input type="text" class="form-control cadastro" id="c_complemento" name="c_complemento" placeholder="Complemento" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_municipio">Município</label> <input type="text" class="form-control cadastro" id="c_municipio" name="c_municipio" placeholder="Município" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_cep">Cep</label> <input type="text" class="form-control cadastro" id="c_cep" name="c_cep" placeholder="CEP" onkeypress="$(this).mask('00000-000')" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_uf">UF</label> <select id="c_uf" name="c_uf" class="form-control input-md cadastro"> <option value="">Selecione</option> <option value="AC">Acre</option> <option value="AL">Alagoas</option> <option value="AP">Amapá</option> <option value="AM">Amazonas</option> <option value="BA">Bahia</option> <option value="CE">Ceará</option> <option value="DF">Distrito Federal</option> <option value="ES">Espirito Santo</option> <option value="GO">Goiás</option> <option value="MA">Maranhão</option> <option value="MS">Mato Grosso do Sul</option> <option value="MT">Mato Grosso</option> <option value="MG">Minas Gerais</option> <option value="PA">Pará</option> <option value="PB">Paraíba</option> <option value="PR">Paraná</option> <option value="PE">Pernambuco</option> <option value="PI">Piauí</option> <option value="RJ">Rio de Janeiro</option> <option value="RN">Rio Grande do Norte</option> <option value="RS">Rio Grande do Sul</option> <option value="RO">Rondônia</option> <option value="RR">Roraima</option> <option value="SC">Santa Catarina</option> <option value="SP">São Paulo</option> <option value="SE">Sergipe</option> <option value="TO">Tocantins</option> </select> <br> </div> <div class="col-md-12"> <label for="c_descricao">Descrição</label> <textarea class="form-control" id="c_descricao" name="descricao" rows="4" cols="130"></textarea> <br> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" id="cadastrar">Cadastrar</button><button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button> </div> </div> </div> </div>  
    • By JoaoV-26
      olá,
       
      Eu preciso fazer uma matriz 7x7 que imprima caractere 'x' e 'o' porém o x precisar ser nas duas diagonais, fazer a matriz e imprimir o x em uma diagonal eu consegui porém não estou conseguindo de jeito nenhum imprimir na outra diagonal, a matriz precisa sair assim: 
       
      x o o o o o x
      o x o o o x o
      o o x o x o o 
      o o o x o o o
      o o x o x o o
      o x o o o x o
      x o o o o o x
       
      a minha está saindo assim (foto em anexo)
       
      Meu código:

       
      #include<stdio.h> int main(){          int i, j;     char str[2]="x", str1[2]="o";                for(i=1; i<=7; i++){         for(j=1;j<=7; j++)              if(i+j == 7+1){                      printf("%s", str);                      }else                      printf("%s", str1);                      printf("\n");          }      } Alguém pode me ajudar, como faço para outra diagonal sair 'x' também ?????

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.