Обновление определенного раздела страницы

Question

В настоящее время у меня модальный, который удаляет элемент из моего списка данных. После выбора удаления я хочу обновить веб-страницу. На этом этапе он обновляет всю страницу и перенаправляет меня на вкладку Searches. Я хочу обновить только вкладку Lists. Как я могу это сделать?

Мой HTML:

<div class="row zero-margin"> 
     <div class="col-xs-12"> 
      <div id="tabstrip"> 
       <ul id="tab-strip-options"> 
        <li id="listItem1" class="k-state-active"> 
         Searches 
        </li> 
        <li id="listItem2"> 
         Lists 
        </li> 
       </ul> 
       <div class="saved-search-content"> 
        <div id="gridSearch"></div> 
       </div> 
       <div class="saved-list-content"> 
        <div id="gridList"></div> 
       </div> 
      </div> 
     </div> 
    </div> 

Мой JavaScript Функция:

function deleteItemsFromList(data) { 
    if(data.IsSuccess) { 
     window.location.reload(); 
     CloseModal("deleteSearchListModal"); 
     showSuccessMessage('List was successfully deleted!'); 
    } 
} 

Answer 1

решение для стороне сервера хранилища данных:

Самое простое решение для частичного обновления на вашем веб-страница должна использовать AJAX Запросы. Вы должны загружать содержимое списка из веб-источника при его обновлении.

$("#gridList").load("ajax/getListContent"); 

Конечно ваш ajax/getListContent должен генерировать правильную HTML подструктуры (без HTML, теги тела), как:

<div>...</div> 

Вообще создать источник данных по адресу ajax/getListContent, который вернет вам ваши данные структурированы в HTML, то в вашем коде вы можете сделать так:

function deleteItemsFromList(data) { 
    if(data.IsSuccess) { 
     $("#gridList").load("ajax/getListContent", function() { 
      CloseModal("deleteSearchListModal"); 
      showSuccessMessage('List was successfully deleted!'); 
     } 
    } 
} 

Answer 2

Я полностью игнорировать, если вы используете какой-то плагин, но если вы хотите Refre sh только часть всего HTML-документа, вы должны использовать AJAX и удалить из своего скрипта window.location.reload(). Что-то вроде этого:

function deleteItemsFromList(data) { 
    if(data.IsSuccess) { 
     $.ajax(/*params here*/).done(function(data){ 
      //refresh just the #gridList part 
      CloseModal("deleteSearchListModal"); 
      showSuccessMessage('List was successfully deleted!'); 
     } 
    } 
} 

Может быть, это не правильный порядок, но главное AJAX :)