AJAX on Load command for a Liquid code

Question

I wanted to add a onClick function when I click on the link. Basically, whenever I click on "Click" it should add the liquid code in the div. What it is doing is, adding a liquid code yes, but just the code and not the content it should be adding with the liquid code. Here is my code:

Index

    <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' %}

What I get after clicking on "Click Me" is this {% include 'cod-checker' %}

`liquicode.html` is just an HTML file, it isnt supposed to be parsed, just rendered. Maybe you want to first parse it into regular html and then `load` it. — Freeman Lambda, Jun 06 '17 at 19:53
@FreemanLambda Correct, that is what I am unable to parse. I also want to make sure that the content I load is not preloaded, this is to avoid the slow page loading issue. — Milind Pandharkame, Jun 06 '17 at 19:55
I would suggest making an AJAX request on click then, to an endpoint from your server. Make that endpoint provide a parsed html version of your `liquidcode.liquid` (just assuming the filename here). — Freeman Lambda, Jun 06 '17 at 19:59

score 0 · Answer 1 · answered Jun 06 '17 at 20:00

0

Liquid is rendered server-side so you will not be able to render liquid after the page loads using jquery. You can circumvent this issue by inserting whatever code resides in 'liquidcode.html' from the very beginning, but hiding it by adding a class to the div with display set to none. You can then remove that class when the user clicks on "Click".

answered Jun 06 '17 at 20:00

OneCaseTwoCase

63
7

The problem is that I would want it to load only after I click as it will load some images. I am trying to improve the page speed here. – Milind Pandharkame Jun 06 '17 at 20:03
That's funny, I'm actually working on pretty much the exact same thing at the moment. I'm currently looking into using ajax to retrieve binary image data from a remote location, recreating the image from the binary data, and then displaying the image after the ajax request is complete. That might work for your situation as well. If you don't have to worry about whether or not the image is publicly hosted, then dealing with binary data won't even be necessary. You just have to change the src property of an image tag after the ajax request is complete. – OneCaseTwoCase Jun 06 '17 at 20:15
Not sure how to do that, I am currently trying to hide COD option from my page and make it appear only if the user want's to see it; however, I would want to have the same feature for the images. Once I understand the code, I can add it to the other things. – Milind Pandharkame Jun 06 '17 at 20:24
You could give each image a unique ID. Then create a hashmap that matches image IDs and srcs. When a user clicks to show an image, you can use jquery to get the ID of the image element. Then write a function that checks the hashmap for the src [value] that corresponds to the image ID [key]. Then store the src [value] in a temporary variable, and use jquery to set the value of the temp variable as the src of the image element. This thread shows how to set up a hashmap: https://stackoverflow.com/questions/4246980/how-to-create-a-simple-map-using-javascript-jquery . – OneCaseTwoCase Jun 06 '17 at 20:44
If the method I'm describing doesn't make sense, I can edit my answer and add some example code. – OneCaseTwoCase Jun 06 '17 at 20:46
For now I am not sure how to parse a liquid code to load when I click on a link/button. If I can do that, I should be able to get the rest. Can you help me with that please? – Milind Pandharkame Jun 06 '17 at 21:16
It's not possible to parse liquid code based off of a click on a button because liquid is parsed before the page is even displayed. Any liquid code that you insert after page load will not be recognized. You need to parse the liquid code into html and store it somewhere, and then fetch that stored code after a user clicks on a button. – OneCaseTwoCase Jun 06 '17 at 22:04

score 0 · Answer 2 · answered Jun 07 '17 at 12:21

Answering here to expand my comment, since there was a request for actual code from the question author.

My comment, which is the basis of the anser:

I would suggest making an AJAX request on click then, to an endpoint from your server. Make that endpoint provide a parsed html version of your liquidcode.liquid (just assuming the filename here).

On client side, jQuery-aided AJAX looks like this:

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

As for server side, I really have no clue what framework you are using. (Ruby on Rails?)

In an MVC fashion, you need to register a route called "myAwesomeServerEndpoint". Assign a Controller to that route, say "myAwesomeServerController". This Controller is not supposed to do much, it should just render your liquicode.liquid template.

Pseudocode for your controller (since I dont know Ruby on Rails):

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

Make sure that the response is sent as HTML and that the route is exposed to AJAX requests, and that should be it.

Again, this is not a solution but just a rough concenpt

AJAX on Load command for a Liquid code

2 Answers2

Linked