Mixed string and variable inside jQuery

Question

I'm having trouble with this code

  output.html('<img  width="200" src="uploads/'+response.responseText+'" height="300" >');

It outputs this:

   <img width="200" height="300" 1269050260.png""="" src="uploads/">

It should be:

   <img width="200" height="300"  src="uploads/1269050260.png">

I have tried many ways, for example:

 output.html('<img  width="200" src="uploads/'+response.responseText+'" height="300" >');
 output.html('<img  width="200" src="uploads/"'+response.responseText+'" height="300" >');
   .....

But when I try this:

  output.html("<img width='200' src='uploads/"+response.responseText+" height='300' >");

it gives

  <img width="200" 300'="" src="uploads/"1074374482.png" height=">

which also wrong.

EDIT

When I tried this suggested below:

   output.html("<img width='200' src='uploads/"+response.responseText+"' height='300' >");

I got this which is also wrong.

  <img width="200" height="300" src="uploads/"977165688.png"">

When I try:

    output.html("<img width='200' src='uploads/977165688.png' height='300' >"); // this works

I don't know if this will make a difference, but on your last example, it should be src='uploads/"+response.responseText+"' .You forgot to close the src. — J148
– J148, Commented Aug 25, 2014 at 23:17
I might try declaring a variable like var src = 'uploads/'+response.responseText and then in .html() use "src="+src — J148
– J148, Commented Aug 25, 2014 at 23:20
How certain are you of the contents of response.responseText? If I hardcode the value of response.responseText, then your first example works just fine... — therealrootuser
– therealrootuser, Commented Aug 25, 2014 at 23:20
@J148 have tried decalring that variable also but it same result. — echo_Me
– echo_Me, Commented Aug 25, 2014 at 23:21

OneHoopyFrood · Accepted Answer · 2014-08-25 23:53:43Z

3

It's better to just escape the " than to try and use quote rules like that. Try this:

output.html("<img  style=\" width: 200px; height: 300px; \" src=\"uploads/" + response.responseText + "\">");

Fiddle

If that doesn't work then you've got other problems.

EDIT:

Also the width and height attributes are deprecated for the <img> tag. Don't use them. Use CSS instead. Example has been updated

edited Aug 25, 2014 at 23:53

answered Aug 25, 2014 at 23:23

OneHoopyFrood

3,9893 gold badges28 silver badges39 bronze badges

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

13 Comments

echo_Me Over a year ago

your output is this <img width="200" height="300" 708561310.png""="" src="uploads/">

OneHoopyFrood Over a year ago

That's what you see in the Fiddle I posted?

echo_Me Over a year ago

@your fiddle is just getting data from fiddel.shell.com but nothing shows .

OneHoopyFrood Over a year ago

That's a strange error, never seen that from jsfiddle. Try the new link.

echo_Me Over a year ago

what im suspected to see in your fiddle ?, i see just rectangular border.

|

Oliboy50 · Accepted Answer · 2014-08-25 23:36:50Z

1

jQuery html() accept a HTMLString as argument, you should try to parse it as HTML if you're not sure about response.responseText (and you should encode it since it will belong to a src attribute):

output.html($.parseHTML('<img  width="200" src="uploads/' + encodeURIComponent(response.responseText) + '" height="300" >'));

edited Aug 25, 2014 at 23:36

answered Aug 25, 2014 at 23:23

Oliboy50

2,7513 gold badges32 silver badges37 bronze badges

9 Comments

echo_Me Over a year ago

your outputs is this <img width="200" height="300" 166748152.png""="" src="uploads/">

OneHoopyFrood Over a year ago

Are you using jQuery OP?

Oliboy50 Over a year ago

@colepanike .html() is a jquery method

echo_Me Over a year ago

yes i have jquery , but this gives me $.parseHTML is not a function

OneHoopyFrood Over a year ago

What version of jQuery are you using?

|

Collectives™ on Stack Overflow

Mixed string and variable inside jQuery

2 Answers 2

13 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related