Django JQuery комментирует слишком много раз - PullRequest
Новая
       9

Django JQuery комментирует слишком много раз

0 голосов
/ 29 ноября 2010

Я изменил свои comments/form.html и comments/posted.html для работы аналогично Facebook, т.е. вы публикуете комментарий , затем данные posted перезагружаются и добавляются к определенному div с заданным ID.

Проблема, с которой я столкнулся, заключается в том, что она, кажется, публикует все данные для количества форм.

Таким образом, сценарий такой: у меня 5 форм, одна с данными в нем, и если я нажимаю на комментарий, он отправляет данные, 1 успешно, но 4 возвращаются пустыми. 

<div id="commentload"></div>
<div class="comments">
    <form action="{% comment_form_target %}" method="post" class="comment-form">
    {% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %}
    {% for field in form %}
        {% if field.is_hidden %}
            {{ field }}
        {% else %}
        {% if field.errors %}{{ field.errors }}{% endif %}
            <p
            {% if field.errors %} class="error"{% endif %}
            {% ifequal field.name "honeypot" %} style="display:none;"{% endifequal %}>
            </p>
        {% endif %}
    {% endfor %}
    <textarea id="id_comment" rows="1" cols="60" name="comment" class='id_comment'></textarea>
    <p class="submit">
        <input type="submit" name="post" class="submit-post blue comment_submit" value="{% trans "Comment" %}" id="button" style="float:right;margin-top:-6px;margin-bottom:4px;"/>
    </p>
    <div class="clearfix"></div>
    </form>

</div>

И тогда мой jQuery выглядит следующим образом 

<script type="text/javascript">
    $(document).ready(function(){
        // Here it runs a simple each statement to apply a unique ID to each comment-form
        $('.comment-form').each(function(){
            var element = $(this).find('#id_object_pk').val();
            $('#commentload').attr('id','commentload'+element);
            $(this).attr('name', element);
            $(this).attr('id', element);
            $(this).find('#button').attr('id', element);
            $(this).find('#id_content_type').attr('id', 'id_content_type' + element);
            $(this).find('#id_timestamp').attr('id', 'id_timestamp' + element);
            $(this).find('#id_security_hash').attr('id', 'id_security_hash' + element);
            $(this).find('#id_comment').attr('id', 'id_comment' + element); 
        });

        $(".comment_submit").live("click",function() {
            var ID = $(this).attr('id');

            var content_type = $('#id_content_type'+ID).val();
            var timestamp = $('#id_timestamp'+ID).val();
            var security_hash = $('#id_security_hash'+ID).val();
            var comment = $('#id_comment'+ID).val();
            var dataString = 'content_type='+ content_type +'&timestamp='+ timestamp +'&security_hash=' + security_hash + '&comment=' + comment + '&object_pk=' + ID;

            if (comment=='') {
                alert('Please enter a comment');
            } else {
                $('#id_comment'+ID).val('').addClass("greyout");
                $.ajax({
                    type: "POST",
                    url: "{% comment_form_target %}",
                    data: dataString,
                    cache: false,
                    success: function(html){
                        $("#commentload"+ID).append(html);
                        $('#id_comment'+ID).val('').removeClass("greyout").focus();
                    }
                });
            }
            return false;
        });
    });
</script>

HTML ВЫХОД Разница между формами, очевидно, идентификатор для каждого 

<div id="wall-comments">
    <div class="comments">
    <form action="/comments/post/" method="post" class="comment-form" id="114">
        <input type="hidden" name="content_type" value="wall.post" id="id_content_type114">
        <input type="hidden" name="object_pk" value="114" id="id_object_pk">
        <input type="hidden" name="timestamp" value="1291370494" id="id_timestamp114">
        <input type="hidden" name="security_hash" value="2d208d05d725528dfef940d8a5b520362faa3317" id="id_security_hash114">
        <textarea id="id_comment114" rows="1" cols="60" name="comment" class="id_comment" style="height: 24px; overflow-x: hidden; overflow-y: hidden; "></textarea>
        <p class="submit">
            <input type="submit" name="post" class="submit-post blue comment_submit" value="Comment" id="114" style="float:right;margin-top:-6px;margin-bottom:4px;">
        </p>
        <div class="clearfix"></div>
    </form>
    </div>
</div>

1 Ответ

1 голос
/ 30 ноября 2010

Вы связываете функцию щелчка слишком много раз. Вы должны только вызвать .live ("click", function () {}); Один раз на страницу загрузки. Или же вы должны использовать die () для отмены привязки функций перед повторным вызовом live ().

Я все еще думаю, что это ответ. Измените вызов .live на: 

$(".comment_submit").die("click").live("click",function() {
    var ID = $(this).attr('id');

    var content_type = $('#id_content_type'+ID).val();
    var timestamp = $('#id_timestamp'+ID).val();
    var security_hash = $('#id_security_hash'+ID).val();
    var comment = $('#id_comment'+ID).val();
    var dataString = 'content_type='+ content_type +'&timestamp='+ timestamp +'&security_hash=' + security_hash + '&comment=' + comment + '&object_pk=' + ID;

    if (comment=='') {
        alert('Please enter a comment');
    } else {
        $('#id_comment'+ID).val('').addClass("greyout");
        $.ajax({
            type: "POST",
            url: "{% comment_form_target %}",
            data: dataString,
            cache: false,
            success: function(html){
                $("#commentload"+ID).append(html);
                $('#id_comment'+ID).val('').removeClass("greyout").focus();
            }
        });
    }
    return false;
});
...