0

I have an $.ajax() call to increase the height of my div every time .comment_form is submitted (ajax comment). So this works fine but it doesn't save the new height so when I refresh the page it reverts back to its initial height. Here's my js:

base.js

$('.comment_form').on('submit', function(e) {
e.preventDefault();

var url = window.location.href.split('?')[0];

$.ajax({
    type: 'POST',
    url: url,
    data: {
        text: $('.comment_text').val(),
        csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
},
    success: function(data) {
        console.log(data.text_length);
        if(data.text_length < 15) {
            var increaseHeight = 30;
        }
        else {
            increaseHeight = (data.text_length) + 20;
        }

        $('.commentsContainer').append("<div class='comment_div'><h3>" + data.username + "</h3><p>" + data.text + "</p></div>");
        $('.commentsContainer').css('height', '+=' + increaseHeight);
    },

});

css

.commentsContainer {
    height: 600px;
}

django views.py

    ...

    ajax_comment = request.POST.get('text')
    comment_length = len(str(ajax_comment))

    comments = Comments.objects.all()

    if request.is_ajax():
        if comment.is_valid():
            comment = Comments.objects.create(comment_text=ajax_comment, author=str(request.user))
            comment.save()
            username = str(request.user)
            return JsonResponse({'text': ajax_comment, 'text_length': comment_length, 'username': username})

    return render(request, 'article.html', context)
Zorgan
  • 8,227
  • 23
  • 106
  • 207
  • Javascript has no persistence between page loads. You will need to store page state in localStorage, cookie or send to server using ajax and store there and read stored value and react accordingly during page loading process – charlietfl Jan 16 '17 at 05:27
  • Is the data about the previously saved comment present on the browser when the page is reloaded? If so, it would be easy to calculate the length in javascript on document load and modify the element height using the same algorithm you use in your ajax callback. if not, you will need to store that information somewhere as @charlietfl suggests. – ChidG Jan 16 '17 at 05:28
  • Refer this http://stackoverflow.com/questions/33784443/how-modify-a-property-of-external-css-file-using-jquery-javascript – Ghanshyam Baravaliya Jan 16 '17 at 05:32
  • The solution to this problem can be implemented as suggested by others. However, this might not be a scalable thing to do. The page length will keep on increasing as the number of comments increases, and you might end up with a long page with a long scroll. A better approach would be to keep the size of the comments fixed and display top few comments initially. Load more comments as and when required. – sid-m Jan 16 '17 at 05:42

1 Answers1

0

You can use window.localStorage() to store the height and first you have to check if there is any height for this stored in like: 

success: function(data) {
  console.log(data.text_length);
  var ls = window.localStorage, // <---------Initialize here 
      increaseHeight;
  if (data.text_length < 15) {
    increaseHeight = ls.getItem('height') || 30; // <-----check here if there is any
  } else {
    increaseHeight = (data.text_length) + 20;
  }

  $('.commentsContainer').append("<div class='comment_div'><h3>" + data.username 
                                  + "</h3><p>" + data.text + "</p></div>");
  $('.commentsContainer').css('height', '+=' + increaseHeight);
  ls.setItem('height', $('.commentsContainer').css('height')); //<-----store after adding.
}
Jai
  • 74,255
  • 12
  • 74
  • 103