Working Hello World Ajax example via django pleeeease

[Eli_West]

I've been attempting the most basic ajax call (.load() ) through
django for over a month now - each time trying a different method or
tutorial none with success. Can someone post a working paradigm for
whatever django csrf, firefox, ect. workaround they use?

I can get jquery .load() to load content from an external file with
static files , no django. Same file served through django/templating
and the ajax is blocked. This is the general jquery call:

$(document).ready(function() {
$('.list').click(function () {
$('#message').load('namesinfo.htm li');
return false;
});
});

To make things worse I found that Firefox/Chrome breaks Jquery's
sample 'Tabs: load content via ajax' in the Themroller download. But
it works in IE :/. Same .load() calls occuring here. Just working w
static files no django. Could it be related to Firefox/Chrome?

I am pretty sure it is not: static file serving issues. I have heard
comments to follow django 'csrf / ajax' and included their sameOrgin
script to no avail. :

https://docs.djangoproject.com/en/dev/ref/contrib/csrf/

A similar issue even though this guys solution is hard to understand:

http://stackoverflow.com/questions/6643242/jquery-load-not-working-in-django

[Daniel Roseman]

The argument to `load` is the URL you want to load. If you want that to be served by Django, you need to pass in a URL that's handled by your Django urls.py. 'namesinfo.htm' seems unlikely to be a Django url.

--

DR.

[Joey Espinosa]

Daniel is right. The only way your code will work is if you've set up your argument to load() to be caught by urls.py.

Also, in your case, it seems like your argument to load() is a mix of URL and CSS selector... Make sure you're using a URL there.

Check out my blog for a very basic tutorial on getting AJAX to work in Django:

http://joelinux117.blogspot.com/2011/11/making-ajax-calls-in-django-using-dojo.html

It's using Dojo, but the same principle applies with jQuery (just make sure where the tutorial calls a URL, you're passing the URL as an argument to load().

--
Joey Espinosa
Software Engineer
http://about.me/joelinux

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To view this discussion on the web visit https://groups.google.com/d/msg/django-users/-/3CzEsK5NobAJ.
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.

[Joey Espinosa]

Btw, disregard what I said about mixing URL and CSS selectors. I forgot that load() can do that (I usually use ajax() or get()/post(), neither of which supports that). MY BAD!

--
Joey Espinosa
Software Engineer
http://about.me/joelinux

[Eli_West]

Thanks, I tried to stay clear of posting code because I've tried maybe
20 different ways and nothing seems to work. I have used the {% url %}
tag and yesterday competed - a 'ajax_user_search' tut using django Q
still no luck. This was the load call:

$( document ).ready( function() {
$( '#searchSubmit' ).click( function() {
q = $( '#q' ).val();
$( '#results' ).html( ' ' ).load(
'{% url userbase_user_search %}?q=' + q );
});
});

Upon setting everything up and clicking the tag, nothing happens as
usual. I'm going to try the tut posted below with high hopes - and I
am considering trying 'djaxice'

On Apr 13, 3:39 am, Daniel Roseman <dan...@roseman.org.uk> wrote:
> On Friday, 13 April 2012 08:08:19 UTC+1, Eli_West wrote:
>
> > I've been attempting the most basic ajax call (.load()  )  through
> > django for over a month now - each time trying a different method or
> > tutorial none with success. Can someone post a working paradigm for
> > whatever django csrf, firefox, ect. workaround they use?
>
> > I can get jquery .load() to load content from an external file with
> > static files , no django. Same file served through django/templating
> > and the ajax is blocked. This is the general jquery call:
>
> > $(document).ready(function() {
> >     $('.list').click(function () {
> > $('#message').load('namesinfo.htm li');
> >         return false;
> >     });
> > });
>
> > To make things worse I found that Firefox/Chrome breaks Jquery's
> > sample 'Tabs: load content via ajax'  in the Themroller download. But
> > it works in IE :/. Same .load() calls occuring here. Just working w
> > static files no django. Could it be related to Firefox/Chrome?
>
> > I am pretty sure it is not: static file serving issues. I have heard
> > comments to follow django 'csrf / ajax' and included their sameOrgin
> > script to no avail. :
>
> >https://docs.djangoproject.com/en/dev/ref/contrib/csrf/
>
> > A similar issue even though this guys solution is hard to understand:
>

> >http://stackoverflow.com/questions/6643242/jquery-load-not-working-in...

[Eli_West]

Thanks. I found another example that used get() and didn't seem to
work for me either:

http://mitchfournier.com/tag/ajax/

I guess I want an example that is simple as possible so I can try and
find where the issue it occuring. I'll try your example later today.

On Apr 13, 4:12 am, Joey Espinosa <jlouis.espin...@gmail.com> wrote:
> Btw, disregard what I said about mixing URL and CSS selectors. I forgot
> that load() can do that (I usually use ajax() or get()/post(), neither of
> which supports that). MY BAD!
>
> --
> Joey Espinosa

> Software Engineerhttp://about.me/joelinux

