Gin do not support javascript ? #3869

devgis · 2024-03-05T08:28:10Z

With issues:
- Gin do not support javascript ?
- If I added javascript into the html template file ,It will not appear in the view ?

Description

If I added javascript into the html template file ,It will not appear in the view ?

How to reproduce

{{define "posts/index.html"}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>posts/index</title>
</head>
<body>

    
<h1>{{.title}}</h1>
<h3>{{.MyParam}}</h3>
<h3>{{.JsonParam}}</h3>
<h3>{{.JsonParam.a}}</h3>
<div id="demo"></div>

{{/*    
    <script>
        var x;
        var txt="";
        var person={{.JsonParam}}
        for (x in person){
            txt=txt + person[x].a;
        }
        document.getElementById("demo").innerHTML=txt;
        </script>
    */}}
</body>

    
</html>
{{end}}

Expectations

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>posts/index</title>
</head>
<body>

    
<h1>title</h1>
<h3>xxx</h3>
<h3>yyy</h3>
<h3>zzz</h3>
<div id="demo"></div>
      <script>
          var x;
          var txt="";
          var person={x:1,y:2}
          for (x in person){
              txt=txt + person[x].a;
          }
          document.getElementById("demo").innerHTML=txt;
          </script>

</body>

    
</html>

Actual result

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>posts/index</title>
</head>
<body>

    
<h1>title</h1>
<h3>xxx</h3>
<h3>yyy</h3>
<h3>zzz</h3>
<div id="demo"></div>
</body>
</html>

If I added javascript into the html template file ,It will not appear in the view ?

Environment

go version:latest
gin version (or commit ref):
operating system:windows10

The text was updated successfully, but these errors were encountered:

RedCrazyGhost · 2024-03-05T15:14:23Z

Please add the expected effect and actual effect, at present, I can't judge your needs by looking at the issue.

devgis · 2024-03-06T04:16:17Z

Please add the expected effect and actual effect, at present, I can't judge your needs by looking at the issue.

Hi，Edited . As you can see in the Actual result the "script" codes were missed.

RedCrazyGhost · 2024-03-06T08:07:39Z

HTML natively supports <script> elements.

You shouldn't use {{}} this way; {{}} is used as a key to match replacement text.

follow the steps below to delete, you can achieve your desired effect:

- {{/*    
    <script>
        var x;
        var txt="";
        var person={{.JsonParam}}
        for (x in person){
            txt=txt + person[x].a;
        }
        document.getElementById("demo").innerHTML=txt;
        </script>
-    */}}

There is problem with your javascript usage. You need to use a struct to specify an object when using a template.

pls check your javascript code.

Code that can be used for reference:

directory structure:

.
├── main.go
└── templates
    └── test.tmpl

package main

import (
	"net/http"

	"github.com/gin-gonic/gin"
)

type JsonParam struct {
	X  int64 `json:"x"`
	Y  int64 `json:"y"`
}

func main() {
	router := gin.Default()
	router.LoadHTMLGlob("templates/*")
	router.GET("/test", func(c *gin.Context) {
		c.HTML(http.StatusOK, "test.tmpl", gin.H{
			"title": "test",
			"MyParam":"MyParam",
			"JsonParam": []JsonParam{{X: 1,Y: 2},{X: 3,Y: 4}},
		})
	})
	router.Run(":8080")
}

{{define "test.tmpl"}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>posts/index</title>
</head>
<body>

    
<h1>{{.title}}</h1>
<h3>{{.MyParam}}</h3>
<h3>{{.JsonParam}}</h3>

<div id="demo"></div>
    <script>
        var txt = 0;
        var person={{.JsonParam}}
        for (item of person){
            txt = txt + item.x;
            console.log(item);
        }
        console.log(txt);
        document.getElementById("demo").innerHTML=txt;
        </script>

</body>
    
</html>
{{end}}

devgis · 2024-03-06T08:41:37Z

HTML natively supports <script> elements.

You shouldn't use {{}} this way; {{}} is used as a key to match replacement text.

follow the steps below to delete, you can achieve your desired effect:

- {{/*    
    <script>
        var x;
        var txt="";
        var person={{.JsonParam}}
        for (x in person){
            txt=txt + person[x].a;
        }
        document.getElementById("demo").innerHTML=txt;
        </script>
-    */}}

There is problem with your javascript usage. You need to use a struct to specify an object when using a template.

pls check your javascript code.

Code that can be used for reference:

directory structure:

.
├── main.go
└── templates
    └── test.tmpl

package main

import (
	"net/http"

	"github.com/gin-gonic/gin"
)

type JsonParam struct {
	X  int64 `json:"x"`
	Y  int64 `json:"y"`
}

func main() {
	router := gin.Default()
	router.LoadHTMLGlob("templates/*")
	router.GET("/test", func(c *gin.Context) {
		c.HTML(http.StatusOK, "test.tmpl", gin.H{
			"title": "test",
			"MyParam":"MyParam",
			"JsonParam": []JsonParam{{X: 1,Y: 2},{X: 3,Y: 4}},
		})
	})
	router.Run(":8080")
}

{{define "test.tmpl"}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>posts/index</title>
</head>
<body>

    
<h1>{{.title}}</h1>
<h3>{{.MyParam}}</h3>
<h3>{{.JsonParam}}</h3>

<div id="demo"></div>
    <script>
        var txt = 0;
        var person={{.JsonParam}}
        for (item of person){
            txt = txt + item.x;
            console.log(item);
        }
        console.log(txt);
        document.getElementById("demo").innerHTML=txt;
        </script>

</body>
    
</html>
{{end}}

Thanks,It was resloved!

RedCrazyGhost · 2024-03-06T09:32:24Z

If the issue has been resolved,pls close the issue

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gin do not support javascript ? #3869

Gin do not support javascript ? #3869

devgis commented Mar 5, 2024 •

edited

RedCrazyGhost commented Mar 5, 2024

devgis commented Mar 6, 2024

RedCrazyGhost commented Mar 6, 2024

devgis commented Mar 6, 2024

RedCrazyGhost commented Mar 6, 2024

Gin do not support javascript ? #3869

Gin do not support javascript ? #3869

Comments

devgis commented Mar 5, 2024 • edited

Description

How to reproduce

Expectations

Actual result

Environment

RedCrazyGhost commented Mar 5, 2024

devgis commented Mar 6, 2024

RedCrazyGhost commented Mar 6, 2024

devgis commented Mar 6, 2024

RedCrazyGhost commented Mar 6, 2024

devgis commented Mar 5, 2024 •

edited