jQuery UI tabs обновить содержимое после отправки формы

Question

Я использую вкладки пользовательского интерфейса jQuery, загружая внешнюю форму на вкладках. Форма устанавливается для отправки при нажатии на флажок в форме. Форма отправляется с использованием ajax. На что я ищу ответ, нужно обновить содержимое вкладки после отправки формы, но мне не повезло найти ответ.

$(function() { 
$("#tabs").tabs({ 
    cache: true, 
    beforeLoad: function(event, ui) {   
     ui.jqXHR.error(function() { 
      ui.panel.html("Can't load content. Please call support."); 
     }); 
     if(!($.data(ui.tab[0], "cache.tabs"))) { 
      return $(ui.panel).html("<div align='center'><img src='images/loader.gif'><p><strong>Loading...</strong></p></div>"); 
     } 
    } 
}); }); 

Вкладки генерируются с использованием PHP загрузки переменных из БД:

<div id="tabs"> 
     <ul> 
      <?php 
      $sql = mysql_query("SELECT username, name FROM members ORDER BY username") or die(mysql_error()); 
      while($row = mysql_fetch_array($sql)) { 
       echo "<li><a href='tasks.php?user=" . $row['username'] . "'>" . $row['name'] . "</a></li>\n"; 
      } 
      ?>    
     </ul>  
    </div> 

Форма находится в файле tasks.php и представить сценарий:

$(".checkbox").click(function(){ 
$.ajax({ 
    type: "POST", 
    url: "update-task.php", 
    data: $("#form1").serialize() 
}); }); 

Он работает идеально. При нажатии на флажки с классом «.checkbox» форма отправляется и база данных обновляется. Но я хотел бы, чтобы текст на вкладке имел другой цвет, и список прибегал к тому, чтобы отмеченные элементы перемещались снизу, когда форма была отправлена ​​(я планировал сделать это на сервере с помощью PHP). Для этого мне нужно, чтобы содержимое на вкладке обновлялось, но я не знаю, как это сделать. Лучшая догадка добавить это в форме АЯКС представить:

success: function() { 
    // Something that refreshes tab content 
} 

Но я понятия не имею, что делать. Есть идеи?

/Carl

Answer 1

Попробуйте это:

success: function() { 
    var tabId = $("#tabs").tabs("option", "active"); 
    $("#tabs").tabs("option", "active", tabId); 
} 

Answer 2

Невозможно использовать метод обновления?

$("#tabs").tabs("refresh"); 

http://api.jqueryui.com/tabs/#method-refresh

Тем не менее, я не знаю, почему вам нужно обновить, чтобы изменить цвет шрифта. Похоже, вы бы просто сделать это прямо в вашей функции успеха:

success: function() { 
    $('.my-selector').css('color', 'orange'); 
}