CODEWITHSUNDEEP
jqueryajaxdjango
deathstroke
deathstroke

Reputation: 526

Django- click event doesn't bind to div element

I've been trying to bind a click event to a div element in an html file, that is part of a Django project. My menu.html is as follows-

{% extends "base.html" %}

{% block title %}Today's menu{% endblock %}

{% block head %}
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
        </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#plus").bind("click", function () {
                $.get("/test/"+this.id+"/", function(data) {
                    if (data.fact_type=="T") {
                         item = data.fact_note;
                    }
                    $('#result')[0].innerHTML=item;
                });
            });
        });
        </script>

{% endblock %}

{% block content %}

{% for id,image,menu in imageList %}
<div style = "display:inline-block">
    <img src="{{ MEDIA_URL }}{{ image }}">
    <p>{{ menu }}</p>
    <div id="plus"><span>+</span></div>
    <div id="result">Click to add.</div>
</div>

{% endfor %}
{% endblock %}

This template has been extended from the base.html template file, which is-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
</head>
<body>
    <h1>Welcome</h1>
    {% block content %}{% endblock %}
    {% block footer %}
    <hr>
    <p style="display:block>Footer.</p>
    {% endblock %}
</body>
</html>

Here's my views.py function - 

def order(request, product_id):
    message = {"fact_type": "", "fact_note": ""}
    if request.is_ajax():
        fact = get_object_or_404(Fact, id=fact_id)
        message['fact_type'] = fact.type
        message['fact_note'] = fact.note
    else:
        message = "Error."
    return HttpResponse(simplejson.dumps(message), content_type='application/json')

But the click event doesn't bind to the div with the id plus. I've tried changing bind() to on() but with no luck.

Thinking this was caused because the document was probably not being ready, I also tried $(document).on('click','#plus',function () { }); , yet it didn't do anything.

Upvotes: 0

Views: 1296

Answers (1)

karthikr
karthikr

Reputation: 99620

The issue, is, it is absolutely essential that the IDs on a document are unique. Use a class in conjunction with a unique ID, and your code should work.

Example:

{% for id,image,menu in imageList %}

    <div style = "display:inline-block">
        <img src="{{ MEDIA_URL }}{{ image }}">
        <p>{{ menu }}</p>
        <div id="plus-{{id}}" class="plus"><span>+</span></div>
        <div id="result-{{id}}" class="result">Click to add.</div>
    </div>
{% endfor %}

And your script would look like this:

<script type="text/javascript">
    $(document).ready(function() {
        $(".plus").on("click", function () {
            var id = $(this).attr('id').split('-')[1]; // gives you the id
            $.get("/test/"+ id +"/", function(data) {
                if (data.fact_type=="T") {
                     item = data.fact_note;
                }
                $('#result-' + id).html(item); 
            });
        });
    });
    </script>

Upvotes: 3

Related Questions