Загрузка данных после вызова ajax во вкладке

Я получаю данные из базы данных и использую вкладки jquery для ее отображения:

Внутри каждой вкладки я получаю дерево имен:

Затем, нажав на

, появится всплывающее окно с список пользователей:

Вот код для диалогового окна:

var addUserDlg, form; /*create and open pop up window to create a team*/ addUserDlg = $("#addUserDialog").dialog({ autoOpen: false, height: 650, width: 570, modal: true, position: { my: "center", at: "top" }, buttons: { "Create a tree": addUser, Cancel: function () { addUserDlg.dialog("close"); } }, close: function () { form[ 0 ].reset(); } }); $(document).on('click', '.createTree', function(){ addUserDlg.dialog("open"); var leader_role = $(this).data("id3"); $.ajax({ url: "comAssessment/hr_tree_list.php", method: "POST", data: {leader_role: leader_role}, success: function (data) { $('#users').html(data); } }); }); form = addUserDlg.find("form").on("submit", function (event) { event.preventDefault(); addUser(); });

И функция addUser:

/*function to add new user to team*/ function addUser() { var insert = []; if ($('input[name="chk"]:checked').length > 0) { $('.get_value').each(function () { if ($(this).is(":checked")) { insert.push($(this).val()); } }); var user_to_leader = $('#user_to_leader').val(); var team_role = $('#team_role').val(); insert = insert.toString(); $.ajax({ url: "comAssessment/hr_tree_insert.php", method: "POST", data: {insert: insert, user_to_leader:user_to_leader, team_role:team_role}, success: function (data) { location.reload(); addUserDlg.dialog("close"); } }); } }

Сейчас я обновляю всю страницу location.reload();, но она не выглядит красивой, потому что она открывает первую вкладку каждый раз. Как обновить только текущую вкладку после добавления новых пользователей?

ИЗМЕНИТЬ

Хорошо, я попытался получить индекс вкладки и обновить ее. Я добавил кнопку для тестирования:

Затем я удалил location.reload(); из функции успеха ajax, чтобы проверить, будет ли моя кнопка работать. Но это не работает. Я получаю только индекс, загрузка не происходит.

Ответы

Ответ 1

У вас есть две опции

Создайте содержимое html-вкладок на клиентах с помощью ajax и javascript.
Поместите привязку текущей вкладки в URL-адрес, чтобы вы могли отображать текущую вкладку, когда страница обновляется.

Вариант 1 - это много работы, поэтому теперь я собираюсь разработать вариант 2.

Замените текущий код инициализации этой вкладки следующим образом:

Для jQuery 1.11

<script>
$(function () {

    var url_hashtag_index = location.href.indexOf('#')
    var initial_tab = url_hashtag_index==-1 ? 0 : parseInt(location.href.slice(url_hashtag_index+1))

    $("#treeTabs").tabs({activate: tabSelected, active: initial_tab});

    function tabSelected(event,ui){
        var tab_index = $('#treeTabs').tabs("option", "active")
        var hashtag_index = location.href.indexOf('#')
        var url = hashtag_index==-1 ? location.href : location.href.slice(0,hashtag_index)
        location.replace(url+'#'+tab_index)
    }

});
</script>

Для jQuery 1.9 +

<script>
$(function () {

    var url_hashtag_index = location.href.indexOf('#') // check if # is un url
    var initial_tab = url_hashtag_index==-1 ? 0 : parseInt(location.href.slice(url_hashtag_index+1)) // if so get tab index

    $("#treeTabs").tabs({select: tabSelected, selected: initial_tab}); // set tab index and add listener for tab selection

    function tabSelected(event,ui){
        var hashtag_index = location.href.indexOf('#')
        var url = hashtag_index==-1 ? location.href : location.href.slice(0,hashtag_index) // remove existing tab from url
        location.replace(url+'#'+ui.index) // replace url with new tab index (replace -> no history in browser)
    }

});
</script>

Ответ 2

Я пытаюсь ответить на Manuel Otto Answer на вопрос, значительно упростив логику благодаря использованию свойства window.location.hash.

<script>
    $(function () {
        // Setup event for selecting a tab
        $("#treeTabs").tabs({ activate: tabSelected });

        // Bail if there is no hash as the first tab will load by default
        if (!window.location.hash) { return; }

        // Get the index
        var tabIndex = location.hash.split("#")[1]

        // Set the current index
        $("#treeTabs").tabs({ activate: tabSelected, active: tabIndex });
    });

    function tabSelected(event, ui) {
        window.location.hash = "#" + ui.newTab.index();
        return false; //disables browser anchor jump behavior
    }
</script>

Эта логика потерпит неудачу, если вы решили использовать HASH для чего угодно, кроме индекса вашей вкладки, но должны начать с решения. Если вам нужно более полное использование URL HASH, оставляйте комментарий ниже, и я был бы рад расширить ответ.

Ответ 3

Вы можете извлечь код из цикла, который заполняет содержимое вкладки и создает новый файл. Новый файл должен использовать staffid/hod из параметра querystring и вместо использования id из цикла. Затем на главной странице каждая вкладка получает пустой div с идентификатором сотрудника. Когда вы сначала загружаете страницу, используйте ajax для заполнения первой вкладки из нового script. Когда вы обновляете любую вкладку, просто используйте ajax, чтобы опубликовать изменение, и в случае успеха снова загрузите содержимое текущей вкладки в div. Еще лучше, верните обновленные результаты из сообщения и вставьте его в div.

Ответ 4

В настоящее время он не делает вкладки ajax (пока). Невероятно, никто еще не просил об этом, поэтому я просто так и не добрался до этого. Возможно, я мог бы это сделать в следующей версии.

Тем временем вы можете сделать что-то вроде этого:

 <div id="container">

   <a href="#panel-1" data-url="/some/url/path" class="tabs">I'm a tab</a>
      ...
      <div id="panel-1"></div>
      ...
 </div>

И затем в вашем javascript, имея что-то вроде:

  $('#container').easytabs();
    $('.tabs').click(function(){
     var $this = $(this);
     $($this.attr('href')).load($this.data('url'));
   });

Я думаю, что это обсуждение очень полезно для

Загрузка содержимого вкладки через Ajax