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?