javascript not loaded from django template when URL is invoked from jQuery load()

Question

I have a django generated page, and in it I have a jQuery on click handler that loads another django page using the jQuery load() function:

$("#loadit").on("click", function() {
  load_it($("#loadit"), url);
});

function load_it(el, url)
{           
    var el_wf = $('<div />');
    el_wf.load(url, function (html, status) {
        el.children().remove();
        el_wf.show();
        el_wf.appendTo(el);
    });             
}

In that second django template I have some code like this:

<script type="text/javascript" src="/static/scripts/myscript.js"></script>
     .
     .
     .
<div>
   <script>
      function_in_myscript();
   </script>
</div>

When I click on the element in the first page, and the second page is loaded that js function is not invoked. There are no errors, and the rest of the template is run and the page is generated.

But if I go to the second URL directly from my browser the js function is run.

Is there something with load() that is preventing this from working?

Saeed · Accepted Answer · 2015-10-30 08:31:44Z

3

JavaScript inserted as DOM text will not execute. The W3C Specification for XMLHttpRequest states: Scripts in the resulting document tree will not be executed, resources referenced will not be loaded and no associated XSLT will be applied.

The solution is to call JavaScript’s eval() function on the text of the script. Using jQuery it is very easy to iterate through the collection of script tags and to eval() contents of the TextNode. However this looks like a bad practice.

Using script tag in second html is not a good way of loading a new js file. I suggest that you use RequireJS for this purpose. RequireJS takes a different approach to script loading than traditional tags. It can run fast and optimize well.

Here is an example to demonstrate the usage, In first File:

<script type="text/javascript" src="/static/scripts/require.js"></script>
    .
    .
    .
<script type="text/javascript">
    require.config({
        paths: {
            myscript: '/static/scripts/myscript'
        }
    });

    $("#loadit").on("click", function() {
        load_it($("#loadit"), url);
    });

    function load_it(el, url)
    {
        var el_wf = $('<div />');
        el_wf.load(url, function (html, status) {
            el.children().remove();
            el_wf.show();
            el_wf.appendTo(el);
            require(['myscript'], function(myscript) {
                function_in_myscript();
            });
        });             
    }
</script>

In that second django template just load the html code. No need for loading script.

edited Oct 30, 2015 at 8:31

answered Oct 29, 2015 at 18:43

Saeed

6716 silver badges12 bronze badges

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

3 Comments

Larry Martell Over a year ago

Thanks. This is very cool. In the require.config you don't put the .js on - that is automagically appended. This works for my simple case, but I'm having trouble using it in another case. Within function_in_myscript I need to include 2 js files and all their functions (d3 and plotly). How would I specify those to get require to pull them into function_in_myscript?

Saeed Over a year ago

You're right, .js is not needed. I just forgot to remove it before posting. I edited the post again. For you last question, please post another question on stackoverflow with more details, just let me know and I'll be happy to help you with the solution.

Larry Martell Over a year ago

I posted a new question at http://stackoverflow.com/questions/33436184/using-requirejs-to-load-plotly-and-d3 Thanks for looking at it.

Collectives™ on Stack Overflow

javascript not loaded from django template when URL is invoked from jQuery load()

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related