Discussion:
django template blocks and jquery
Joel Stransky
2010-02-16 19:46:53 UTC
Permalink
Still very new to django so excuse the newbish questions.

This might be obvious but I need a smart solution.

I have a template that runs a jquery function at document ready which
defines a few other functions. I only need a couple of these functions in
the template I'm extending, the other I need tacked on to specific children
of the template.

So I have:

<script type="text/javascript">
$(document).ready(function(){
//function 1
$("#my_id").click(function() { /* do stuff */ });

//function 2
$("a.someClass").click(function() { /* do stuff */ });

//function 3
$("#my_other_id").hover(function() { /* do stuff */ });
});
</script>

But what I need is to able to insert function 3 (or others) in a child of my
base template
Ideally it would look like this:

{% block jquery %}
{{ block.super }}
//function 3
$("#my_other_id").hover(function() { /* do stuff */ });
{% endblock jquery %}

How do I achieve something to that effect?
--
--Joel Stransky
stranskydesign.com
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django-***@googlegroups.com.
To unsubscribe from this group, send email to django-users+***@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
David Zhou
2010-02-16 19:53:32 UTC
Permalink
There are a couple of ways, but here's one off the top of my head:

Base template:
<script>
$(function(){
function1() { ... }
function2() { ... }
{% block additional_domready %}{% endblock %}
});
{% block additional_js }%}{% endblock %}
</script>

child template that extends base template:

{% block additional_domready %}
function3() { ... }
{% endblock %}

{% block additional_js %}
//js that runs outside of document.ready
{% endblock %}


-- dz
Post by Joel Stransky
Still very new to django so excuse the newbish questions.
This might be obvious but I need a smart solution.
I have a template that runs a jquery function at document ready which
defines a few other functions. I only need a couple of these functions in
the template I'm extending, the other I need tacked on to specific children
of the template.
<script type="text/javascript">
    $(document).ready(function(){
        //function 1
        $("#my_id").click(function() { /* do stuff */ });
        //function 2
        $("a.someClass").click(function() { /* do stuff */ });
        //function 3
        $("#my_other_id").hover(function() { /* do stuff */ });
    });
</script>
But what I need is to able to insert function 3 (or others) in a child of my
base template
{% block jquery %}
{{ block.super }}
//function 3
$("#my_other_id").hover(function() { /* do stuff */ });
{% endblock jquery %}
How do I achieve something to that effect?
--
--Joel Stransky
stranskydesign.com
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group, send email to
For more options, visit this group at
http://groups.google.com/group/django-users?hl=en.
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django-***@googlegroups.com.
To unsubscribe from this group, send email to django-users+***@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
Joel Stransky
2010-02-16 21:50:29 UTC
Permalink
That was my first thought too David but the %} both closes the js method
declaration and causes a syntax error.
Turns out however that you can have more than 1 domready function so I just
enclosed the global ones in a new .js file and appended a completely new
$(document).ready() function in the child.
Post by David Zhou
<script>
$(function(){
function1() { ... }
function2() { ... }
{% block additional_domready %}{% endblock %}
});
{% block additional_js }%}{% endblock %}
</script>
{% block additional_domready %}
function3() { ... }
{% endblock %}
{% block additional_js %}
//js that runs outside of document.ready
{% endblock %}
-- dz
Post by Joel Stransky
Still very new to django so excuse the newbish questions.
This might be obvious but I need a smart solution.
I have a template that runs a jquery function at document ready which
defines a few other functions. I only need a couple of these functions in
the template I'm extending, the other I need tacked on to specific
children
Post by Joel Stransky
of the template.
<script type="text/javascript">
$(document).ready(function(){
//function 1
$("#my_id").click(function() { /* do stuff */ });
//function 2
$("a.someClass").click(function() { /* do stuff */ });
//function 3
$("#my_other_id").hover(function() { /* do stuff */ });
});
</script>
But what I need is to able to insert function 3 (or others) in a child of
my
Post by Joel Stransky
base template
{% block jquery %}
{{ block.super }}
//function 3
$("#my_other_id").hover(function() { /* do stuff */ });
{% endblock jquery %}
How do I achieve something to that effect?
--
--Joel Stransky
stranskydesign.com
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group, send email to
.
Post by Joel Stransky
For more options, visit this group at
http://groups.google.com/group/django-users?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group, send email to
.
For more options, visit this group at
http://groups.google.com/group/django-users?hl=en.
--
--Joel Stransky
stranskydesign.com
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django-***@googlegroups.com.
To unsubscribe from this group, send email to django-users+***@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
bruno desthuilliers
2010-02-17 08:49:13 UTC
Permalink
Post by Joel Stransky
That was my first thought too David but the %} both closes the js method
declaration and causes a syntax error.
It shouldn't - unless you try to display the unrendered template in
your browser, of course.
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django-***@googlegroups.com.
To unsubscribe from this group, send email to django-users+***@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
Joel Stransky
2010-02-17 19:39:25 UTC
Permalink
Ok thanks. I never actually tried it, just assumed it wouldn't work. I'll
give it a shot next time I run into this.

On Wed, Feb 17, 2010 at 3:49 AM, bruno desthuilliers <
Post by bruno desthuilliers
Post by Joel Stransky
That was my first thought too David but the %} both closes the js method
declaration and causes a syntax error.
It shouldn't - unless you try to display the unrendered template in
your browser, of course.
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group, send email to
.
For more options, visit this group at
http://groups.google.com/group/django-users?hl=en.
--
--Joel Stransky
stranskydesign.com
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django-***@googlegroups.com.
To unsubscribe from this group, send email to django-users+***@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
bruno desthuilliers
2010-02-17 21:39:25 UTC
Permalink
Post by Joel Stransky
Ok thanks. I never actually tried it, just assumed it wouldn't work. I'll
give it a shot next time I run into this.
FWIW, your current solution is IMHO way cleaner (=> more readable,
more explicit, and less likely to break if / when something changes in
your base template), so I strongly suggest you stick to it.

My 2 cents...
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django-***@googlegroups.com.
To unsubscribe from this group, send email to django-users+***@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
Loading...