Change the background-image dynamically using MEDIA_URL and jquery

Question

I am trying to change the background image of the div dynamically whenever the user uploads the image via ajax.

First I am passing the url of the image through ajax from the view to the template. And then I am changing the url for the css to get the image:

url = 'http://sitename.com/media/' + url;
block.css({
    'background-image': 'url('+url+')',
    'background-color': ''
});

Now the url becomes like this and this is working as expected:

url = http://sitename.com/media/uploaded_files/thomas.jpg

But when I try to use the {{MEDIA_URL}} as its describe to use in the django template

url = '{{MEDIA_URL}}' + url;

I get a 404 error and the url is changed like this:

GET http://sitename.com/page-modify/67/%7B%7BMEDIA_URL%7D%7Duploaded_files/1449049938_08_images.jpg 404 (NOT FOUND)

How can I use the {{MEDIA_URL}} from the django settings in my template to change the background-image using jquery?

Where you're putting that {{ MEDIA_URL }}? In which file?

GwynBleidD
– GwynBleidD

2015-12-02 10:18:22 +00:00
Commented Dec 2, 2015 at 10:18 — GwynBleidD
– GwynBleidD, Commented Dec 2, 2015 at 10:18
@GwynBleidD In the js file

Benjamin Smith Max
– Benjamin Smith Max

2015-12-02 10:20:28 +00:00
Commented Dec 2, 2015 at 10:20 — Benjamin Smith Max
– Benjamin Smith Max, Commented Dec 2, 2015 at 10:20

GwynBleidD · Accepted Answer · 2015-12-02 10:21:27Z

1

Django can't parse template tags placed in static files, so you can't just put {{ MEDIA_URL }} here and expect it to work fine.

But you can use it in main template and save it as a variable:

<script>media_url = '{{ MEDIA_URL }}';</script>

And then use that variable in your javascript:

url = media_url + url;

answered Dec 2, 2015 at 10:21

GwynBleidD

20.6k5 gold badges51 silver badges80 bronze badges

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

2 Comments

Benjamin Smith Max Over a year ago

Could you please add both your answers together, it will be much more helpful for other users too. And thank you, its working now.

GwynBleidD Over a year ago

Those are separate, alternative solutions. They're shouldn't be joined as one answer.

GwynBleidD · Accepted Answer · 2015-12-02 10:24:57Z

0

If you're making an AJAX call to upload your file into server, best thing you can do is to pass in response for that upload full URL of uploaded file.

Glueing MEDIA_URL with path to file isn't recommended one. You can have different media handlers that will upload files into different locations. That can break your links.

Also: if you're trying to upload file with name that already exists on server, actual file name will be unpredictable (django will add some random characters to it)

So for best compatibility, return URL to file from your upload view, and use that in your Javascript.

answered Dec 2, 2015 at 10:24

GwynBleidD

20.6k5 gold badges51 silver badges80 bronze badges

1 Comment

Benjamin Smith Max Over a year ago

How do I get the url of the file? I thought the field of the image was enough.

Collectives™ on Stack Overflow

Change the background-image dynamically using MEDIA_URL and jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related