Django: Jquery click function not working in Ajax

Question

I have been working through the Tango with Django exercises to cut my teeth into Django. Almost done but having a problem with the Ajax part.

Ajax function to auto_add a page is not being called. Idk what the problem is since the other functions are being called. On the shell prompt, there is no call to the ajax function at all. Help needed.

Pertinent code attached. It is the same as on the website link above. static/rango-ajax.js

  $('.rango-add').click(function(){
      var catid = $(this).attr("data-catid");
      var title = $(this).atrr("data-title");
      var url = $(this).attr("data-url");
      $.get('/rango/auto_add_page/', {category_id: catid, url: url, title: title}, function(data){
          $('#pages').html(data);
          me.hide();
      });
  });

templates/rango/category.html

{% if user.is_authenticated %}
    <button data-catid="{{category.id}}" data-title="{{ result.title }}" data-url="{{ result.link }}" class="rango-add btn btn-mini btn-info" type="button">Add</button> 
{% endif %}

rango/views.py

@login_required
def auto_add_page(request):
    context = RequestContext(request)
    cat_id = None
    url = None
    title = None
    context_dict = {}
    if request.method == 'GET':
        cat_id = request.GET['category_id']
        url = request.GET['url']
        title = request.GET['title']
        if cat_id:
            category = Category.objects.get(id=int(cat_id))
            p = Page.objects.get_or_create(category=category, title=title, url=url)
            pages = Page.objects.filter(category=category).order_by('-views')

            #Adds our results list to the template context under name pages. 
            context_dict['pages'] = pages

    return render_to_response('rango/page_list.html', context_dict, context)

rango/urls.py

urlpatterns = patterns('', 
        url(r'^$', views.index, name='index'),
        url(r'^goto/$', views.track_url, name='track_url'),
        url(r'^add_category/$', views.add_category, name='add_category'),
        url(r'^auto_add_page/$', views.auto_add_page, name='auto_add_page'),

Complete code is at this link.

@RajaprabhuAravindasamy is there any event like $('.rango-add').on(function(){ ?? I'm not sure about that — Anoop Joshi P
– Anoop Joshi P, Commented Jun 27, 2014 at 10:30
@AnoopJoshi yeah, just noticed that.. that's a wrong signature.. — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Jun 27, 2014 at 10:32
@Timmay if that element is loaded from ajax, then use $(document).on("click",'.rango-add',function(){ — Anoop Joshi P
– Anoop Joshi P, Commented Jun 27, 2014 at 10:34

Héctor Medina · Accepted Answer · 2014-12-28 03:50:15Z

your code is good, the only thing what you have to do is to define your template in /tango/templates/rango/page_list.html. This template have the following code:

 {% if pages %}
<ul>
{% for page in pages %}
   <li>
   <a href="{% url 'goto' %}?page_id={{page.id}}"> {{ page.title}}</a>
   {% if page.views > 1 %}
      ({{page.views}} views)
   {% elif page.views == 1 %}
      ({{page.views}} view)
   {% endif %}
   </li>
{% endfor %}
</ul>
{% else %}
   <strong> No Pages currently in category. </strong>
{% endif %}

And inside of your category template you must define the following code:

% if category %}
    {% if user.is_authenticated %}
        <a href="/rango/category/{{ category_name_url }}/add_page/"> Add a new Page</a> <br>
    {% endif %}
    {% if pages %}
    <div id="pages">
        <ul>
        {% for page in pages %}
            <li>
                <a href="{% url 'goto' %}?page_id={{page.id}}"> {{ page.title}}</a>
            {% if page.views > 1 %}
                ({{page.views}} views)
            {% elif page.views == 1 %}
                ({{page.views}} view)
            {% endif %}
            </li>
        {% endfor %}
        </ul>
     </div>
    {% else %}
        <strong> No Pages currently in category. </strong>
    {% endif %}
{% else %}
    The specified category {{ category_name }} does not exist!
{% endif %}

Rob Cutmore · Accepted Answer · 2015-02-04 12:36:23Z

I'm working through this section of the tutorial now and just want to add to Héctor's answer. To avoid duplicating the code to display the list of pages I did the following:

I added a get_page_list() method to tango/rango/templatetags/rango_extras.py, similar to the get_category_list() method used to display a list of categories in an earlier section of the tutorial.

from rango.models import Page

@register.inclusion_tag("rango/page_list.html")
def get_page_list(category):
    pages = Page.objects.filter(category=category) if category else []
    return {'pages': pages}

Then we just need to load rango_extras and call the get_page_list() method in tango/templates/rango/category.html.

{% extends 'rango/base.html' %}

{% load rango_extras %}

<!-- Existing code -->

{% if category %}

    <!-- Existing code to show category likes and like button -->

    <div id="page_list">
        {% get_page_list category %}
    </div>

    <!-- Existing code to show search if user is authenticated -->

{% else %]
    The specified category {{ category_name }} does not exist!
{% endif %}

This allows you to display the list of pages when a category page is first loaded and then refresh it if a category is added from the search area, without having to duplicate any code.

Collectives™ on Stack Overflow

Django: Jquery click function not working in Ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related