CODEWITHSUNDEEP
javascriptpythondjangodjango-templatesjinja2
Rookie_123
Rookie_123

Reputation: 2007

TemplateSyntaxError at Could not parse the remainder

In my django app I am trying to get the name of image to be loaded from JSON variable.In its HTML key there is name of the image to be displayed. I am reading that key and appending in the static path.But I get this error

TemplateSyntaxError at  Could not parse the remainder

JSON 

 var json = [{
        "html": "abc.jpg", //testing this failed
        "col": 1,
        "row": 1,
        "size_y": 2,
        "size_x": 2
    }, {
        "html": "def.jpg", 
        "col": 4,
        "row": 1,
        "size_y": 2,
        "size_x": 2
    },

    {
        "html": "bac.jpg",
        "col": 6,
        "row": 1,
        "size_y": 2,
        "size_x": 2
    },


    {
        "html": "xyz.jpg",
        "col": 1,
        "row": 3,
        "size_y": 1,
        "size_x": 1
    }, {
        "html": "Brand.jpg",
        "col": 4,
        "row": 3,
        "size_y": 1,
        "size_x": 1
    },

    {
        "html": "Brand.jpg",
        "col": 6,
        "row": 3,
        "size_y": 1,
        "size_x": 1
    }

    ];

My loop used for extracting image name and other required parameters

for(var index=0;index<json.length;index++) {
   gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static \'images/'+json[index].html+'\' %}"></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
};

Check in this loop the variable I get

var json = [{
    "html": "abc.jpg", //testing this failed
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
  }, {
    "html": "def.jpg",
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
  }, {
    "html": "bac.jpg",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
  }, {
    "html": "xyz.jpg",
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
  }, {
    "html": "Brand.jpg",
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
  }, {
    "html": "Brand.jpg",
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
  }
];

for(var index=0;index<json.length;index++) {
   console.log('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static \'images/'+json[index].html+'\' %}"></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
};

Upvotes: 0

Views: 648

Answers (1)

Alasdair
Alasdair

Reputation: 308779

{% static \'images/'+json[index].html+'\' %}

You can't do this because the {% static %} template tag is rendered on the server before the browser runs your JavaScript.

You could use the get_static_prefix tag (note this won't work for all static files storage backends).

{% load static %}
"{% get_static_prefix %}" + json[index].html

Or, since you define json in your template, you could use static repeatedly there.

var json = [{ 
"html": "abc.jpg", //testing this failed 
"image": "{% static "abc.jpg" %}", 
...

Then use image in your loop.

Upvotes: 1

Related Questions