vinchent/udemy-go-web-1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sending AJAX post and generalizing the custom function

Browse Source
This commit is contained in:
Muyao CHEN 2024-06-30 16:37:57 +02:00
parent e18849331c
commit eca62e2e7b
3 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cmd/web/routes.go
View File

@ -24,7 +24,7 @@ func routes(app *config.AppConfig) http.Handler {
mux.Get("/majors-suite", handlers.Repo.Majors)
mux.Get("/availability", handlers.Repo.Availability)
mux.Post("/availability", handlers.Repo.PostAvailability)
mux.Get("/availability-json", handlers.Repo.AvailabilityJSON)
mux.Post("/availability-json", handlers.Repo.AvailabilityJSON)
mux.Get("/make-reservation", handlers.Repo.MakeReservation)
fileServer := http.FileServer(http.Dir("./static/"))

15
templates/base.layout.tmpl
View File

@ -184,17 +184,14 @@
focusConfirm: false,
showCancelButton: true,
willOpen: () => {
const elem = document.getElementById('reservation-dates-modal')
const rp = new DateRangePicker(elem, {
"format": "yyyy-mm-dd",
showOnFocus: true,
});
if (c.willOpen !== undefined) {
c.willOpen();
}
},
didOpen: () => {
return [
document.getElementById('start').removeAttribute("disabled"),
document.getElementById('end').removeAttribute("disabled"),
]
if (c.didOpen !== undefined) {
c.didOpen();
}
},
preConfirm: () => {
return [

24
templates/generals.page.tmpl
View File

@ -32,7 +32,7 @@
<script>
document.getElementById("check-availability").addEventListener('click', () => {
let html = `
<form action="reservation.html" method="get" novalidate class="needs-validation">
<form id="check-availability-form" action="/availability-json" method="post" novalidate class="needs-validation">
<div id="reservation-dates-modal" class="row">
<div class="col mb-3">
<input disabled required type="text" class="form-control" name="start" id="start" placeholder="Arrival">
@ -46,10 +46,30 @@
Prompt().custom({
title: "Choose your dates",
msg: html,
willOpen: () => {
const elem = document.getElementById('reservation-dates-modal')
const rp = new DateRangePicker(elem, {
"format": "yyyy-mm-dd",
showOnFocus: true,
});
},
didOpen: () => {
return [
document.getElementById('start').removeAttribute("disabled"),
document.getElementById('end').removeAttribute("disabled"),
]
},
callback: (result) => {
console.log(result);
fetch('/availability-json')
const formElem = document.getElementById("check-availability-form");
let formData = new FormData(formElem);
formData.append("csrf_token", "{{.CSRFToken}}");
fetch('/availability-json', {
method: "post",
body: formData,
})
.then(response => response.json())
.then(data => {
console.log(data);