Ir para conteúdo

POWERED BY:

Artes Ussler

Exclusão sem refresh

Recommended Posts

Olá

 

Utilizo um sistema de cadastro de notícias com campos para imagens. 

 

Na parte de edição das notícias, existe um checkbox que, ao selecionado, exclui a imagem quando clicado no Atualizar e a página é recarregada e o PHP executado.

 

IMAGEM1.jpg.73631cf3d20994b4a4b8cc06041f9f9e.jpg

 

Mas eu queria mudar isso. Gostaria que a imagem fosse excluída sem dar um refresh na página. Seria algo como na imagem abaixo: você clica no botão Excluir, aparece uma mensagem se deseja realmente excluir a imagem e você confirma sem recarregar a página.

 

IMAGEM2.jpg.9253215223b31d14ba7c61af417e3a71.jpg

 

Tem como fazer? Fico grato por qualquer dica.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Seria melhor se tivesse o HTML do formulário aí.

Pois existem duas formas simples para fazer isso, enviando uma requisição GET ou POST ambos poderiam ser enviadas por AJAX.

Não vou mostrar um exemplo por desconhecer a  estrutura html do formulário, pois teria que saber como chegar até essa imagem, ou mesmo pode haver mais de um formulário como esse na página.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá

 

Então, segue abaixo o trecho que cadastra ou exclui a imagem do servidor e do banco de dados:

//IMAGEM 1
	if ($_POST['exc1'] == null)
	{
		if ($_FILES['img1']['name'] != null)
	{
		$carregar1 = WideImage::loadFromUpload('img1');
        $imagem1 = $carregar1->resize(572, '1000', 'inside', 'down');
		$watermark1 = WideImage::load('../assets/files/informativos/marcadagua.gif');
		$imagemfinal1 = $imagem1->merge($watermark1, "right -25", "bottom -35", 80);
		$nomeimagem1 = time().'_'.rand(10,99).".jpg";
		$local1 = '../assets/files/informativos/'.$nomeimagem1;
		$imagemfinal1->saveToFile($local1, 70);
	} else {$nomeimagem1 = $img1;}
				} else {
		unlink('../assets/files/informativos/'.$img1);
		$nomeimagem1 = null;
		}

 

e abaixo o trecho em HTML:

<input name="img1" type="file" class="span6" id="img1"><br />
<img src="../assets/files/informativos/<?php echo $img1; ?>" width="80px" /> 
<input name="exc1" type="checkbox" id="exc1" value="1" style="margin-left:20px;" /> Selecione para excluir esta imagem.

basta marcar o checkbox, clicar Atualizar e a imagem é excluida. 

 

Mas gostaria de excluir ela sem precisa recarregar a página. 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Segue exemplo, abaixo:

 

INDEX.PHP:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<title> EXAMPLE </title>

		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</head>

	<body>
		Imagem 1:<input type="checkbox" class="exc1" name="exc1" value="imagem1.png" />
		<br />
		Imagem 5:<input type="checkbox" class="exc1" name="exc1" value="imagem5.png" />
		<br />
		<button class="deletar">Deletar</button>

		<script type="text/javascript">
		$(function()
		{
			$('.deletar').click (function()
			{
				var selected = new Array();

				// Coloca os valores em um array
				$('.exc1:checked').each(function(){
					selected.push($(this).val());
				});

				// Deleta via AJAX
				$.ajax({
					url: "http://localhost/deleta.php",
					type: "POST",
					data: {
						imagens: selected
					},
					success: function (msg){
						alert(msg);
					}
				});
			});
		});
		</script>
	</body>
</html>

DELETA.PHP

<?php

