Блог

У меня есть модальный режим на основе начальной загрузки, который позволяет пользователям добавлять и просматривать сообщения:

 <div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="prodCommentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">amp;times;</button>
        <div class="modal-title">Comments</div>
      </div>

      <div class="modal-body" data-no-turbolink>
        <span id="modal-body-span">
          <%= render partial: 'posts/getposts' %>
        </span>
      </div>

      <div class="modal-footer">
        <%= form_for(@micropost) do |f| %>
          <div class="field" id="post-box">
            <%= f.text_area :content, placeholder: "Write a post..." %>
          </div>
          <div class="post-submit">
            <%= f.submit "Post", id: "post_button", class: "btn btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
  

Чтобы оставить модальный открытым при добавлении нового сообщения, у меня есть следующий javascript:

 $(document).ready(function() {
    $('#post_button').click(function (e) {
        e.preventDefault();

        $.post('/posts',
            $('#new_post').serialize(),
            function (data, status, xhr) {
                $('.modal-body').load(document.URL ' #modal-body-span');
                $('.modal-body').scrollTop($('.modal-body').prop("scrollHeight"));
                $('#post_content').val('');
            });
    });
});
  

Модальный выполняется в стиле чата, где самые новые сообщения добавляются внизу. У меня есть отдельный javascript, который автоматически прокручивает область модального тела до самого низа при первом открытии модального. Но то, что я не могу заставить работать, — это прокрутка вниз после отправки нового сообщения (пока модал все еще открыт). Я заметил несколько вещей:

• Если я напечатаю $(‘.modal-body’).prop(«scrollHeight») до и после загрузки, значение не изменится.
• Если я прокручиваю сообщения вверх, а затем вместо этого использую большое значение, например $(‘.modal-body’).scrollTop(10000) , оно прокручивается вниз после отправки, но до нижней части предыдущего сообщения.

Кажется, что scrollheight обновляется позже, и пока это не произойдет, scrollTop будет прокручиваться максимум до старого значения. Есть идеи?

После многих, многих попыток, наконец, нашел что-то, что работает (событие ajaxComplete). Мне также нужно было решить проблему, из-за которой новые сообщения могли быть добавлены с момента последней перезагрузки страницы / модала, и я хотел получить самый последний и лучший контент в модале.

 $(document).ready(function() {
    $('#post_button').click(function (e) {
        e.preventDefault();

        $.post('/posts',
            $('#new_post').serialize(),
            function (data, status, xhr) {
                $('.modal-body').load(document.URL ' #modal-body-span');
                $('#post_content').val('');
            });
    });

    $(document).on('show.bs.modal', '.modal', function () {
        $('.modal-body').load(document.URL ' #modal-body-span');
    });

    $(document).ajaxComplete(function() {
        $('.modal-body').scrollTop($('.modal-body').prop("scrollHeight"));
    });

    $('#myModal').on('shown.bs,modal', function () {
        $('.modal-body').scrollTop($('.modal-body').prop("scrollHeight"));
    });
});    
  

Если есть лучшие или более элегантные решения, все равно хотелось бы их услышать.