admin管理员组

文章数量:1310475

I am building a django admin site and am using javascript and jquery (2.0.3) to add some extra functionality to the forms.

I am importing the scripts into my page like this:

<html>
    <head>
        <script type="text/javascript" src="/static/admin/js/jquery.js"></script>
        <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
        <script type="text/javascript" src="/static/project/js/project.js"></script>
    </head>
    <!-- ... -->
</html>

At first I placed the following code at the end of project.js:

function tryCustomiseForm() {
    // ...
}

$(document).ready(tryCustomiseForm);

Unfortunately this results in an Uncaught TypeError: undefined is not a function exception on the last line.

I then tried the alternative syntaxes of ready() without any more luck.

Lastly I explored the change_form.html template and found this inline javascript:

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('form#{{ opts.model_name }}_form :input:visible:enabled:first').focus()
        });
    })(django.jQuery);
</script>

I was able to modify it to suit my needs and now my project.js ends with:

(function($) {
    $(document).ready(function() {
        tryCustomiseForm();
    });
})(django.jQuery);

While this results in the correct behaviour I don't understand it.

This leads to my question: Why did my first approach fail? And what is the second approach doing?

I am building a django admin site and am using javascript and jquery (2.0.3) to add some extra functionality to the forms.

I am importing the scripts into my page like this:

<html>
    <head>
        <script type="text/javascript" src="/static/admin/js/jquery.js"></script>
        <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
        <script type="text/javascript" src="/static/project/js/project.js"></script>
    </head>
    <!-- ... -->
</html>

At first I placed the following code at the end of project.js:

function tryCustomiseForm() {
    // ...
}

$(document).ready(tryCustomiseForm);

Unfortunately this results in an Uncaught TypeError: undefined is not a function exception on the last line.

I then tried the alternative syntaxes of ready() without any more luck.

Lastly I explored the change_form.html template and found this inline javascript:

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('form#{{ opts.model_name }}_form :input:visible:enabled:first').focus()
        });
    })(django.jQuery);
</script>

I was able to modify it to suit my needs and now my project.js ends with:

(function($) {
    $(document).ready(function() {
        tryCustomiseForm();
    });
})(django.jQuery);

While this results in the correct behaviour I don't understand it.

This leads to my question: Why did my first approach fail? And what is the second approach doing?

  • javascript
  • jquery
  • html
  • django
  • events
Share Improve this question edited Dec 3, 2014 at 1:26 Kelly Thomas asked Dec 2, 2014 at 7:43 Kelly ThomasKelly Thomas 4877 silver badges19 bronze badges 1
  • 1 I think the django framework uses the dollar $ sign for something else rather then jQuery. Therefore you need to create a container around your jQuery functions where you assign the jQuery to the dollar sign only for the code inside the container – Mivaweb Commented Dec 2, 2014 at 7:47
Add a ment  | 

3 Answers 3

Reset to default 5

It's hard to tell from the code you've posted, but it looks like the $ variable is not assigned to jQuery in your template; hence the $() construct threw the undefined function error.

The reason the latter works is because it puts a closure around your DOMReady handler, which passes in django.jQuery, which I assume to be the noConflict jQuery assigned variable from your template, and assigns it to the $ within the scope of that:

(function($) { // < start of closure
    // within this block, $ = django.jQuery
    $(document).ready(function() {
        tryCustomiseForm();
    });
})(django.jQuery); // passes django.jQuery as parameter to closure block

The Django docs explain this: jQuery is namespaced, so you can use django.jQuery to refer to it within admin templated.

try

$(document).ready(function(){

 tryCustomiseForm();

}); 

function tryCustomiseForm() {
    // ...
}

本文标签： javascriptUsing jquery to run code when django document is readyStack Overflow

版权声明：本文标题：javascript - Using jquery to run code when django document is ready - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741825201a2399601.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。