jquery not appending more than 20 times in ajax with django

i am working on blog project, when i click submit post would be created and ajax will live reload the page. its working as i expected but as soon as my post reaches 20 it would stop appending to that perticular div, but the model object is being created correctly,when i go to admin there would 25,35 or 50 model object but only first 20 would be appended?

ajax

$(document).ready(function(){
  // $("button").click(function() {
  //   $("html, body").animate({
  //     scrollTop: $('html, body').get(0).scrollHeight
  //   }, 2000);
  // });
  $(document).on('submit','#post_form',function(e){
    e.preventDefault();

    $.ajax({
      type: 'POST',
      url:"{% url 'create' %}",
      data:{
        message: $('#message').val(),
        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
      },
      success:function(){

      }
    });
  });

  setInterval(function(){
    $.ajax({
      type:'GET',
      url:"{% url 'comments' %}",
      success:function(response){
        $('.display').empty();
        for(var key in response.comments){
          if (response.comments[key].name != '{{request.user}}'){
            var temp = "<div class='message_area'><p id = 'author'>"+response.comments[key].name+"</p><p id='messagetext'>"+response.comments[key].message+"</p></div><br>"
            $(".display").append(temp);
          }
          if (response.comments[key].name == '{{request.user}}'){
            var user_temp = "<div class='message_area_owner'><p id='messagetext_owner'>"+response.comments[key].message+"</p></div><br><br><br>"
            $(".display").append(user_temp);
          }
        }
      },
      error:function(response){
      console.log("no data found")
      }
    });
  }, 500);
});

html

{% if request.user.is_authenticated %}
  <div class="display"></div>
  <div class="input">
    <form id="post_form">
    {% csrf_token %}
      <input type="text" id="message" name = 'message' autocomplete="off" onfocus="this.value=''">
      <button type="submit" id="submit" onclick="scroll()">SENT</button>
    </form>
  </div>
{%else%}
  <a class="btn btn-danger" href="{% url 'login' %}" style="text-align: center;">login</a>
  <a class="btn btn-danger" href="{% url 'register' %}" style="text-align: center;">register</a>
{% endif%}

views and models as normal

when i press post btn model object is getting created but not appending to .display div if it has already 20 divs in that

10 thoughts on “jquery not appending more than 20 times in ajax with django”

  1. actually my question is why you want to get all comments via ajax? the object has some comments available when user requested the page, so you could render that available ones to the template. and just use ajax to get the new one that user may add. the last one and also it’s easier to get this last one in the success method of ajax itself when comment has been sent and if it was successfully added to database. also you may need append function in javascript to append the response to the dom. and use render_to_response in the django part so to render a pace of template which contains the comment box(some magic use component like a frontend framework) and then append that pace of rendred html to the dom.

    Reply

Leave a Comment