Displaying images in Django via JavaScript

Question

I am trying to create a page with a list of names. Each name has there own modal(Note: this is in a for loop, so for each name, create a modal) which contains the Name, Description, and an image. The name and title appear, but not the image.

<!-- Toggle Button -->
{% for name in User_list %}
<li><a data-toggle="modal" data-id="{{ name }}" data-description="{{ name.description }}" data-image="{{ name.image }}" title="Add this item" class="open-AddBookDialog " href="#addBookDialog">{{ name }}</a></li>
{% endfor %}



<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3 id="nameId" /></h3>

    </div>
    <div class="modal-body">
        <p id="nameDescription" /></p>
        <div id='images'></div>


    </div>
</div>

<!-- JavaScript -->
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
 var myNameId = $(this).data('id');
 var myNameDescription = $(this).data('description');
 var thumb = $(this).data('image');
 $(".modal-header #nameId").html( myNameId );
 $(".modal-body #nameDescription").html( myNameDescription );
 $(".modal-body #images").html("<img>" ,{src: thumb});
 //.html( myNameImage )
 // As pointed out in comments, 
 // it is superfluous to have to manually call the modal.
 });
</script>

What am I doing wrong, and how do I correct it(Note: I am using Twitter-Bootstrap)

Ian · Accepted Answer · 2013-07-23 21:23:13Z

1

The html() method doesn't accept two parameters. You are attempting to create an element and initialize some of its properties. Try creating it properly and appending it:

$("#images").empty().append($("<img>", {src: thumb}));

DEMO: http://jsfiddle.net/tGbG6/

The <div id='images'></div> element's id should be unique, so you can use the selector $("#images") (this is true for the other selectors you have)...otherwise jQuery does some extra unnecessary work.

References:

html(): http://api.jquery.com/html/
append(): http://api.jquery.com/append/
http://api.jquery.com/jQuery/#creating-new-elements

edited Jul 23, 2013 at 21:23

answered Jul 23, 2013 at 14:27

Ian

51k13 gold badges104 silver badges111 bronze badges

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

11 Comments

pepper5319 Over a year ago

My apologies my friend, I did mean to do this, although, it still won't display an image. In the source code, it doesn't even read it as an <img> tag

Ian Over a year ago

@user2564732 My fault! I don't know what I was thinking - html() accepts a string, not a jQuery object. I just updated my answer; that should work.

pepper5319 Over a year ago

thank you for your update! It now regonizes the code and gives me the source to the image. Is there a way to actually display it, for it won't appear? Please note that each modal is created in a for loop

Ian Over a year ago

@user2564732 I'm not sure what you mean. What do you mean "gives me the source to the image"? You mean it displays that instead of the image itself? I think that means the path isn't correct and the image can't be found. Inspect the DOM and make sure the <img> is where it should be and make sure the src is correct

Ian Over a year ago

@user2564732 About your modals being in a for loop - well then you have duplicate ids on the page and that isn't good. Why are you generating multiple modals anyways? You should be able to reuse one modal

|

Collectives™ on Stack Overflow

Displaying images in Django via JavaScript

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related