Question

我想点击链接时添加一个onClick功能。基本上，每当我点击＆＃34;点击＆＃34;它应该在div中添加液体代码。它正在做的是，添加一个液体代码是，但只是代码，而不是它应该添加液体代码的内容。这是我的代码：

索引

    <a href="#" id="myLink">Click me!</a>
    <div id="result"></div>

    <script src="http://code.jquery.com/jquery-latest.min.js" 

type="text/javascript"></script>
    <script>
      $("#myLink").on("click", function(){
        $("#result").load("liquidcode.html");
      });
    </script>

liquidcode.html

{% include 'cod-checker' %}

点击＆＃34;点击我＆＃34;这是{％include＆＃39; cod-checker＆＃39; ％}

Answer 1

Liquid在服务器端呈现，因此在使用jquery加载页面后，您将无法呈现液体。您可以通过插入＆＃39; liquidcode.html＆＃39;中的任何代码来规避此问题。从一开始，但通过向div添加一个类，显示设置为none来隐藏它。然后，当用户点击＆＃34; Click＆＃34;时，您可以删除该课程。

Answer 2

在此回答扩展我的评论，因为有问题作者的实际代码请求。

我的评论，这是anser的基础：

我建议点击然后向端点发出一个AJAX请求来自你的服务器。使该端点提供已解析的html版本你的liquidcode.liquid（这里只假设文件名）。

在客户端，jQuery辅助AJAX看起来像这样：

＆＃13;

$("#myLink").on("click", function() {
  $("#result").load("myAwesomeServerEndpoint", function() {
    console.log('BOOM, server-parsed HTML was successfully loaded inside #result');
  });
});

＆＃13;

至于服务器端，我真的不知道你正在使用什么框架。（Ruby on Rails？）

以MVC方式，您需要注册名为＆＃34; myAwesomeServerEndpoint＆＃34;的路线。将Controller分配给该路由，例如＆＃34; myAwesomeServerController＆＃34;。这个Controller不应该做太多，它应该只渲染你的liquicode.liquid模板。

你的控制器的伪代码（因为我不知道Ruby on Rails）：

return HtmlResponse(render("liquicode.liquid"));

确保响应以HTML格式发送，并且路由向AJAX请求公开，应该是它。

同样，这不是一个解决方案，只是一个粗略的概念

用于Liquid代码的AJAX on Load命令

2 个答案: