Python/Mako: Script Tag not showing up from Sub Template when Loaded into Main Template via Ajax Call

Question

I basically have a 3 level template.
I want to load dynamically load a script tag from a sub template into the main template.

Template Setup:

• A Base page with all the headers/scripts
• 2nd level template which contains the new script tag and loads a widget
• 3rd level template which contains the widget

All I'm trying to do is when the 3rd level template is loaded, load a specific javascript file, so I don't have a heavy filled up head tag on my base template with javascript files which may not get used.

Base Template (in the head tag):

<script type="text/javascript" src="/assets/scripts/jquery-1.9.1.js"></script>
${next.javascriptIncludes()}
<script type="text/javascript" src="/assets/scripts/modules/baseModule.js"></script>

2nd Template (Where the script tag is)

##conditional to determine if the template should inherit from the base page
##it shouldn't inherit from the base page if it is being inserted into the page using ajax
<%!
def inherit(context):
    if context.get('isPage'):
        return "base_dashboard.mak"
    else:
        return None
%>
<%inherit file="${inherit(context)}"/>

<%def name="javascriptIncludes()">
    <script type="text/javascript" src="/assets/scripts/libs/jquery.maskedinput-1.3.1.min.js"></script>
</%def>

## AJAX load
%if isPage is False:
    blah blah blah shows up
    <script>s</script>
    <h1>H1 shows up</h1>
    <p style="color:red;">P tag shows up in red</p>
    <link rel="stylesheet" href="/assets/css/main.css" type="text/css"><- This shows up
    <div><script type="text/javascript" src="/assets/scripts/libs/jquery.maskedinput-1.3.1.min.js"></script></div>
    Script tag above is missing...
%endif

<div id="dashboard-profile-container">
<%include file="widgets/profile_widget.mak" />
</div>

3rd Template (The Widget)

Just HTML

Issue: Script tag is NOT getting included in the header of the Base template

How would you handle this problem?

Answer 1

My understanding is that jQuery evaluates and strips all <script> tags from a HTML fragment loaded with AJAX, although at the moment I can't find a proof of that in jQuery docs:

"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

However, here is is in John Resig's own words:

When a script node is inserted into the document it is also executed (by jQuery). To avoid re-executing it later (this happens a lot, as it turns out) the script is simply removed from the document.

Naturally, this causes some issues when you actually want to see the contents of the script element (as you do). However I think the trade-off is better in this case.

The one alternative solution that I can think of is to use the internal .data() API to attach information to the script element, informing it that shouldn't be executed again at a later time. I'm not sure how unexpected that is, though.

so, at least, jQuery used to strip <script> tags in 2009.

To verify you can use Firebug etc. to confirm that your application indeed returns a HTML blob with the <script> tag included - if you confirm this then it's totally not related to Pyramid of Mako

Answer 2

Next is the next template in the inheritance chain. There isn't a naming conflict. The second template does an include, so next is null (there isn't a third layer in the inheritance chain). Hence, object has no attribute.