1

Tenho um link dentro de um array no qual eu faço um json_encode e envio para uma tabela em html, e dentro da tag eu tenho uma função dentro do onclick que deveria ser enviar uma requisição ajax e fazer o preventDefault() para não redirecionar a pagina, mas quando clico a ação não é executada e a pagina é redirecionada para o endereço no link.

Abaixo os código em PHP e javascript

Trecho do código em PHP com o array que é carregado os dados e tem o link

while($stm->fetch())
           {
               $retorno[] = array("id"=>$col_id,"cnpj"=>$col_cnpj,"razaoSocial"=>$col_razao_social,"nomeFantasia"=>$col_nome_fantasia,"cep"=>$col_cep,"cidade"=>$col_cidade,"celular"=>$col_celular,"telefone"=>$col_telefone,"telefoneDois"=>$col_telefone_dois,"bairro"=>$col_bairro,"rua"=>$col_rua,"numero"=>$col_numero,"observacao"=>$col_observacao,"estado"=>$col_estado,"botao"=>"<a  href='../controller/moduloFornecedoresController/FornecedoresController.php?p=excluirFornecedor&id=".$col_id."' class='btn btn-danger btn-bordered exclui_fornecedor' role='button' title='Excluir' onclick='ajaxGenericoNoData('.exclui_fornecedor')'><i class='far fa-trash-alt'></i>Excluir</a>");
           }

Função em javascript(que está dentro do onclick)

function ajaxGenericoNoData(classe){

$(classe).click(function(e){

    e.preventDefault();

    $.ajax({
        type:"POST",
        url:$(classe).attr("href"),
        success:function(mensagem)
        {
            console.log(mensagem);
        }
    });
});

}

1 Resposta 1

1

Mas você quer fazer esse AJAX via o eventListener que você cria no JavaScript, ou via a chamada da função que você faz no onclick?

Não precisa criar um eventListener se você já está chamando uma função no onclick, porém você precisa interromper o comportamento padrão da ancora, que é redirecionar para a nova página.

Como o atributo onclick não gera um evento, não tem como utilizar evento.preventDefault(), para esses casos, basta retornar false no próprio código da ancora, como no exemplo abaixo:

function ajaxGenericoNoData(classe) {
  console.log('A página não foi redirecionada');
  
  $.ajax({
    type: "POST",
    url: $(classe).attr("href"),
    success(mensagem) {
      console.log(mensagem);
    },
    error(err) {
      console.log('Porém essa requisição não é válida no SO');
    }
  });
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a
  href='../controller/moduloFornecedoresController/FornecedoresController.php?p=excluirFornecedor&id=".$col_id."' 
  class='btn btn-danger btn-bordered exclui_fornecedor' 
  role='button' 
  title='Excluir' 
  onclick='ajaxGenericoNoData(".exclui_fornecedor"); return false;'
>
  <i class='far fa-trash-alt'></i>
  Excluir
</a>;

1
  • Deu certo, muito obrigado. Era isso mesmo eu queria executar o ajax dentro do onclick.
    – J.Ricardo
    Commented 2/09/2019 às 1:53

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 .