Jquery - updating Background css

Question

I'm using Jquery form plugin http://jquery.malsup.com/form/#ajaxForm to upload images through ajax to the server side programmed in Django. When the image is uploaded it automatically changes the background to that image. Everything is perfect(the images get stored in the database and the response is return) but how to update the css with that responseText.

Here is my javascript code: https://gist.github.com/2381991

Django response:

 url('home/nirmal/try/files/background/monalisa.jpg')

Django views.py:

@login_required
def backgroundview(request):
    if request.is_ajax():
        form = BackgroundModelForm(request.POST, request.FILES)
        if form.is_valid():
            try:
                g = BackgroundModel.objects.get(user=request.user)
            except BackgroundModel.DoesNotExist:
                data = form.save(commit=False)
                data.user = request.user
                data.save()
            else:
                g.background = request.FILES['background']
                g.save()
            return HttpResponse("url('"+g.background.url+"')")
    else:
        form = BackgroundModelForm()
        return render_to_response("cover.html", {'form': form}, context_instance=RequestContext(request))

I don't know how to update the css: background-image: url() in jquery. Could anyone help me?

Thanks!

John Ernst · Accepted Answer · 2012-04-14 04:14:37Z

2

In the showResponse callback of the jQuery form plugin, just select the element you would like to apply the background image to, and use the .css method to set the background image:

$("#some_element_id").css("backgroundImage", "url('/relative/address/to/image.jpg')");

Note: You will need to use a path to the image that is relative to the web root, not to your home directory.

answered Apr 14, 2012 at 4:14

John Ernst

212 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:04:31Z

1

First, what mimetype of response your client-side jQuery expects? You code returns text/html in HttpResponse and you could .css('background-image', response_data).

Secondly, g.background.url looks incorrect, what's your MEDIA_URL in settings?

Furthermore, please check your question Model has no attribute _committed, g.background = request.FILES['background'] here does not check image type and could allow any type of file to be uploaded and stored.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Apr 14, 2012 at 4:38

okm

23.9k5 gold badges86 silver badges92 bronze badges

5 Comments

rnk Over a year ago

Can I use this g.background = form.save(commit=False).background for ModelForm? How to check Imagetype?

okm Over a year ago

@mk update MEDIA_URL to '/files/', MEDIA_ROOT to '/home/try/files' as it is an absolute path.

rnk Over a year ago

How can I check image type in Model Form?

okm Over a year ago

@mk ModelForm uses forms.ImageField automatically for models.ImageField, to do checks

okm Over a year ago

@mk refs comment in settings.py: "URL that handles the media served from MEDIA_ROOT. Make sure to use a trailing slash.". Also, MEDIA_URL must be an URL, both '/files/' or 'http://localhost:8000/files/' are OK, but on production you need to generate URLs that visitor could access, for example http://example.com/files/ instead of localhost

Collectives™ on Stack Overflow

Jquery - updating Background css

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related