change html da li

0

I have a ajax jquery that will get the click of a href with a figure inside.

I wanted to make a li background image ajax and not href was changed and at the end of the operation it returned to normal.

That is, href receives click . But a li with a image inside is not clicável usually

I'm doing this:

// 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;

      }

  })


});

How to do this?

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 />

A simpler example of what I want would be the following:

$(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><ahref="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>

With this code I have returned only the element to which you clicked.

Now how do you get html() of it?

    
asked by anonymous 02.06.2018 / 16:34

1 answer

0

As far as I understand, the problem is to change the background image of a li during the the AJAX request process that is executed when a <a> descending element receives a click.

For this, you can use the css function of jQuery and the beforeSend and complete properties of the ajax function of jQuery - if you want, see the documentation here for css and here for both properties .

$("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><ulclass="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>
    
02.06.2018 / 18:02