Ir para conteúdo

Arquivado

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

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?

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pow tem uma lupa gigante.

 

http://materializecss.com/

 

Link direto:

http://materializecss.com/modals.html

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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/

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por unset
      Olá, estou enfrentando um problema e ainda não consegui pensar em uma solução, como resolver o problema, eu estou mudando meu sistema para utilizar janelas modal do bootstrap 5, cadastro e edição e funciona bem, porém ao adicionar um editor de texto wysiwyg tipo ckeditor 4, tinymce, summernot, e outros nenhum deles abre o conteudo no textarea, não estou conseguindo entender o motivo, se eu retiro a chamada dos editores os dados são exibidos corretamente, se eu deixo os dados não são carregados, mais os editores abrem normal.
       
      alguem já passou por isso, tem alguma luz? obrigado desde já por qualquer ajuda.


    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por 4Unknow
      Bom dia comunidade Imasters.

      Venho aqui tratar de um problema dúvida que estou tendo com um layout que estou tentando usar o formulário php dele.
      Quando clico em enviar ele me enviar para um arquivo .php  (assets/vendor/simple-forms/sendmail.php)

      Ele não envia o e-mail, acredito que deveria aparecer uma mensagem que o contato foi enviado corretamente.
      Vou deixar os arquivos aqui em anexo quem puder me ajudar nessa, ficaria muito grato.
       
      Link Website (wetransfer.com)
    • Por babylon
      Ola amigos,
       
      Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento":
       
      https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g
       
      Segue imagem em anexo.
       
      Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal?
       
      Obrigado a todos.
       
       

    • Por Sapinn
      Estou precisando colocar em um site um propriedade que toda vez que clicar em uma imagem apareça uma janela modal com um slide show em que você pode passar as imagens. Por exemplo se tiver a foto de um celular quando eu clicar nela aparecera um slide show, onde você pode ir passando e vendo outras imagens do celular. Eu já tentei fazer mais sempre dá erro quando eu coloco várias imagens e tento chamar uma por uma. Não sei se eu preciso chamar cada slide ou se existe uma forma simples de se fazer isso. Vou postar aqui um código que eu fiz:
       
      CSS:
      * {   box-sizing:border-box;   font-family: Arial; } .slideshow-container {   max-width: 800px;     position: relative;   margin: auto; } .mySlides {   display: none; } .prev, .next {   cursor: pointer;   position: absolute;   top: 50%;   width: auto;   margin-top: -22px;   padding: 16px;   color: #4285f4;   font-weight: bold;   font-size: 28px;   transition: 0.6s ease;   border-radius: 0 3px 3px 0;   user-select: none; } .next {   right: 0;   border-radius: 3px 0 0 3px; } .prev:hover, .next:hover {   background-color: rgba(0,0,0,0.8); } .dot {   cursor: pointer;   height: 15px;   width: 15px;   margin: 10px 2px;   background-color: #bbb;   border-radius: 50%;   display: inline-block;   transition: background-color 0.6s ease; } .active, .dot:hover {   background-color: #4285f4; } .fade {   -webkit-animation-name: fade;   -webkit-animation-duration: 1.5s;   animation-name: fade;   animation-duration: 1.5s; } .img_slide{     width: 100%;     height: 500px; } /* ----------------MODAL--------------------------------- */ .modal-container{     width: 100vw;     height: 100vh;     background: rgba(0, 0, 0, .8);     position: fixed;     top: 0px;     left: 0px;     z-index: 2000;     display: none;     justify-content: center;     align-items: center;     font-family: Arial, Helvetica, sans-serif; } .modal-container.mostrar{     display: flex; } @keyframes modal{     from{         opacity: 0;         transform: translate3d(0, -60px, 0);     }     to{         opacity: 1;         transform: translate3d(0, 0, 0);     } } .mostrar .modal-content{     animation: modal .3s; } .fechar{     position: absolute;     top: 8px;     right: 3px;     width: 30px;     height: 30px;     font-weight: bold;     color: #4285f4;     font-size: 25px;     font-family: Arial, Helvetica, sans-serif;     cursor: pointer;     background: transparent;     border: none; } @media (max-width: 600px) {     .img_slide{         width: 100%;         height: 300px; } }  
       
      JAVASCRIPT:
      var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) {   showSlides(slideIndex += n); } function currentSlide(n) {   showSlides(slideIndex = n); } function showSlides(n) {   var i;   var slides = document.getElementsByClassName("mySlides");   var dots = document.getElementsByClassName("dot");   if (n > slides.length) {slideIndex = 1}    if (n < 1) {slideIndex = slides.length}   for (i = 0; i < slides.length; i++) {       slides[i].style.display = "none";    }   for (i = 0; i < dots.length; i++) {       dots[i].className = dots[i].className.replace(" active", "");   }   slides[slideIndex-1].style.display = "block";    dots[slideIndex-1].className += " active"; } function iniciaModal(modalID){     const modal = document.getElementById(modalID);     if(modal){         modal.classList.add('mostrar');          modal.addEventListener('click',(e)=>{         if(e.target.id == modalID || e.target.className == 'fechar'){             modal.classList.remove('mostrar');         }     });     }      } const botaoChama = document.querySelector('#botaoChama');  botaoChama.addEventListener('click',()=>{     iniciaModal('modal');      }); const botaoChama2 = document.querySelector('#botaoChama2');  botaoChama2.addEventListener('click',()=>{     iniciaModal('modal2'); });  
       
      HTML:
      <div id="modal" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src = "https://wallpapercave.com/wp/wp3473585.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src = "https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg" class="img_slide">            </div>        <div class="mySlides fade">             <img src =" https://wallpapercave.com/wp/wp2043649.png " class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <div style="text-align:center">         <span class="dot" onclick="currentSlide(1)"></span>          <span class="dot" onclick="currentSlide(2)"></span>          <span class="dot" onclick="currentSlide(3)"></span>        </div>   </div>    </div>  <div id="modal2" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src="https://wallpapercave.com/wp/wp9688141.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp8480719.jpg"  class="img_slide">            </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp9683280.jpg"  class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <div style="text-align:center">         <span class="dot" onclick="currentSlide(4)"></span>          <span class="dot" onclick="currentSlide(5)"></span>          <span class="dot" onclick="currentSlide(6)"></span>        </div>   </div>    </div> <button id="botaoChama">Modal</button> <button id="botaoChama2">Modal 2</button>
×

Informação importante

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