How to save css changes made in an $.ajax() call?

Question

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)

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
– charlietfl, Commented Jan 16, 2017 at 5: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
– ChidG, Commented Jan 16, 2017 at 5:28
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
– sid-m, Commented Jan 16, 2017 at 5:42

Jai · Accepted Answer · 2017-01-16 05:32:45Z

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.
}

answered Jan 16, 2017 at 5:32

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zorgan Over a year ago

Tried this and didn't work - height still reverts back to original value.

Collectives™ on Stack Overflow

How to save css changes made in an $.ajax() call?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related