I'm making a small web/application to exercise what I'm learning from Spring boot and ajax.
I have a web page where I have a form that have two date inputs 'start date' and 'end date' I wanted to send the user input to a RestController
and to get a response that I should show in a empty div
Here is what I have done till now:
My Form:
<div class="w3-container w3-padding-64" id="reserver_salle">
<h1>Resrvation de salle</h1><br>
<form id="reserver_salle_form" >
<p><input class="w3-input w3-padding-16" id="dateDebut" type="date" required placeholder="Date début"></p>
<p><input class="w3-input w3-padding-16" id="dateFin" type="date" required placeholder="Date fin"></p>
<p><button id="searchSalle" type="submit" class="w3-button w3-light-grey w3-section" >[[#{homePage.envoyer}]]</button></p>
</form>
</div>
<div id="salleList" class="w3-container">
</div>
<script type="text/javascript" th:src="@{~/cdnjs.cloudflare.com_ajax_libs_jquery_2.1.3_jquery.min.js}">
</script>
<script type="text/javascript" th:src="@{~/js/start_page.js}"></script>
Now I will show you my ajax script
$(document).ready(function () {
//alert("is loading");
$("#searchSalle").submit(function (event) {
//stop submit the form, we will post it manually.
event.preventDefault();
fire_serach_salle();
});
$("#send_mail").submit(function (event) {
//stop submit the form, we will post it manually.
event.preventDefault();
fire_send_mail();
});
});
function fire_serach_salle(){
var searchReserv = {};
searchReserv["dateDebutAnnee"] = $("#dateDebut").val().split('-')[0];
searchReserv["dateDebutMois"] = $("#dateDebut").val().split('-')[1];
searchReserv["dateDebutJour"] = $("#dateDebut").val().split('-')[2];
searchReserv["dateFinAnnee"] = $("#dateFin").val().split('-')[0];
searchReserv["dateFinMois"] = $("#dateFin").val().split('-')[1];
searchReserv["dateFinJour"] = $("#dateFin").val().split('-')[2];
$("#searchSalle").prop("disabled",true);
console.log(searchReserv);
$.ajax({
type: "POST",
contentType: "application/json",
url: "/homePage/reservation/search",
data: JSON.stringify(searchReserv),
dataType: 'json',
cache: false,
timeout: 900000,
success: function (result) {
if (result.answer === "DONE") {
/*<![CDATA[*/
var html ='<h2>Liste des salles </h2>';
html+='<ul class="w3-ul w3-hoverable">';
for(var i = 0 ;i<result.data.length;i++){
html += ' <li class="w3-display-container ">'+result.data[i].titre+'-'+result.data[i].id+'<span onclick="reserve('+result.data[i].id+')" class="w3-button w3-transparent w3-display-right w3-hover-green">reserver</span></li>';
}
html+='</ul>';
/*]]>*/
$("#salleList").html(html);
$("#searchSalle").prop("disabled",false);
}
}
});
}
Now I will show my controller:
@RestController
@PropertySource(ignoreResourceNotFound = true, value = "classpath:messages.properties")
public class HomePageController {
@RequestMapping(value = "/homePage/reservation/search", method = RequestMethod.POST)
public @ResponseBody
AjaxResponse doSearch(@RequestBody SearchReserv searchReserv, Model model) {
try {
System.out.println(searchReserv);
ArrayList<ReservationSearchResponse> response = new ArrayList<>();
response.add(new ReservationSearchResponse(Long.valueOf(0), "hello 0"));
response.add(new ReservationSearchResponse(Long.valueOf(1), "hello 1"));
return new AjaxResponse("DONE", response);
} catch (Exception e) {
e.printStackTrace();
return new AjaxResponse("BAD", null);
}
}
Finally my two classes AjaxResponse and SearcheReserv
public class AjaxResponse {
private String answer;
private Object data;
//geters setters and contructors
}
import org.springframework.stereotype.Component;
/**
*
* @author taleb
*/
@Component
public class SearchReserv {
private int dateDebutAnnee;
private int dateDebutMois;
private int dateDebutJour;
private int dateFinAnnee;
private int dateFinMois;
private int dateFinJour;
//geters setters and contructors
}
What I can't understand that I'm using this way to implement a send mail using spring mail and it working fine.
but in this one I'm still getting:
There was an unexpected error (type=Method Not Allowed, status=405). Request method 'GET' not supported
There is no GET in my code.
I'm using latest Spring Boot 2.0.0.M7
I have no configuration handmade on the Apache server
After hours of hard the issue was stupid, When attaching Ajax request we do it to the form Id not the Button
I fixed this by updating my ajax script from
$("#searchSalle").submit(function (event)
to
$("#reserver_salle_form").submit(function (event)
and it is working like a charm