Question

I like SO’s effect on when you click a notification from the top-left where it says “Stack Exchange”, then the SO will open a new page, jump to the specific section, then highlight the section in yellow and fade out.

Currently I have a comment form that is on the bottom of a long website. And when the comment posting fails the validation, I have jQuery to scroll to the form and do the same yellow highlight effect as SO.

Here is my (perfectly working) code:

$(document).ready(function() {
    {% if focus %}
        // Focus
        $('html, body').animate({scrollTop: $('#{{ focus }}').offset().top }, 'slow')
        $('#{{ focus }}').effect("highlight", {}, 3000)
    {% endif %}
})

I have this code in my base.html so every template checks for a template variable called focus. focus is simply a string that holds the id of the <div> to do the yellow highlight effect.

As you can see I feel this is a bit hacked. I need to pass focus in a dictionary using render() in Django’s views.py.

What I really want to do is pass it as a GET variable. Something like http://www.example.com/orders/2/?focus=comment_form. Then I can get that GET variable using Javascript and do the highlight effect. But I don’t know how to pass a GET variable using render().

Currently my render() looks like this:

dictionary = get_orders_detail_dictionary(order=order, user=request.user, comment_form=form)
dictionary['focus'] = 'comment_form'
return render(request, 'doors/orders/detail.html', dictionary)

The reason I want to use a GET is for like “permalinking” options.

Answer 1

Since it’s a GET variable, it’s available from request.GET. And since you’re using the render shortcut, you can enable the request context processor to make the request object available in your templates, at which point you can just do {{ request.GET.focus }}.

However, to me a better option would be to use your own custom context processor which extracts the focus param into a context variable:

def get_focus(request):
    return {'focus': request.GET.get('focus', '')}

and then you can use {{ focus }} exactly as you do now.