CODEWITHSUNDEEP
javascriptjqueryjson
AlexGH
AlexGH

Reputation: 2805

Jquery forward slashes are being replaced by spaces within tags

I'm receiving urls within a view, and I'm using JQuery to assign those urls to some html elements.. I'm reading the urls in the view and I'm seeing that the forward slashes are still there.. But on the page output they are being replaced by spaces... This my code: 

    $('#someId').append("<div class='request-quote__dropdown'>
<div class='request-quote__dropdown-image' 
style='background-image: url('"+element.parent.PictureUrl+"');'>
</div></div>")

So the value that element.parent.PictureUrl contains is "https://localhost:44390/images/thumbs/0000570_ackerman_schoendorf_scales_for_parent_evaluation_of_custody_aspect_100.jpeg" I'm reading it using Json.stringify(). But the image is not rendering on the page and when I inspect the element it look like this:

        <div class="request-quote__dropdown-image" 
style="background-image: url(" https:="" localhost:44390="" images="" 
thumbs=""     0000570_ackerman_schoendorf_scales_for_parent_evaluation_of_custody_aspect_100.jpeg');'=""></div>

I've tried this way too but still the same results...

`<div class='request-quote__dropdown-image' style='background-image: url('${element.parent.PictureUrl}');'></div>`

I'm working with json, I've read that json prevent the use of forward slashes within html elements.. not sure why.. How can I keep the forward slashes? They are necessary to display the images on the page..

UPDATE: The relevant Json looks like this:

     {"parent":{"Name":"Ackerman-Schoendorf Scales for Parent Evaluation of
 Custody™ (ASPECT™)","Author":"Marc Y.Heiks, PhD and Kathleen Schand, 
PsyD","Quantities":null,"Id":2666,"PictureUrl":"https://localhost:44390/images
/thumbs/0000570_ackerman_schoendorf_scales_for_parent_evaluation_of_custody_aspect_100.jpeg"},

Upvotes: 0

Views: 611

Answers (1)

Asyranok
Asyranok

Reputation: 985

Your problem is this 

style='background-image: url('"

You have a single quote around the background image css, and then a single quote around the url. That is going to cause it to terminate the style tag instantly after "url(". Everything after that is registered as a new attribute, and that just results in the bizarre html where the image name seems to be interpreted as an attribute.

Try "\" instead of the single quotes around the url. If that doesn't work, try rearranging what uses single quotes, double quotes, and escaped quotes until it generates the correct html. I've had this exact problem. That has always resolved it.

After edit:

 $('#someId').append("<div class='request-quote__dropdown'>
<div class='request-quote__dropdown-image' 
style='background-image: url(\""+element.parent.PictureUrl+"\");'>
</div></div>")

Upvotes: 2

Related Questions