Как перезагрузить конкретный div с помощью JQuery?

Question

В моем приложении rails у меня есть панель задач. Выбрав флажок, мне нужно отфильтровать содержимое на панели задач. Для этого я должен перезагрузить определенный div.

Я пробовал следующее.

$("input:checkbox").change(function(){ 
    '<%@final_tasks= @final_tasks.find(142)%>' 
    $("#task_content").reload(); 
}); 

Здесь task_content это имя класса дел. Но мой код не работал. Пожалуйста, помогите мне ..

Answer 1

Чтобы получить новую информацию, вы должны отправить какой-либо запрос GET вашему контроллеру.

$("input:checkbox").change(function(){ 
    $.get('/your_controller/task_content', function(data) { 
    $("#task_content").html(data.final_tasks); 
    } 
}); 

Так что у вашего контроллера будет какое-то действие поиска. Давайте назовем это task_content

def task_content 
    @final_tasks= @final_tasks.find(142) 
    # though I assume you want this to be more dynamic so this is just an example 
    respond_to do |format| 
    format.json {render json: {final_tasks: @final_tasks} } 
    end 
end 

Тогда не забудьте добавить маршрут для этого в вашем routes.rb:

get 'your_controller/task_content'  => 'your_controller#task_content' 

Answer 2

Попробуйте как этот

function get_data(val) 
{ 
    $.post('path_fro_data.php',{'value':val}, 
      function(data) 
       { 
       $("#div_task").html(data); 
       } 
     ); 

} 

в HTML

<input type="checkbox" id="check_1" name="check_1" value="1" onchange="get_data(this.value);"/> 
<input type="checkbox" id="check_2" name="check_2" value="2" onchange="get_data(this.value);"/> 

в сценарии сервера (для примера .php-страница) извлекают данные из базы данных, соответствующей отправленным данным.

Answer 3

Создал плагин с именем refresh, поэтому, когда вам нужно обновить контент, вы можете вызвать функцию. Пожалуйста, проверьте приведенный ниже код.

$.fn.refresh = function(options) { 

    var options = { 
     contentURL : 'xxx.html' 
    }; 
    options = $.extend({},options); 
    return this.each(function() { 
     var obj = $(this); 
     setTimeout(function() { 
      obj.fadeOut('slow').load(options.contentURL).fadeIn('slow');  
     }, 2000);    
    }); 

}; 
$('#task_content').refresh();