Как обновить div без перезагрузки всей страницы?

Question

У меня есть div, и я хочу обновить его содержимое без перезагрузки всей страницы.

Я пробовал много раз со многими методами (ajax call, javascript и т. Д.), Но я этого не делал.

My div отображает все содержимое ModelName.all И в этом конкретном div мы можем добавлять новые объекты (благодаря форме) используемой модели.

Я показываю этот div благодаря частичному просмотру Rails.

В настоящее время я использую это, когда пользователь отправить форму:

$('#ArticlesDiv').html("<%= escape_javascript (render partial: 'articles') %>"); 

Но, кажется, мой частичный вид не имеет последнюю дату модели. Поскольку перед тем, как добавить новый объект, я вижу, например, 5 элементов, и после добавления нового объекта я снова вижу 5 элементов. Для целей тестирования я использую javascript alert, который отображает ModelName.all.count

И появляется предупреждение 5! Но когда я смотрю на содержимое моей базы данных (до предупреждения), я могу видеть 6 элементов! И когда я обновляю свою страницу вручную, div отображает 6 элементов.

Код для объяснения:

Основной вид:

<div id="ArticlesDiv"> 
    <%= render(:partial => "articles") %> 
</div> 

_articles (частичный вид):

<script> 
    alert('<%=Article.all.count%>'); 
</script> 

<% Article.all.each do |article|) %> 

<strong><%= article.name %></strong><br /> 

<% end %> 

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

Answer 1

Вы можете иметь содержимое div в частичном и загружать только контент, используя URL-адрес: /divcontents. Вы можете обновить <div> с помощью .load():

$('#ArticlesDiv').load("/divcontents"); 

Answer 2

Попробуйте использовать функцию загрузки JQuery, вы должны сделать что-то вроде этого:

HTML:

<div id="div1"></div> 
<button type="button" id="button">Test</button> 

JQuery:

$(document).ready(function(){ 
    $("#button").click(function(){ 
     $("#div1").load("demo_test.txt"); 
    }); 
}); 

Answer 3

<script> 
$(document).ready(function() { 
    // will call refreshPartial every 5 seconds 
    setInterval(refreshPartial, 5000) 

}); 

// calls action refreshing the partial 
function refreshPartial() { 
    $.ajax({ 
    url: "page_url", 
    dataType: 'script', 
    format: 'js' 
}) 
} 
</script>