У меня есть таблица html с заполненными автомобилями.Когда я нажимаю информацию, открывается модальное окно с информацией об автомобиле.Отсюда я хочу удалить, создать или обновить автомобиль.УДАЛИТЬ метод работает.Обновлять и создавать не надо.Я исчерпал вещи, чтобы измениться.Я всегда получаю 400 ошибочных запросов.PUT, POST работают в приложении POSTMAN.Поэтому я предполагаю, что это как-то связано с моим js.
HTML-модал:
<!-- modal -->
<div class="modal fade" id="carModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i>More Details</i></h4>
</div>
<div class="modal-body" id="contents">
<label for="pictureCar">Picture:</label>
<input type="text" id="pictureCar" ><br>
<label for="make">Make:</label>
<input type="text" id="make" ><br>
<label for="model">Model:</label>
<input type="text" id="model" ><br>
<label for="year">Year:</label>
<input type="text" id="year" ><br>
<label for="colour">Colour:</label>
<input type="text" id="colour" ><br>
<label for="reg">Reg:</label>
<input type="text" id="reg" ><br>
<label for="mileage">Mileage:</label>
<input type="text" id="mileage" ><br>
<label for="type">Type:</label>
<input type="text" id="type" ><br>
<label for="price">Price:</label>
<input type="text" id="price" ><br>
<label for="engineSize">EngineSize:</label>
<input type="text" id="engineSize" ><br>
<input type="hidden" id="carId" ><br>
</div>
<div class="modal-footer">
<button type="button" id="modalUpdate" class="btn btn-success" data-dismiss="modal">Update</button>
<button type="button" id="modalNew" class="btn btn-success" data-dismiss="modal">New</button>
<button type="button" id="modalDelete" class="btn btn-danger" data-dismiss="modal">Delete</button>
<button type="button" id="modalClose" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end of modal -->
Javascript:
$(document).on("click", "#carModal #modalUpdate", function() {
updateCar();
})
$(document).on("click", "#carModal #modalNew", function() {
createCar();
})
var updateCar = function(){
$.ajax({
type : 'PUT',
contentType: 'application/json',
url : rootUrl+"/cars/"+$("#carId").val(),
dataType : "json",
data: carModalToJSON(),
success : function(data,textStatus,jqXHR){
findAllCars();
alert('updated car');
},
error: function(jqXHR,textStatus,errorThrown){
alert('didnt update'+textStatus);
}
});
}
var carModalToJSON=function(){
console.log("toJSON");
var id =$("#carModal #carId").val();
var make = $("#carModal #make").val();
var model= $("#carModal #model").val();
var year = $("#carModal #year").val();
var colour = $("#carModal #colour").val();
var reg= $("#carModal #reg").val();
var mil =$("#carModal #mileage").val();
var type =$("#carModal #type").val();
var price =$("#carModal #price").val();
var pic =$("#carModal #pictureCar").val();
var eng =$("#carModal #engineSize").val();
console.log("values informjson"+" "+id+" "+
make+" "+model+" "+year+" "+colour+" "+
reg+" "+mil+" "+type+" "+price+" "+pic+" "+eng);
return JSON.stringify({
"id":$("#carModal #carId").val(),
"make": $("#carModal #make").val(),
"model": $("#carModal #model").val(),
"year": $("#carModal #year").val(),
"colour": $("#carModal #colour").val(),
"reg:": $("#carModal #reg").val(),
"mileage":$("#carModal #mileage").val(),
"type":$("#carModal #type").val(),
"price":$("#carModal #price").val(),
"picture":$("#carModal #pictureCar").val(),
"engineSize":$("#carModal #engineSize").val(),
});
}
