Problema com jQuery Ajax

Front-end
#1

Olá.
Estou desenvolvendo um sistema com Spring Boot, Thymeleaf, Bootstrap e jQuery…
As dependências do Bootstrap e jQuery estão da seguinte forma:

		<dependency>
    		<groupId>org.webjars</groupId>
    		<artifactId>bootstrap</artifactId>
    		<version>4.3.1</version>
		</dependency>
		
		<dependency>
    		<groupId>org.webjars</groupId>
    		<artifactId>jquery</artifactId>
    		<version>3.4.1</version>
		</dependency>

Estou usando o layout do Thymeleaf para definir meus templates e minha página principal ficou assim:

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" 
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/Layout"
	  lang="en">
<head>
	<title>C.S.R. Cobrança Administrativa</title>

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
    <link type="text/css" rel="stylesheet" href="webjars/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="fontawesome/css/all.css" />
</head>
<body>
	<div th:replace="fragments/header"></div>

	<div style="padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px;">
		<div layout:fragment="content"></div>
	</div>
	
	<div th:replace="fragments/footer"></div>

	<script type="text/javascript" src="webjars/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/principal.js"></script>
</body>
</html>

No arquivo “principal.js” tem uma função que faz alguns cálculos. Nessa função, existe um método ajax que não está sendo executado. Depurei o código através do Firebug e quando chega no trecho de código ajax, o processo de execução pula o código ajax e não o executa!

$('.selecionaBoleto #btnCalcularValor').on('click', function(event){
		event.preventDefault();
		
		var dataPagamentoAux = $('.selecionaBoleto #dataPagamentoCR').val().split("-");
		var formaDeCalculoAux = $('.selecionaBoleto #formaDeCalculoUtilizada').prop('selectedIndex');
    	
		$('.selecionaBoleto #faltaValorBoleto').hide();
		$('.selecionaBoleto #valorBoletoInvalido').hide();
		$('.selecionaBoleto #dataInvalida').hide();
		$('.selecionaBoleto #dataInvalidaExercicioMaior').hide();
		if(dataPagamentoAux == ''){
			$('.selecionaBoleto #faltaDataPagamento').show();
    	}else{
    		$('.selecionaBoleto #faltaDataPagamento').hide();
    	}
		if(formaDeCalculoAux == 0){
    		$('.selecionaBoleto #faltaFormaCalculo').show();
    	}else{
    		$('.selecionaBoleto #faltaFormaCalculo').hide();
    	}
    	
    	if(dataPagamentoAux !== '' && formaDeCalculoAux !== 0){
    		var href = $(this).attr('href');
    		var idBoletoVar = $('.selecionaBoleto #id').val();
    		var dataPagamentoVar = new Date(dataPagamentoAux[0], dataPagamentoAux[1]-1, dataPagamentoAux[2]);
    		var formaDeCalculoVar = formaDeCalculoAux;
    		
    		$.ajax({
    			method: "POST",
    			url: href,
    			data: {idBoleto: idBoletoVar, dataPagamento: dataPagamentoVar, formaDeCalculo: formaDeCalculoVar}
    		}).always(function(boletoCobranca){
    			$('.selecionaBoleto #valorPagamentoCR').val(boletoCobranca.valorPagamentoCR);
    		});    		
    	}else{
    		return;
    	}
	});

Alguém sabe o que pode estar acontecendo?
Obrigado.

#2

Todo o resto esta funcionando? pq eu tenho um projeto com essas tecnologias ai, mas eu nao coloco o bootstrap e o jquery no pom.xml eles ficam declarados no html. e os arquivos eu coloco dentro resourcers/static

e a sintaxe do ajax que eu faco é diferente tambem

$.ajax({
	url: '/faca_alguma_coisa',
	method: 'POST',
	contentType: 'application/json',
	data: JSON.stringify({ nome: 'bla bla bla' }),
	error: onErroSalvandoEstilo.bind(this),
	success: onEstiloSalvo.bind(this)
});

function onErroSalvandoEstilo(resposta) {
}

function onEstiloSalvo(resposta) {
}
#3

O resto está funcionando sim, somente a função ajax que não esta sendo executada. Parou de funcionar depois que eu implementei o Spring Security no projeto…
Coloquei o bootstrap e jquery no pom como alternativa pra ver se soluciona o problema, mas já usei declarados no html também…

