0

Tenho um ajax jquery que vai receber o click de um href com uma figura dentro.

Queria fazer com que, apenas durante a execução do ajax a imagem de fundo da li, e não da href fosse trocada e ao termino da operação retornasse ao normal.

Ou seja, o href recebe click,. Mas uma li com uma imagem dentro não é clicável normalmente

Estou fazendo assim:

// JavaScript Document
$(document).ready(function(e) {

  $("a.excluiPlano").click(function() {

      if (confirm('Deseja Excluir este Plano?\nAtenção: Excluindo esse plano, todas as fotos serão excluidas!\nDeseja prosseguir?') ) {

        $.ajax({
            url: "../_requeridos/excluiPlano.php",
            type: 'POST',
            data: {'planoid': $(this).attr('planoid')},
            beforeSend: function() {               
              $("a.excluiPlano").html("<img src='../_img/_bannerImgs/spinner.gif' />")
              return false;
            },
            success: function (retorno) {

                if (retorno == 1) {

                    alert('Excluido com sucesso');
                    location.reload();

                } else {

                    alert("Erro na exclusão");

                }

            },
            cache: false,
            /* REMOVIDAS PARA QUE O AJAX ENVIE VARIÁVEIS FORA DO FORM/
            contentType: false,
            processData: false
            */
        });

        return false;

      }

  })


});

Como fazer isso?

HTML + PHP

<?php 
      $planos = $planosDao->pesquisaPlanos();

      $planosConta = $planos == NULL ? 0 : count($planos);  
?>

<div class="lista">

 <h1 class="titulos">Listagem de Planos</h1>

 <?php 
   if ($planosConta==0) {

       echo $phpUtil->erro ("Sem retornos para esta pesquisa"); 

    } else { 

      $registros = 15; 
      $pagina = (isset($_GET['pagina']))? $_GET['pagina'] : 1; 
      $numPaginas = ceil($planosConta/$registros); 
      $inicio = ($registros * $pagina) - $registros; 

      $where = " LIMIT ".$inicio.",".$registros;
      $planos = $planosDao->pesquisaPlanos($where); 
?>

 <ul class="listaTopo">
     <li style="width:20%">NOME</li>
     <li style="width:55%">DESCRIÇÃO</li>
     <li style="width:10%">EDITAR</li>
     <li style="width:10%">EXCLUIR?</li>
 </ul>
 <?php 

   $contaLinhas = 0;
   $numreg = 25; // Quantos registros por página vai ser mostrado    
   $pagina = isset($_GET["pagina"]) ? $_GET["pagina"] : 1;
   $inicial = ($pagina * $numreg) - $numreg;   

   foreach ($planos as $plano) : 

     $corLinha = $contaLinhas % 2 == 0 ? "rgb(204,204,204)" : "rgb(255,255,255)";

     $linkEditar = "<a href='?editar&idPlano=".$plano->getIdPlano()."'><img src='_img/editar.png' /></a>";

    $linkExcluir = "<a class='excluiPlano' planoid=".$plano->getIdPlano()."><img src='_img/excluir.png' /></a>";

  ?>  
     <ul class="listaRegistros" style="background-color:<?php echo $corLinha; ?>">
         <li style="width:20%; text-align:left;"><?php echo $plano->getNome(); ?></li>
         <li style="width:55%; text-align:left;"><?php echo substr($plano->getDescricao(),0,30)." ..."; ?></li>
         <li style="width:10%; text-align:center;"><?php echo $linkEditar; ?></li>
         <li style="width:10%; text-align:center;" class="excluirRegistro"><?php echo $linkExcluir; ?></li>
     </ul>

 <?php 
   $contaLinhas++;
   endforeach;      

    //exibe a paginação 
    for($i = 1; $i < $numPaginas + 1; $i++) { 
        echo "<a class='contador' href='?listar&pagina=$i'>".$i."</a>"; 
    } 
  } 
?>
</div>
<br />

Um exemplo mais simples do que eu quero seria o seguinte:

$(document).ready(function(){
    $('a').click(function(){
        var i = $('a').index(this);
        alert(i);
    });
});
<script type="text/javascript"   src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>

