javascript in django template not executed when request is sent via ajax

[Larry Martell]

I have a django template that has some javascript/jQuery code in it
that defines some keyup event handers. If a user goes to the URL
directly the javascript is executed, and the event handers all work
fine. There is also a field that they can type in that triggers the
same URL request to be sent via ajax. When they do this, it seems that
the html is rendered, but the javascript is not executed. I discovered
this by noticing that the page was rendered, but none of the
javascript event handers were being called. I proved this by adding:


<script type="text/javascript">
alert('here we are');
</script>

to the template, and the alert doesn't show when the request comes
from ajax. But if I go to the URL directly it does.

Is this a known issue? Is there some way I can get my javascript code
to run to install my event handlers when the request comes from ajax?

TIA!
-larry

[Jani Tiainen]

It's known limitation of your ajax request and has nothing to do with Django nor templates. Or well it might do.

Most of the javascript frameworks can extract script and inject it correctly to current DOM. Since you mention jquery I guess that you're using that for ajax queries so make sure that your $.ajax() has dataType attribute to set as 'html'. It should (according to docs) parse script parts correctly.

-larry

--
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.

--
Jani Tiainen

- Well planned is half done, and a half done has been sufficient before...

[Jani Tiainen]

I meant that if for some reason Django sends incorrect content type from a view or something like that your javascript framework might guess incorrectly your ajax request content type and not parse script tags.

[Larry Martell]

On Fri, Jun 29, 2012 at 4:51 PM, Jani Tiainen <red...@gmail.com> wrote:
> It's known limitation of your ajax request and has nothing to do with Django
> nor templates. Or well it might do.

Not really sure what you mean here. Are you saying this is a known
problem, and I should not expect it to work?

> Most of the javascript frameworks can extract script and inject it correctly
> to current DOM. Since you mention jquery I guess that you're using that for
> ajax queries so make sure that your $.ajax() has dataType attribute to set
> as 'html'. It should (according to docs) parse script parts correctly.

Yes, it does. The request is sent like this:

$.ajax({
url: url,
data: $form.serialize(),
dataType: 'html',
success: function (html, textStatus) {
$report
.html($('#report', html).html())
.css({
opacity: 1.0
});
style_preview_table();
}

And I have verified that all the non javascript portions of the
template are executed, but none of the javascript ones are.

[Larry Martell]

On Fri, Jun 29, 2012 at 4:54 PM, Jani Tiainen <red...@gmail.com> wrote:
> I meant that if for some reason Django sends incorrect content type from a
> view or something like that your javascript framework might guess
> incorrectly your ajax request content type and not parse script tags.

Is there a way I can test to see if this is occurring?

[Psamathos]

If your web server is in fact serving the content with the incorrect Content-Type header (You can verify this by inspecting the response in the Net tab of Firebug or Chrome) jQuery can convert the response regardless of the content-type if you specify a two space-separated values in your dataType. Try dataType: "text html" in your $.ajax function.

[Bill Freeman]

curl (or its windows equivalents) will tell you exactly what django sent, as
would poking around from a suitably placed pdb.set_trace()

[Larry Martell]

I've been poking around with the debugger. For reference, here's the code:

var $form = $('form.roll');
url = $form.attr('action');

var $report = $('#report');

$.ajax({
url: url,
data: $form.serialize(),
dataType: 'html',
success: function (html, textStatus) {
$report
.html($('#report', html).html())
.css({
opacity: 1.0
});
style_preview_table();
}

The html variable passed into the success function contains the entire
page, including the javascript. I tried doing:

$report.html(html)

But the parts of the page that were not the results (i.e. #report) all
were duplicated (the page was displayed within the page). But even
there, the javascript wasn't included in the page, even though is was
in the html variable.

$('#report', html).html() contained just the html, without the
javascript. What I need is some way to get both the javascript and the
html of $('#report') and then pass that into $report.html(). Are there
javascript or jQuery methods that will allow me to do that?

Alternatively I could extract the javascript from the html variable
passed into the success function. But then how would I make that part
of $report.html()?

[Larry Martell]

Just in case anyone is interested, I finally got this working.

I added a class to the javascript code, e.g.:

<script class='ajax' type="text/javascript">

And then in the ajax success function, added this:

$(html).filter('.ajax').each(function(){
$.globalEval($(this).text())
});