I'm trying to work through what should be an obvious problem but after several days I'm still stuck. I have the follow Go code...
package main
import (
"fmt"
"net/http"
"html/template"
"database/sql"
_"github.com/mattn/go-sqlite3"
"encoding/json"
)
type Page struct {
Name string
DBStatus bool
}
type SearchResult struct {
Title string
Author string
Year string
ID string
}
func main() {
db, _ := sql.Open("sqlite3", "dev.db")
tmpl := template.Must(template.ParseFiles("templates/index.html"))
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
fmt.Println("Main Page has been called...")
p := Page{Name: "Gopher"}
//Accepts value passed in with "localhost:8080/?name="
if name := r.FormValue("name"); name != "" {
p.Name = name
}
p.DBStatus = db.Ping() == nil
if err := tmpl.ExecuteTemplate(w, "index.html", p); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
//db.Close()
})
http.HandleFunc("/search", func(w http.ResponseWriter, r *http.Request) {
fmt.Println("Search function has been called...")
results := []SearchResult {
SearchResult{"Moby Dick", "Herman Melville", "1851", "222222"},
SearchResult{"The Adventures of Huckleberry Finn", "Mark Twain", "1884", "444444"},
SearchResult{"The Catcher in the Rye", "J.D. Salinger", "1951", "666666"},
}
fmt.Println("results =", results)
encoder := json.NewEncoder(w)
if err := encoder.Encode(results); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
})
fmt.Println(http.ListenAndServe(":8080", nil))
}
I also have this HTML with embedded Javascript trying to get info from the Go...
<html lang="en-US">
<head>
<title>Go Web Development</title>
<meta charset="utf-8" />
</head>
<body>
<form id="search-form" onsubmit="return false">
<input name="search" />
<input type="submit" value="Search" onclick="submitSearch()" />
</form>
<table width="100%">
<thead>
<tr style="text-align: left">
<th width="40%">Title</th>
<th width="30%">Author</th>
<th width="10%">Year</th>
<th width="20%">ID</th>
</tr>
</thead>
<tbody id="search-results">
</tbody>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
console.log("Starting javascript...")
function submitSearch() {
console.log(" Starting submitSearch()...")
$.ajax({
url: "/search",
method: "POST",
data: $("#search.form").serialize(),
success: function(rawData) {
var parsed = JSON.parse(rawData);
console.log(parsed)
console.log("Hello")
if (!parsed) return;
var searchResults = $("#search.results");
searchResults.empty();
parsed.forEach(function(result) {
var row = $("<tr><td>" + result.Title + "</td><td>" + result.Author + "</td><td>" + result.Year + "</td><td>" + result.ID + "</td></tr>");
console.log(row)
searchResults.append(row);
console.log(searchResults)
})
}
})
return false;
}
</script>
</body>
</html>
Using console.log it looks like the data is being passed to the Javascript via ajax, but it is not displaying. I keep thinking I've made a typo but if so I can't find it and I'm not familiar enough with using ajax in Javascript to figure it out. Any help or suggestions would be much appreciated.
There are two issue. You are referencing:
var searchResults = $("#search.results");
but in the html it is:
<tbody id="search-results">
You should be using #search-results. There is also the same situation with reading from the form:
data: $("#search.form").serialize()