django - javascript not working when in an included template

Question

I have a template in django called base.html that is calling another template through the {% include 'gui/page.html' %}

in that template I have the following javascript which allows the ability to select an an entire text field when setup like <p>This text I will select all</p>

<script>
$(document).ready(function(){

     $('p').dblclick(function(e){

         $(this).selectText();
             e.preventDefault();

         });

         });
         jQuery.fn.selectText = function(){
             this.find('input').each(function() {
                if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
                   $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
                }
            $(this).prev().html($(this).val());
        });
        var doc = document;
        var element = this[0];
            console.log(this, element);
            if (doc.body.createTextRange) {
                var range = document.body.createTextRange();
                range.moveToElementText(element);
                    range.select();
            } else if (window.getSelection) {
                var selection = window.getSelection();        
                var range = document.createRange();
                    range.selectNodeContents(element);
                    selection.removeAllRanges();
                    selection.addRange(range);
    }
};
</script>

If I access the template directly @ http://localhost/gui/page.html the javascript works, but if I access it through http://localhost/base.html double clicking on the field does nothing.

I've tried including the javascript in the base.html and it still doesn't load. How does django load javascript when calling through an included template?

Have you verified that the contents of gui/page.html are being included when you open base.html? Have you done view source in your browser to make sure that the javascript is there? Based on the URLs that you are using it appears that Apache (or your other server) is statically serving the file base.html rather than allowing django to serve the file in which case the template is not being processed and not including gui/page.html. How is your web server set up? — Noah
– Noah, Commented Nov 18, 2015 at 4:01
Strange, so I took the <script></script> tags and put the contents into a js/scripts.js file and it works. — whoisearth
– whoisearth, Commented Nov 18, 2015 at 4:09
It sounds like your django application is not running. You either need to call python manage.py runserver from your django project directory or your mod_wsgi or gunicorn to run your django project. Are you using any of those? — Noah
– Noah, Commented Nov 18, 2015 at 4:11
wha? Yes the application is running. If it wasn't running I wouldn't be able to browse the site.... Anyways, it's working. As I stated I put the scripts into a static file and it loaded from there. Odd it wouldn't load it if I had the script in tags in the html template. — whoisearth
– whoisearth, Commented Nov 18, 2015 at 4:17

TitanFighter · Accepted Answer · 2017-10-20 18:15:54Z

Just had the same issue. In order to solve it, it is necessary to do the next thing:

In base.html add:
- all basic scripts, such us
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
- add block, something like:
{% block extrascripts %}{% endblock %}
Put your hand-made script to /static/js/hand_made.js
In the child template, which are included, i.e that one which we use in {% include 'child_template.html' %} :
- at the top add {% load staticfiles %}
- at the middle add your html
- at the end add
{% block extrascripts %}<script type="text/JavaScript" src="{% static 'js/hand_made.js' %}"></script>{% endblock %} (can not add it with a nice style for some reason).

If for some reasons you need to provide data from template to JS, you need to do the next:

{% block extrascripts %}
    <script>
        var my_var_1 = "{{ some_template_data.var_1 }}",
            my_var_2 = "{{ some_template_data.var_12 }}";
    </script>
    <script type="text/JavaScript" src="{%  static 'js/hand_made.js' %}"></script>
{% endblock %}

In this case my_var_1 and my_var_2 will be available in hand_made.js

Noah · Accepted Answer · 2015-11-18 04:02:18Z

1

Django does not modify or load any javascript in a template. It will simply pass it through to the output.

edited Nov 18, 2015 at 4:02

answered Nov 18, 2015 at 3:56

Noah

1,73115 silver badges19 bronze badges

1 Comment

whoisearth Over a year ago

apologies I actually did have quotes around the include on the HTML so I updated to show that. My understanding is the javascript I have in page.html should work even when on an include tag but it doesn't. How do I get it to?

Subramanya A · Accepted Answer · 2023-01-21 14:40:57Z

0

I came across same issue. I was not able to find any best solution with minimal change, so commenting here my perspective/solution to resolve this issue.

step1: Include alpine.js to your project.

step2: Include js function:

JS function in in root of the include template (base.html or any extends template where you are including the include template).
or include JS file in any of the template file.

step3: In include template add x-init="your JS function" (from alpinejs) to the element. <div x-init="jsfunction"></div>

above is going to resolves the issue.

answered Jan 21, 2023 at 14:40

Subramanya A

1

Collectives™ on Stack Overflow

django - javascript not working when in an included template

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related