> On Apr 13, 2012 6:05 AM, "Joey Espinosa" <jlouis.espin...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Daniel is right. The only way your code will work is if you've set up your
> > argument to load() to be caught by urls.py.
>
> > Also, in your case, it seems like your argument to load() is a mix of URL
> > and CSS selector... Make sure you're using a URL there.
>
> > Check out my blog for a very basic tutorial on getting AJAX to work in
> > Django:
>

> >http://joelinux117.blogspot.com/2011/11/making-ajax-calls-in-django-u...

>
> > It's using Dojo, but the same principle applies with jQuery (just make
> > sure where the tutorial calls a URL, you're passing the URL as an argument
> > to load().
>
> > --
> > Joey Espinosa
> > Software Engineer
> >http://about.me/joelinux
> > On Apr 13, 2012 5:39 AM, "Daniel Roseman" <dan...@roseman.org.uk> wrote:
>
> >> On Friday, 13 April 2012 08:08:19 UTC+1, Eli_West wrote:
>
> >>> I've been attempting the most basic ajax call (.load()  )  through
> >>> django for over a month now - each time trying a different method or
> >>> tutorial none with success. Can someone post a working paradigm for
> >>> whatever django csrf, firefox, ect. workaround they use?
>
> >>> I can get jquery .load() to load content from an external file with
> >>> static files , no django. Same file served through django/templating
> >>> and the ajax is blocked. This is the general jquery call:
>
> >>> $(document).ready(function() {
> >>>     $('.list').click(function () {

> >>> $('#message').load('namesinfo.**htm li');

> >>>         return false;
> >>>     });
> >>> });
>
> >>> To make things worse I found that Firefox/Chrome breaks Jquery's
> >>> sample 'Tabs: load content via ajax'  in the Themroller download. But
> >>> it works in IE :/. Same .load() calls occuring here. Just working w
> >>> static files no django. Could it be related to Firefox/Chrome?
>
> >>> I am pretty sure it is not: static file serving issues. I have heard
> >>> comments to follow django 'csrf / ajax' and included their sameOrgin
> >>> script to no avail. :
>

> >>>https://docs.djangoproject.**com/en/dev/ref/contrib/csrf/<https://docs.djangoproject.com/en/dev/ref/contrib/csrf/>

>
> >>> A similar issue even though this guys solution is hard to understand:
>

> >>>http://stackoverflow.com/**questions/6643242/jquery-load-**
> >>> not-working-in-django<http://stackoverflow.com/questions/6643242/jquery-load-not-working-in...>

>
> >> The argument to `load` is the URL you want to load. If you want that to
> >> be served by Django, you need to pass in a URL that's handled by your

> >> Django urls.py. 'namesinfo.**htm' seems unlikely to be a Django url.

[Daniel Roseman]

On Friday, 13 April 2012 17:04:49 UTC+1, Eli_West wrote:

Thanks, I tried to stay clear of posting code because I've tried maybe
20 different ways and nothing seems to work. I have used the {% url %}
tag and yesterday competed - a 'ajax_user_search' tut using django Q
still no luck. This was the load call:

$( document ).ready( function() {
    $( '#searchSubmit' ).click( function() {
        q = $( '#q' ).val();
        $( '#results' ).html( '&nbsp;' ).load(
                    '{% url userbase_user_search %}?q=' + q );
    });
});

Upon setting everything up and clicking the tag, nothing happens as
usual. I'm going to try the tut posted below with high hopes - and I
am considering trying 'djaxice'

 

OK. So, next question: where is that Javascript? In which file? Is it inside the HTML template that is parsed by Django, or is it in a separate .js file that is served by the static server? The second won't work, because the `url` tag will not be resolved to the actual URL. In either case, have a look at the rendered output of that JS to see that it has the URL you expect.

--

DR.

[Kevin]

Here you go, a fully working AJAX "Hello World" example in Django:

http://www.dajaxproject.com/dajaxice/

I use both Dajax and Dajaxice for a few projects of mine, check out my profile site for a fully working AJAX website made in Django:

http://iamkevin.ca/

Django even has specific form widgets in 3rd party apps which use AJAX, such as django-selectable, see my full tutorial here:
http://www.pythondiary.com/tutorials/add-ajax-powered-quick-search-any-django-site.html

The thing is, when making an application, think about what the framework can do for you and look for solutions which work with the framework.  Sure you can use "naked" jQuery, but why, when some developer devoted months of his/her time to build something that "just works".  With Dajax for example, you can code almost 95% of your client-side script in Python.  I use this for the "Contact" form on my personal profile page provided above.  Django does all the form validation, and displays any errors to the user, all using AJAX, and almost no JavaScript coded by me.

To take it a step further, you can use Pyjamas, which is Google Web toolkit(GWT) ported to Python.  Most of the API is the same(according to the developers).  I even wrote a short tutorial on how to integrate Pyjamas with Dajaxice for some nice Django AJAX goodness:

http://www.pythondiary.com/tutorials/working-pyjamas-and-dajaxice.html

Hopefully these resources help.  Do it the Pythonic way!