if(isset($_POST['imagens'])){
	$relatorio = "";

	foreach ($_POST['imagens'] as $img){
		$path = "caminho/arquivo/" . $img;

		if(@unlink($path)){
			$relatorio.= "O arquivo '{$img}' foi deletado!\n";
		}else{
			$relatorio.= "Falha ao deletar o arquivo '{$img}'!\n";
		}
	}

	echo $relatorio;
}else{
	echo "Selecione uma imagem!";
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 07/02/2020 at 15:13, Artes Ussler disse:

<input name="img1" type="file" class="span6" id="img1"><br />
<img src="../assets/files/informativos/<?php echo $img1; ?>" width="80px" /> 
<input name="exc1" type="checkbox" id="exc1" value="1" style="margin-left:20px;" /> Selecione para excluir esta imagem.

 

 

JS e CSS necessários:

https://github.com/Spell-Master/sm-web/tree/master/javascript/AjaxRequest

 

<input name="img1" type="file" class="span6" id="img1"><br />
<img src="../assets/files/informativos/<?= $img1; ?>" width="80px" /> 
<input name="exc1" type="checkbox" id="exc1" value="1" style="margin-left:20px;" /> Selecione para excluir esta imagem.

<div id="executa_ajax"></div>

<script>
    document.getElementById('exc1').addEventListener('change', apagaImagem, false);

    function apagaImagem(e) {
        var alvo = e.target;
        var imagem = alvo.previousElementSibling; // Obtenho a imagem
        if (alvo.checked) { // O checkbox deve está marcado
            apagaImagem.prototype = new AjaxRequest();
            apagaImagem.prototype.open('executa_ajax', 'arquivo_que_apaga.php?alvo=' + imagem.src + '&id=' + imagem.id);
        }
    }
</script>

Com isso ao marcar o checkbox iniciamos a classe AjaxRequest que irá carregar o arquivo responsável por apagar a imagem enviando um $_GET['alvo'] com exatamente o src da imagem, com essa informação então é só apagar a imagem. Ainda nesse arquivo enviamos também o #ID da imagem então ao excluir a imagem podermos usar o seguinte script:

document.getElementById('<?= $_GET['id'] ?>').src = null;

Assim sendo ao apagar a imagem removemos também ela do html.

 

Demais exemplos de uso no AjaxRequest você encontra no arquivo exemplo.html no link citado acima.

Caso interesse também criei alguns scripts dito próprio para uploads:

https://github.com/Spell-Master/sm-web/tree/master/javascript/FileTransfer

https://github.com/Spell-Master/sm-web/tree/master/exemplos/corte-e-salvamento-de-imagens

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Humildemente peço desculpa por postar uma dúvida que tenho.

      Preciso salvar no MySql, os seguinte Registro:

      1 - Principal
      ====> minha dúvida começa aqui
      ==========> como faço para o Sistema Contar Automaticamente o que estiver despois do 1.____?
      1.01 - Matriz
      1.01.0001 - Estoque
      1.01.0002 - Oficina
      etc

      2 - Secundário
      2.01 - Loja_1
      2.01.0001 - Caixa
      2.01.0002 - Recepção
      etc
       
      Resumindo seria como se fosse um Cadastro de PLANO de CONTAS CONTÁBEIL.

      Grato,


      Cesar









       
    • Por violin101
      Caros amigos, saudações.

      Por favor, me perdoa em recorrer a orientação dos amigos.

      Preciso fazer um Relatório onde o usuário pode Gerar uma Lista com prazo para vencimento de: 15 / 20/ 30 dias da data atual.

      Tem como montar uma SQL para o sistema fazer uma busca no MySql por período ou dias próximo ao vencimento ?

      Tentei fazer assim, mas o SQL me traz tudo:
      $query = "SELECT faturamento.*, DATE_ADD(faturamento.dataVencimento, INTERVAL 30 DAY), fornecedor.* FROM faturamento INNER JOIN fornecedor ON fornecedor.idfornecedor = faturamento.id_fornecedor WHERE faturamento.statusFatur = 1 ORDER BY faturamento.idFaturamento $ordenar ";  
      Grato,
       
      Cesar
       
       
       
       
    • Por violin101
      Caros amigos, saudações
       
      Por favor, me perdoa em recorrer a orientação dos amigos, tenho uma dúvida.
       
      Gostaria de uma rotina onde o Sistema possa acusar para o usuário antes dos 30 dias, grifar na Tabela o aviso de vencimento próximo, por exemplo:
       
      Data Atual: 15/11/2024
                                           Vencimento
      Fornecedor.....................Data.....................Valor
      Fornecedor_1...........01/12/2024..........R$ 120,00 <== grifar a linha de Laranja
      Fornecedor_1...........01/01/2025..........R$ 130,00
      Fornecedor_2...........15/12/2024..........R$ 200,00 <== grifar a linha de Amarelo
      Fornecedor_2...........15/01/2025..........R$ 230,00
      Fornecedor_3...........20/12/2024..........R$ 150,00
       
      Alguém tem alguma dica ou leitura sobre este assunto ?

      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.

      Por favor, me perdoa em recorrer a ajuda dos amigos, mas preciso entender uma processo que não estou conseguindo sucesso.

      Como mencionado no Título estou escrevendo um Sistema Web para Gerenciamento de Empresa.
       
      Minha dúvida, que preciso muito entender:
      - preciso agora escrever a Rotina para Emissão de NFe e essa parte não estou conseguindo.
       
      tenho assistido alguns vídeos e leituras, mas não estou conseguindo sucesso, já fiz toda as importações das LIB da NFePhp conforme orientação.

      Preciso de ajuda.

      Algum dos amigos tem conhecimento de algum passo-a-passo explicando a criação dessa rotina ?

      tenho visto alguns vídeos com LARAVEL, mas quando tento utilizar e converter para PHP+Codeiginter, dá uma fila de erros que não entendo, mesmo informando as lib necessárias.

      Alguns do amigo tem algum vídeo, leitura explicando essa parte ?

      Grato,

      Cesar.
×

Informação importante

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