jQuery and Django change_form.html

Question

I am totally new to jQuery. I spent quite a bit of time researching how to get jQuery to work in the Django Admin, specifically using the change_form.html.

In the {% block extrahead %} in the change_form.html template I eventually found out that I should write:

<script type="text/javascript">
(function($){
    $(function(){
        $("#id_fs1").attr("style", "width:10px");
    });

})(django.jQuery);
<script>

It worked like a charm but in the end it looks quite convoluted compared to:

<script type="text/javascript">
    document.getElementById("id_fs1").style.width = "50px";
</script>

(the above was placed in the {% block after_field_sets %})

My question is... Is there a more elegant way of using jQuery within the Django admin?

yedpodtrzitko · Accepted Answer · 2012-03-07 12:51:03Z

1

this should works as well:

<script type="text/javascript">
(function($){
        $("#id_fs1").width("10px");
})(django.jQuery);
<script>

First steps with jQuery are not easy, but you will find strength of jQuery over time .)

Also using jQuery in django admin is a step more difficult because of namespacing jQuery to not collide with potential another instance of jQuery (that (django.jQuery) on end of script, usually it's not required)

answered Mar 7, 2012 at 12:51

yedpodtrzitko

9,4292 gold badges48 silver badges47 bronze badges

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

3 Comments

PlacidLush Over a year ago

Thanks, that worked too. Am I right that the script does not wait for the DOM to be ready? It seems to only work in the after_field_sets block.

yedpodtrzitko Over a year ago

AFAIK it waits for domready event, this is only shorter way how to write it. See api.jquery.com/ready - there are more ways how to bind script with ondomready event in jQuery

PlacidLush Over a year ago

Thank you I will go and check it out.

Collectives™ on Stack Overflow

jQuery and Django change_form.html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related