Creating image tag in jQuery not working?

Question

index.html

<html>
    <head>
        <script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
        <script src="jquery.js"></script>
    </head>
    <body>
        <div id="myDiv" name="myDiv" title="Example Div Element">


        </div>
    </body>
</html>

jquery.js

$.ajax
({
 type: "GET",
 url: "url",
 dataType: 'image/png',
 async: false,

 beforeSend: function (xhr) {
 xhr.withCredentials = true;
 xhr.setRequestHeader("Authorization", "Bearer xxx");
 },
 complete: function (data) {
 console.log("yello");
 $('#myDiv').html('<img id="target">');
 }
 });

Simple enough question,

Why is this line not working? $('#myDiv').html('<img id="target">'); When I examine the source of the page nothing shows up, no image tag. I'm not quite understanding why as I am sure I am doing everything correctly.

Thanks!

Try $('#myDiv').html('Works !'); and see if text appears or not. — Vincent Decaux
– Vincent Decaux, Commented Jun 30, 2014 at 22:36
Are you sure your ajax call is completing and your success function is being hit? — Dave Zych
– Dave Zych, Commented Jun 30, 2014 at 22:38
Are you using an inspector? If not the source will not reflect dynamic changes. — rlemon
– rlemon, Commented Jun 30, 2014 at 22:38
I am using the chrome inspector. Function should be hit whether or not the get completes (which it does). Body tag is there, im just stupid and ill paste it in now. .html('Works!) does not show up. — k9b
– k9b, Commented Jun 30, 2014 at 22:39

Hanlet Escaño · Accepted Answer · 2014-06-30 22:46:50Z

2

Wrap your function inside a .ready():

 $(function()
 {
     $.ajax
     ({
         type: "GET",
         url: "url",
         dataType: 'image/png',
         async: false,

         beforeSend: function (xhr) {
             xhr.withCredentials = true;
             xhr.setRequestHeader("Authorization", "Bearer xxx");
         },
         complete: function (data) {
             console.log("yello");
             $('#myDiv').html('<img id="target">');
         }
     });
 });

This makes sure to call the ajax method after the DOM is loaded.

answered Jun 30, 2014 at 22:46

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

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

1 Comment

k9b Over a year ago

Answered as i commented, it worked! Thanks! Will check as soon as possible.

user1618236 · Accepted Answer · 2014-06-30 22:50:30Z

0

If the javascript you posted is the complete jquery.js file then what is happening is the javascript is being run before the browser has rendered the div tag so the jquery selector doesn't find anything, hence your console.log call returning undefined.

Here is a quick fiddle I through together to verify your javascript, note that I wrapped the image creation in a $(function(){}); block. this is jquery shorthand for document.ready(function(){});

answered Jun 30, 2014 at 22:50

user1618236

Comments

Andy · Accepted Answer · 2014-06-30 22:50:45Z

0

try console.log($('#myDiv').html()) after your code and see the value in your console, you will find the image there but it wont show in source view

edited Jun 30, 2014 at 22:50

Andy♦

50.8k62 gold badges181 silver badges240 bronze badges

answered Jun 30, 2014 at 22:39

Negm Sherif

1143 bronze badges

2 Comments

Negm Sherif Over a year ago

i demonestrated this locally dropbox.com/s/n93oocn8e2e2wxk/…

Negm Sherif Over a year ago

<html> <head> <script src="//code.jquery.com/jquery-2.0.0.min.js"></script> </head> <body> <div id="myDiv" name="myDiv" title="Example Div Element"> </div> </body> <script> $.ajax ({ type: "GET", url: "/images/cone.png", dataType: 'image/png', async: false, beforeSend: function (xhr) { xhr.withCredentials = true; xhr.setRequestHeader("Authorization", "Bearer xxx"); }, complete: function (data) { console.log("yello"); $('#myDiv').html('<img id="target">'); console.log($('#myDiv').html()); } }); </script> </html>

Collectives™ on Stack Overflow

Creating image tag in jQuery not working?

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related