使用 jquery 和 ejs 模板

Question

I'm trying to use jquery in an ejs template to make an input auto complete using an array sent by the server to the template.I get the following error :我正在尝试在 ejs 模板中使用 jquery 使用服务器发送到模板的数组使输入自动完成。我收到以下错误：

ReferenceError: /var/www/html/DM/views/formulaire.ejs:8
    6| <title>Formulaire </title>
    7| </head>
 >> 8| <%
    9| $( "#depart" ).autocomplete({
    10|   source: autoComp
    11| });

$ is not defined

I made some researches and found out that you can't use client side javascript (jquery) with server side javascript (ejs), but i didn't find any solution.我进行了一些研究，发现您不能将客户端 javascript (jquery) 与服务器端 javascript (ejs) 一起使用，但我没有找到任何解决方案。

Here is the code :这是代码：

<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta charset="UTF-8">
<title>Formulaire </title>
</head>
<body>
<script>
$( "#depart" ).autocomplete({
  source: autoComp
});
</script>

  <form action="/result" method="post">
    Départ:<input type="text" name="depart" id="depart"><br>
    Arrivée: <input type="text" name="arrivee"><br>
    <input type="submit" value="Chercher un itinéraire">
  </form>
  <%
  if(erreur){
    %> <p>Erreur lors de la saisie des stations</p>
    <%
  }
  %>
</body>
</html>

Thank you for your help感谢您的帮助

EDIT : No error anymore but auto completion doesn't work.编辑：不再有错误，但自动完成不起作用。

Answer 1

You need to put client side code in a <script> tag您需要将客户端代码放在<script>标记中

Change改变

<%
$( "#depart" ).autocomplete({
  source: autoComp
});
%>

To到

<script>
    $( "#depart" ).autocomplete({
      source: autoComp
    });
</script>

And put it inside the head or body并将其放入头部或身体内

Answer 2

I assume you were creating the array in the action and passing it to the view.我假设您正在操作中创建数组并将其传递给视图。 You then have to go one step further and pass it from the server-side view engine, to the actual browser engine.然后，您必须更进一步，将它从服务器端视图引擎传递到实际的浏览器引擎。

<script>
  let autoComp = JSON.parse( `<%= JSON.stringify( autoComp ) %>` );

What this does:这是做什么的：

tells the EJS engine to render the array as a JSON string告诉 EJS 引擎将数组呈现为 JSON 字符串
(note the backticks, you need some kind of quotation mark because it's a string) （注意反引号，您需要某种引号，因为它是一个字符串）
The browser-side JS engine then runs that string through JSON.parse浏览器端 JS 引擎然后通过 JSON.parse 运行该字符串

Obviously this ability only works one-way;显然，这种能力只能以一种方式起作用； to get a variable from the browser to the EJS you need to commit an action (POST/GET).要从浏览器获取变量到 EJS，您需要提交一个操作 (POST/GET)。

You may also need some substitutions to make the string play nice, such as:您可能还需要一些替换来使字符串演奏得更好，例如：

function fixForJSON(val) {
  return val.replace(/'/g, '&apos;').replace(/\\/g, '\\\\');
}
function fixForDisplay(val) {
  return val.replace(/&apos;/g, "'").replace(/\\\\/g, '\\');
}

If you really want to do this:如果你真的想这样做：

<%
  $(selector).doStuff();

You need to pass the JQuery object itself, into the template variables.您需要将 JQuery 对象本身传递到模板变量中。

Eg in your node code:例如在您的节点代码中：

const jsdom = require('jsdom');
const jquery = require('jquery');
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
const $ = jquery(dom.window);
global.jq = $;

Then in your specific route action (still node code)然后在您的特定路由操作中（仍然是节点代码）

var locals = { // the var you are sending to the EJS template
  jq: global.jq,

And finally in your EJS you can:最后在您的 EJS 中，您可以：

const $ = jq;
var testDiv = $('<div>').html('hello jquery in the template').appendTo('body');
console.log($('body').html());

使用 jquery 和 ejs 模板

问题描述

2 个解决方案

解决方案1
1 2017-04-07 01:25:54

解决方案2
0 2019-12-31 00:02:36

使用 jquery 和 ejs 模板

问题描述

2 个解决方案

解决方案1 1 2017-04-07 01:25:54

解决方案2 0 2019-12-31 00:02:36

解决方案1
1 2017-04-07 01:25:54

解决方案2
0 2019-12-31 00:02:36