2

I'm using an AJAX request to handle some part of my app that deals with managing photos...the user can click on a '<' or '>' button to change the ordering of the photos. All works well, but only for the first time I click the button...subsequent clicks do not trigger anything.

Main template:

<script type="text/javascript">
$(function() {
    $(".manage_photo").click(function(event) {
        event.preventDefault();

        var id = $(this).attr("id");
        var action = $(this).attr("name");
        var data = { id: id, action: action };

        $.ajax({
            type: "POST",
            url: "{% url managePhotos %}",
            data: data,
            success: function(results) {
                $("#list").html(results);
            },
        });
    })
})
</script>

....

{% if photos %}
    <p><strong>{{ photos.count }} photo(s) added</strong></p>
    <div class="highslide-gallery">
        <div id="list">
            {% include "ajax/photos.html" %}
        </div>
    </div>
    <div class="cleaner"></div>
{% else %}
    <h5>Photos not yet added</h5>
{% endif %}

Code for ajax/photos.html:

{% for photo in photos %}
<div class="vehicle_photo">
    <button class="manage_photo" name="incr" id="{{ photo.id }}"
        {% if forloop.first %} disabled="disabled"{%endif %} style="float: left">
        &nbsp;<&nbsp;
    </button>
    <button class="manage_photo" name="decr" id="{{ photo.id }}" 
        style="float: right">
        &nbsp;>&nbsp;
    </button>
    <br />
    <a href="{{ photo.original_image.url }}" class="highslide" 
        onclick="return hs.expand(this)">
        <img class="ui-corner-all" src="{{ photo.thumbnail_image.url }}" />
    </a>
    <br />
    {{ photo.position_number }}
</div>
{% endfor %}

My view returns a render_to_response version of photos.html after changing the ordering for the selected photo, with results containing the queryset for all photos in that photo's set, and a status message ie. success, failed:

return render_to_response('ajax/photos.html', results)

What could be my issue? I tried the suggestions at: this SO question, but none work out for me. Any insight would be very much appreciated since I've been at this since yesterday.

Community
  • 1
  • 1
Stephen M
  • 809
  • 1
  • 10
  • 21
  • It's much easier to help if you remove all of the inline code and just post the final html that is sent to the browser. – James Montagne Jul 06 '11 at 12:53
  • Are you sure that request will be sent not only after first click? Please check in firebug + post responses here. – Andron Jul 06 '11 at 13:05
  • @Andron: Yes, it's sent only after the first click....I checked in firebug. But Rodolfo's answer below has worked – Stephen M Jul 06 '11 at 13:32

1 Answers1

0

when you do the $(function...) things that are in the DOM get bound, but when you replace stuff with other stuff, the new stuff is not bound. You could use the .live command to make it work for old and new stuff, or you could bind the new stuff again (run the $(".manage_photo").click(...) again after the ajax.
BTW, you could replace the block of ajax with a simple $("#list").load("{% url managePhotos %}")

Rodolfo
  • 4,155
  • 23
  • 38
  • It works like a charm Rodolfo...thank you so much for the help. I'm still learning this ajax/jQuery stuff so it's always good to learn something new. Thanks for the hint too :) – Stephen M Jul 06 '11 at 13:30