Alterei o código e declarei o bootstrap e jquery no html e a função ajax continua sem ser executada…

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/Layout"
	  lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
	    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	    <link rel="stylesheet" href="fontawesome/css/all.css">
		
		<title>C.S.R. Cobrança Administrativa</title>
	</head>
	<body>
		<div th:replace="fragments/header"></div>
	
		<div style="padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px;">
			<div layout:fragment="content"></div>
		</div>
		
		<div style="position: relative; bottom: 0; width: 100%;">
			<div th:replace="fragments/footer"></div>
		</div>

		<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/principal.js"></script>
	</body>
</html>
#4

Alterei também o método ajax com a sintaxe que você usa e nada de se executada também…

$('.selecionaBoleto #btnCalcularValor').on('click', function(event){
		event.preventDefault();
		
		var dataPagamentoAux = $('.selecionaBoleto #dataPagamentoCR').val().split("-");
		var formaDeCalculoAux = $('.selecionaBoleto #formaDeCalculoUtilizada').prop('selectedIndex');
    	
		$('.selecionaBoleto #faltaValorBoleto').hide();
		$('.selecionaBoleto #valorBoletoInvalido').hide();
		$('.selecionaBoleto #dataInvalida').hide();
		$('.selecionaBoleto #dataInvalidaExercicioMaior').hide();
		if(dataPagamentoAux == ''){
			$('.selecionaBoleto #faltaDataPagamento').show();
    	}else{
    		$('.selecionaBoleto #faltaDataPagamento').hide();
    	}
		if(formaDeCalculoAux == 0){
    		$('.selecionaBoleto #faltaFormaCalculo').show();
    	}else{
    		$('.selecionaBoleto #faltaFormaCalculo').hide();
    	}
    	
    	if(dataPagamentoAux !== '' && formaDeCalculoAux !== 0){
    		var href = $(this).attr('href');
    		var idBoletoVar = $('.selecionaBoleto #id').val();
    		var dataPagamentoVar = new Date(dataPagamentoAux[0], dataPagamentoAux[1]-1, dataPagamentoAux[2]);
    		var formaDeCalculoVar = formaDeCalculoAux;
    		
    		$.ajax({
    			method: "POST",
    			url: href,
    			data: {idBoleto: idBoletoVar, dataPagamento: dataPagamentoVar, formaDeCalculo: formaDeCalculoVar},
    			success: function(boletoCobranca) {
    				$('.selecionaBoleto #valorPagamentoCR').val(boletoCobranca.valorPagamentoCR);    
                }
    		});    		
    	}else{
    		return;
    	}
	});
#5

ahhh voce tem que fazer um esquema para usar o ajax quando habilita o spring security.
Quando voce usa spring security ele gera um token e devolve na requisicao. entao toda chamada ajax esse token tem que ir. Usando thymeleaf, voce pode colocar na pagina do seu template esse codigo:

<input type="hidden" name="_csrf" th:value="${_csrf.token}"/>
<input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>

ai voce tem que ter um java script que toda requisicao ajax que voce faca ele capture antes de enviar e adicione esse token. voce pode colcocar tambem na pagina do templente

this.token = $('input[name=_csrf]').val();
this.header = $('input[name=_csrf_header]').val();

$(document).ajaxSend(function(event, jqxhr, settings) {
	jqxhr.setRequestHeader(this.header, this.token);
});
#7

Valeu meu amigo!! Funcionou!!!

Coloquei os inputs na minha template:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/Layout"
	  lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
	    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	    <link rel="stylesheet" href="fontawesome/css/all.css">
		
		<title>C.S.R. Cobrança Administrativa</title>
	</head>
	<body>
		
		<input type="hidden" name="_csrf" th:value="${_csrf.token}"/>
		<input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
	
		<div th:replace="fragments/header"></div>
	
		<div style="padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px;">
			<div layout:fragment="content"></div>
		</div>
		
		<div style="position: relative; bottom: 0; width: 100%;">
			<div th:replace="fragments/footer"></div>
		</div>

		<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/principal.js"></script>
	</body>
</html>

E o ajax eu defini desta forma:

    $.ajax({
        			method: "POST",
        			url: href,
        			headers: {"X-CSRF-TOKEN": $("input[name='_csrf']").val()},
        			data: {idBoleto: idBoletoVar, dataPagamento: dataPagamentoVar, formaDeCalculo: formaDeCalculoVar}
        		}).always(function(boletoCobranca){
        			$('.selecionaBoleto #valorPagamentoCR').val(boletoCobranca.valorPagamentoCR);
        		});
1 curtida