英文:
Golang render new template on button press
问题
我有一个按钮，用于将玩家添加到程序中，这是在HTML中完成的。当提交玩家时，我希望该按钮渲染一个新的部分模板。尽管代码已经到达了这一点，但目前并没有发生这种情况。jQuery正常工作并发送正确的数据，只是代码没有渲染新的模板。任何帮助都将是很好的，谢谢。
Go代码：
package main
import (
"html/template"
"log"
"net/http"
"strings"
)
type playerType struct {
Fname string
Lname string
// Men are true and Women are false
Gender bool
}
var players []playerType
var templates *template.Template
func handleFilePath() {
http.Handle("/templates/", http.StripPrefix("/templates/", http.FileServer(http.Dir("templates"))))
http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))
//templates = template.Must(template.ParseFiles("./templates/index.html", "./templates/displayPlayer.html"))
templates = template.Must(template.New("").ParseGlob("./templates/*.html"))
}
func landingPage(w http.ResponseWriter, r *http.Request) {
err := templates.ExecuteTemplate(w, "home", nil)
if err != nil {
log.Panicln(err)
return
}
}
func addPlayerHandler(w http.ResponseWriter, r *http.Request) {
Fname := r.FormValue("fname")
Lname := r.FormValue("lname")
Gender := r.FormValue("gender")
if addPlayer(Fname, Lname, Gender) {
log.Printf("Player added: %v, %v, %v", Fname, Lname, Gender)
err := templates.ExecuteTemplate(w, "displayPlayer", players[0])
if err != nil {
log.Panicln(err)
return
}
}
}
func addPlayer(Fname string, Lname string, Gender string) bool {
if Fname == "" || Lname == "" || Gender == "" {
return false
}
var playerToBeAdded playerType
// Set men to true and women to false
if strings.ToLower(Gender) == "male" {
playerToBeAdded = playerType{Fname, Lname, true}
} else {
playerToBeAdded = playerType{Fname, Lname, false}
}
players = append(players, playerToBeAdded)
return true
}
func main() {
handleFilePath()
http.HandleFunc("/", landingPage)
log.Println("Listening...")
http.HandleFunc("/addPlayer", addPlayerHandler)
err := http.ListenAndServe(":8081", nil)
if err != nil {
log.Panicln(err)
}
}
HTML模板：
index.html:
{{ define "home" }}
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/assets/home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Home - Match Maker</title>
</head>
<body>
<script src="/assets/home.js"></script>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'" class="addPlayer">Add Player</button>
<button onclick="generateGames()">Generate Games</button>
</br>
{{ template "displayPlayer" .}}
</br>
<!-- The Modal -->
<div id="id01" class="modal">
<form class="modal-content animate" action="/" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="/assets/be.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="fname" style="align-content: center"><b>First Name</b></label>
<input type="text" placeholder="John" name="firstName" required>
<label for="lname" style="align-content: center"><b>Last Name</b></label>
<input type="text" placeholder="Smith" name="lastName" required>
</div>
<div class="container">
Select Gender:
</br>
<label>
<input type="radio" name="gender" value="male" required>Male
</label>
</br>
<label>
<input type="radio" name="gender" value="female">Female
</label>
</div>
<div class="container" style="background-color:#f1f1f1; text-align: center">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="modelButtons">
Cancel
</button>
<button id="subbtn" type="submit" class="modelButtons"
onclick="submitPlayer(firstName.value, lastName.value, gender.value)">Submit
</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
{{ end }}
displayPlayer.html:
{{ define "displayPlayer" }}
<html lang="en">
<body>
{{ .Fname }}
</br>
{{ .Lname }}
</br>
{{ .Gender }}
</body>
</html>
{{ end }}
Javascript:
home.js:
function submitPlayer(fname, lname, gender) {
if (fname == "" || lname == "" || gender == "") {
return;
}
$.ajax({
url: '/addPlayer',
method: 'post',
data: {
fname: fname,
lname: lname,
gender: gender,
},
success: (d) => {
console.log("Player Added");
},
error: (d) => {
console.log("An error occurred. Please try again");
}
});
}
function generateGames() {
$.ajax({
url: '/createGames',
method: 'post',
success: (d) => {
console.log("Generated Games");
},
error: (d) => {
console.log("An error occurred. Please try again");
}
});
}
英文:
I have a button which adds a player to the program, this is done in HTML. I would like this button to render a new partial template when the player is submitted. This is currently not happening even though the code is reaching this point. The jQuery is working fine and sending the correct data through, the code is just not rendering the new template. Any help would be great thanks.
Go code:
package main
import (
"html/template"
"log"
"net/http"
"strings"
)
type playerType struct {
Fname string
Lname string
// Men are true and Women are false
Gender bool
}
var players []playerType
var templates *template.Template
func handleFilePath() {
http.Handle("/templates/", http.StripPrefix("/templates/", http.FileServer(http.Dir("templates"))))
http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))
//templates = template.Must(template.ParseFiles("./templates/index.html", "./templates/displayPlayer.html"))
templates = template.Must(template.New("").ParseGlob("./templates/*.html"))
}
func landingPage(w http.ResponseWriter, r *http.Request) {
err := templates.ExecuteTemplate(w, "home", nil)
if err != nil {
log.Panicln(err)
return
}
}
func addPlayerHandler(w http.ResponseWriter, r *http.Request) {
Fname := r.FormValue("fname")
Lname := r.FormValue("lname")
Gender := r.FormValue("gender")
if addPlayer(Fname, Lname, Gender) {
log.Printf("Player added: %v, %v, %v", Fname, Lname, Gender)
err := templates.ExecuteTemplate(w, "displayPlayer", players[0])
if err != nil {
log.Panicln(err)
return
}
}
}
func addPlayer(Fname string, Lname string, Gender string) bool {
if Fname == "" || Lname == "" || Gender == "" {
return false
}
var playerToBeAdded playerType
// Set men to true and women to false
if strings.ToLower(Gender) == "male" {
playerToBeAdded = playerType{Fname, Lname, true}
} else {
playerToBeAdded = playerType{Fname, Lname, false}
}
players = append(players, playerToBeAdded)
return true
}
func main() {
handleFilePath()
http.HandleFunc("/", landingPage)
log.Println("Listening...")
http.HandleFunc("/addPlayer", addPlayerHandler)
err := http.ListenAndServe(":8081", nil)
if err != nil {
log.Panicln(err)
}
}
HMTL Templates:
index.html:
{{ define "home" }}
<head xmlns="http://www.w3.org/1999/html">
<meta charset="UTF-8">
<link rel="stylesheet" href="/assets/home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Home - Match Maker</title>
</head>
<body>
<script src="/assets/home.js"></script>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'" class="addPlayer">Add Player</button>
<button onclick="generateGames()">Generate Games</button>
</br>
{{ template "displayPlayer" .}}
</br>
<!-- The Modal -->
<div id="id01" class="modal">
<form class="modal-content animate" action="/" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
<img src="/assets/be.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="fname" style="align-content: center"><b>First Name</b></label>
<input type="text" placeholder="John" name="firstName" required>
<label for="lname" style="align-content: center"><b>Last Name</b></label>
<input type="text" placeholder="Smith" name="lastName" required>
</div>
<div class="container">
Select Gender:
</br>
<label>
<input type="radio" name="gender" value="male" required>Male
</label>
</br>
<label>
<input type="radio" name="gender" value="female">Female
</label>
</div>
<div class="container" style="background-color:#f1f1f1; text-align: center">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="modelButtons">
Cancel
</button>
<button id="subbtn" type="submit" class="modelButtons"
onclick="submitPlayer(firstName.value, lastName.value, gender.value)">Submit
</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
{{ end }}
displayPlayer.html:
{{ define "displayPlayer" }}
<html lang="en">
<body>
{{ .Fname }}
</br>
{{ .Lname }}
</br>
{{ .Gender }}
</body>
</html>
{{ end }}
Javascript:
home.js:
function submitPlayer(fname, lname, gender) {
if (fname == "" || lname == "" || gender == "") {
return;
}
$.ajax({
url: '/addPlayer',
method: 'post',
data: {
fname: fname,
lname: lname,
gender: gender,
},
success: (d) => {
console.log("Player Added");
},
error: (d) => {
console.log("An error occurred. Please try again");
}
});
}
function generateGames() {
$.ajax({
url: '/createGames',
method: 'post',
success: (d) => {
console.log("Generated Games");
},
error: (d) => {
console.log("An error occurred. Please try again");
}
});
}
答案1
得分: 0
- 将home.js移到最后，以便在加载HTML内容到DOM后加载js。
- 添加了一个包含玩家ID的表格，用于添加
addPlayers返回的数据。 - 删除了
submitPlayer。 - 在表单中添加了
onSubmit，以防止页面重新加载，因为一旦提交表单，页面就会重新加载，导致丢失addPlayer返回的数据。
index.html
{{ define "home" }}
<head xmlns="http://www.w3.org/1999/html">
<meta charset="UTF-8">
<link rel="stylesheet" href="/assets/home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Home - Match Maker</title>
</head>
<body>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'" class="addPlayer">Add Player</button>
<button onclick="generateGames()">Generate Games</button>
</br>
{{ template "displayPlayer" .}}
</br>
<!-- The Modal -->
<div id="id01" class="modal">
<form class="modal-content animate" action="/" method="post" onsubmit="return onSubmit(event);">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="/assets/be.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="fname" style="align-content: center"><b>First Name</b></label>
<input type="text" placeholder="John" name="firstName" required>
<label for="lname" style="align-content: center"><b>Last Name</b></label>
<input type="text" placeholder="Smith" name="lastName" required>
</div>
<div class="container">
Select Gender:
</br>
<label>
<input type="radio" name="gender" value="male" required>Male
</label>
</br>
<label>
<input type="radio" name="gender" value="female">Female
</label>
</div>
<div class="container" style="background-color:#f1f1f1; text-align: center">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="modelButtons">
Cancel
</button>
<button id="subbtn" type="submit" class="modelButtons">Submit
</button>
</div>
</form>
<div>
<table id="players"></table>
</div>
</div>
<script src="/assets/home.js"></script>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
{{ end }}
- 将displayPlayer.html更新为表格行格式，以便将其添加到表格中。
displayPlayer.html
{{ define "displayPlayer" }}
<tr>
<td>
{{ .Fname }}
</td>
<td>
{{ .Lname }}
</td>
<td>
{{ .Gender }}
</td>
{{ end }}
- 将表单数据发送到
addPlayerAPI的函数
home.js
var players = document.querySelector('#players');
function onSubmit(evt) {
evt.preventDefault()
let form = evt.target;
let formData = new FormData(form);
let fname = formData.get('firstName');
let lname = formData.get('lastName');
let gender = formData.get('gender');
if (fname != "" || lname != "" || gender != "") {
$.ajax({
url: '/addPlayer',
method: 'post',
data: formData,
processData: false,
contentType: false,
success: (d) => {
console.log("Player Added", d);
players.innerHTML += d;
form.reset();
},
error: (d) => {
console.log("An error occurred. Please try again");
}
});
}
return false;
}
main.go中的更改
Fname := r.FormValue("firstName")
Lname := r.FormValue("lastName")
Gender := r.FormValue("gender")
# 在返回之前，将最后一个添加到切片的元素返回，之前总是返回第一个元素。
err := templates.ExecuteTemplate(w, "displayPlayer", players[len(players) - 1])
英文:
- Moved home.js down at the end so js loads after html content are loaded to DOM.
- Added table with players id to add data returned by
addPlayers - removed
submitPlayer - added
onSubmitto form so we can prevent page from reloading because as soon we submit form the page reloads causes to lose data returned byaddPlayer
index.html
{{ define "home" }}
<head xmlns="http://www.w3.org/1999/html">
<meta charset="UTF-8">
<link rel="stylesheet" href="/assets/home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Home - Match Maker</title>
</head>
<body>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'" class="addPlayer">Add Player</button>
<button onclick="generateGames()">Generate Games</button>
</br>
{{ template "displayPlayer" .}}
</br>
<!-- The Modal -->
<div id="id01" class="modal">
<form class="modal-content animate" action="/" method="post" onsubmit="return onSubmit(event);">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
<img src="/assets/be.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="fname" style="align-content: center"><b>First Name</b></label>
<input type="text" placeholder="John" name="firstName" required>
<label for="lname" style="align-content: center"><b>Last Name</b></label>
<input type="text" placeholder="Smith" name="lastName" required>
</div>
<div class="container">
Select Gender:
</br>
<label>
<input type="radio" name="gender" value="male" required>Male
</label>
</br>
<label>
<input type="radio" name="gender" value="female">Female
</label>
</div>
<div class="container" style="background-color:#f1f1f1; text-align: center">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="modelButtons">
Cancel
</button>
<button id="subbtn" type="submit" class="modelButtons">Submit
</button>
</div>
</form>
<div>
<table id="players"></table>
</div>
</div>
<script src="/assets/home.js"></script>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
{{ end }}
- Updated displayPlayer.html to table row format so we can add it to table.
displayPlayer.html
{{ define "displayPlayer" }}
<tr>
<td>
{{ .Fname }}
</td>
<td>
{{ .Lname }}
</td>
<td>
{{ .Gender }}
</td>
{{ end }}
- function to send form data to
addPlayerapi
home.js
var players = document.querySelector('#players');
function onSubmit(evt) {
evt.preventDefault()
let form = evt.target;
let formData = new FormData(form);
let fname = formData.get('firstName');
let lname = formData.get('lastName');
let gender = formData.get('gender');
if (fname != "" || lname != "" || gender != "") {
$.ajax({
url: '/addPlayer',
method: 'post',
data: formData,
processData: false,
contentType: false,
success: (d) => {
console.log("Player Added", d);
players.innerHTML += d;
form.reset();
},
error: (d) => {
console.log("An error occurred. Please try again");
}
});
}
return false;
}
Changes in main.go
Fname := r.FormValue("firstName")
Lname := r.FormValue("lastName")
Gender := r.FormValue("gender")
# return the last element added to slice before it was always returning the first element.
err := templates.ExecuteTemplate(w, "displayPlayer", players[len(players) - 1])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论