How to pass Django textfield to html attribute and read with javascript

Question

I want to pass a caption text for an image from a django template to javascript. This is the relevant part of the html code:

<ul id="portfolio">
  {% for picture in gallery_selected.photo_set.all %}
    <li><img src={{ picture.path }} alt={{ picture.caption }}></li>
  {% endfor %}
</ul>

Now I want to read the 'alt' tag from the images in javascript in order to create a fancy caption:

$("#portfolio img").click(function() {
var src = $(this).attr("src");
window.alt = $(this).attr("alt");
    alert(window.alt);
    });

I did not create the caption yet, I just wanted to test if the caption text is passed on (using the alert function). However the alert only displays the first word of my caption text. As soon as a space occurs in the string, everything else is ignored.

Does anybody know how I can fix this issue?

Daniel Roseman · Accepted Answer · 2014-04-01 11:11:36Z

1

You just need to wrap it in quotes. You should do that anyway with HTML attributes, for safety.

<img src="{{ picture.path }}" alt="{{ picture.caption }}">

answered Apr 1, 2014 at 11:11

Daniel Roseman

602k68 gold badges911 silver badges924 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass Django textfield to html attribute and read with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related