Com esse código eu tenho retornado apenas o elemento a que recebeu o click.

Agora como fazer para ter o html() dele?

3
  • O que você chama de href é um elemento <a>? Você quer que ao clicar num <a> que está dentro de um <li>, uma requesição ajax seja feita e durante esse processo (até receber a resposta do servidor) uma imagem seja mostrada num <li>? 2/06/2018 às 15:09
  • Use o beforeSend do ajax para mudar pro que quer e o done para voltar ao normal
    – Costamilam
    2/06/2018 às 15:11
  • Vocês viram o código postado? No elemento <code>a</code> tem uma imagem que representa exclusão. O que eu quero é que, durante o processo do ajax, essa imagem mude para uma imagem de loader e após a exclusão/bloqueio (vou fazer nos 2), volte ao normal! Isto é, a imagem de bloqueio. Pois a de exclusão não será mais possível pois o registro já não mais existirá! E sim, usei o beforeSend. Mas mesmo assim todas as imagens mudaram juntas 2/06/2018 às 15:26

1 Resposta 1

0

Pelo que entendi, o problema está em trocar a imagem de fundo de um li durante a o processo de requisição AJAX que é executado quando um elemento descendente <a> receber um click.

Para isso, você pode usar a função css do jQuery e as propriedades beforeSend e complete da função ajax do jQuery - se quiser, veja as documentações aqui para css e aqui para as duas propriedades.

$("a.list__link:not(.list__link--not-clickable)").on("click", function(event) {
   event.preventDefault(); // Impede que o browser execute "normalmente" o evento click de uma âncora
   
   //var $elem = $(this).closest("li.list__item"); Pega o `li` ascendente
   var $elem = $(this); // ancora que foi clicado
   var url = $(this).attr("href");
	 var imgUrl = $(this).attr("data-img-url")
	ajaxCall(url, $elem, imgUrl);
});

function ajaxCall(url, $elem, imgUrl) {

   $.ajax({
	 	 url: url,
		 type: 'post',
		 beforeSend: function () {
				$elem.css({"background-image":"url("+imgUrl+")"})
		 },
		 complete: function () {
				$elem.css({ "background-image" : "none" });
		 }
	 });
}

$("a.list__link.list__link--not-clickable").on("click", function (event) {
   event.preventDefault();
   alert("I'm not clickable."); // apagar isto.
});
a.list__link {
  display: block;
  width: 70%;
  height: 70%;
	text-decoration: none;
  background-color: #aaa;
	background-size: 100% 100%;
}
a.list__link.list__link--not-clickable {
 cursor: default;
}

ul.list {
	list-style-type: none;
}

li.list__item {
	height: 15vh;
	width: 80%;
	border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
     <li class="list__item"><a class="list__link" href="item1.html" data-img-url="https://s19.postimg.cc/4khrr69kz/img_1.png">Click me - Item 1</a></li>
     <li class="list__item"><a class="list__link list__link--not-clickable" href="item2.html" data-img-url="https://s19.postimg.cc/jggays0f7/img_2.png">Click me - Item 2</a></li>
     <li class="list__item"><a class="list__link" href="item3.html" data-img-url="https://s19.postimg.cc/kvhvnhtsj/img_3.png">Click me - Item 3</a></li>
     <li class="list__item"><a class="list__link list__link--not-clickable" href="item4.html" data-img-url="">Click me - Item 4</a></li>
 </ul>

11
  • Ainda não é isto. A imagem troca. mas troca de todos a pois todos estão com o mesmo .class. Dificil está sendo pegar o valor do id dele 2/06/2018 às 17:27
  • Esse feito deveria ocorrer apenas para alguns a? 2/06/2018 às 17:31
  • apenas para o a que foi clicado embora todos tenham a a mesma class. Dá uma reolhada no html fazendo favor 2/06/2018 às 17:40
  • O imagem deveria ser mostrada no a e não no li? 2/06/2018 às 17:42
  • isso, preciso saber então qual desse 'a' foi o clicado 2/06/2018 às 17:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .