Làm mới nội dung tab khi nhấp chuột trong các tab Giao diện người dùng JQuery

Question

Nội dung của TAB1 được tải bởi ajax từ url từ xa. Khi TAB1 được chọn, tôi phải chuyển sang TAB2 và sau đó quay lại TAB1 để làm mới nội dung đã tải.

Làm thế nào để làm mới nội dung được tải TAB1 khi nhấp vào tab của nó?

Edit: HTML code như sau

<div id="tabs"> 
    <ul> 
     <li><a href="url1">Tab1</a></li> 
     <li><a href="url2">Tab2</a></li> 
    </ul> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $tabs = $("#tabs").tabs({ 
      select: function(event, ui) { 
       $('a', ui.tab).click(function() { 
        $(ui.panel).load(this.href); 
        return true; 
       }); 
      } 
     }); 
}); 
</script> 

Answer 1

Trên "thành công" của cuộc gọi jQuery, bạn có thể thay thế html với html mới.

Bạn chưa đăng bất kỳ mã nào để có thể bạn đã làm điều này nhưng;

success: function(msg) { 
    $('.TabOne').html(msg); 
} 

các công trình trên nếu bạn trả lại html. Nếu bạn đang quay trở lại một đối tượng thì bạn có thể cần phải làm thêm công việc nhưng bởi và lớn ở trên nên làm việc.

Chỉnh sửa Tôi cũng nên đề cập đến .TabOne là tên lớp. Vì vậy, người giữ nội dung tab của bạn phải có một lớp TabOne để mã trên hoạt động.

Hãy nhớ rằng tên lớp không phải thực sự tồn tại dưới dạng kiểu để làm việc này.

Chỉnh sửa 2

Hmmm, tôi thấy những gì bạn đang cố gắng làm ngay bây giờ và tôi đang ở một chút mất mát. Sẽ thực hiện một số thử nghiệm và có thể lấy lại cho bạn.

Rất tiếc.

Answer 2

Tôi gặp vấn đề tương tự với một số nội dung ajax trong tab jQuery.

Tab tải biểu đồ hình khối nhưng nó sẽ chỉ hoạt động khi đó là tab bạn đã tải trước.

Tôi đã khắc phục vấn đề này với một loại công việc cheesy xung quanh nhưng hiệu quả.

tôi mất tất cả các mã flot tôi js và đổ nó vào một tập tin .js riêng biệt và đặt nó trong một hàm

function doFlotGraph(data){ 
    $.plot({plotcode}); 
}; 

Sau đó tôi đã sau trong tab

$.getScript('url/doFlotGraph.js',function(){ 
    doFlotGraph(data); 
}); 

này cho phép flot làm điều đó vì tài liệu sẵn sàng trong tab đã kết thúc vào thời điểm ajax $ .getScript được kích hoạt.

Sau đó, bạn có thể đặt ajax trong một dấu nhấp chuột cho tab đó.

Answer 3

1) Khi xác định các tab tải nội dung ajax, hãy đảm bảo sử dụng thuộc tính tiêu đề, đặt giá trị đó vào id của div đã tải. Trong trường hợp của tôi, tựa đề là "tab cảnh báo".Nếu không thì jquery tạo div có id phức tạp:

<li><a href="/alert/index" title="alert-tab">Alert</a></li> 

2) Bây giờ sử dụng bên trong này bất cứ trường hợp bạn muốn tải lại tab:

var href = "/alert/index/"; 
$("#alert-tab").load(href); 

Answer 4

Để thực hiện điều này ngay, bạn chỉ cần lưu liên kết toàn cầu trong quá trình tạo:

ui_tabs = $("#tabs").tabs(); 

Sau khi tất cả có thể sử dụng nó liên quan đến tải API

Ví dụ : Chuyển đổi tất cả các liên kết trên các phần của trang tab

$('#tabs .paging a').click(function(e){ 
    var selected = ui_tabs.tabs('option', 'selected'); 
    ui_tabs.tabs('url', selected, e.target.href); 
    ui_tabs.tabs('load', selected); 
    return false; 
}) 

Answer 5

Một cách đơn giản để làm mới một tab trong jQuery là sử dụng phương pháp tải:

$('#my_tabs').tabs('load', 0); 

Giá trị số là dựa trên chỉ số zero của tab bạn muốn làm mới.

Answer 6

Đây là cách tôi đã làm. Một điều cần lưu ý là tôi đã tìm thấy các ID được gán cho các DIV hiển thị nội dung của mỗi tab được đặt tên khá dễ đoán trước và luôn tương ứng với href của neo trong tab đã chọn. Giải pháp này phụ thuộc vào trường hợp đó, vì vậy nó có thể bị chỉ trích là "quá giòn" tôi cho là vậy. Biểu mẫu tôi đang kéo mã từ là một loại điều khiển có thể sử dụng lại có thể hoặc không thể được lưu trữ trong một tab, vì vậy đó là lý do tại sao tôi kiểm tra giá trị của parentID trước khi thực hiện .each().

//I get the parentID of the div hosting my form and then use it to find the appropriate anchor. 
var parentID = '#' + $('#tblUserForm').parent().attr('id'); 
//Trying to enable click on an already selected tab. 
if(parentID == '#ui-tabs-3') //The value of var parentID 
{ 
    $('#tabs a').each(function() { 
      if($(this).attr('href') == parentID) 
      { 
       $(this).bind('click', function() { 
        $(parentID).load(your_URL_here); 
       }); 
      } 
    }); 
} 

Answer 7

gặp khó khăn với vấn đề này vì các tab dường như giết các sự kiện nhấp chuột ... vì vậy tôi vừa mới sử dụng mousedown.

$("#tabs ul.ui-widget-header") 
.delegate("li.ui-tabs-selected","mousedown",function(){ 
    $tabs.tabs("load",$(this).index()); 
}); 

câu hỏi này đã được đăng cách đây không lâu, nhưng tôi hy vọng nó sẽ giúp ai đó.

Answer 8

điều đặt Ok cùng tôi có điều này cho sự kiện click của các tab jquery, div xung quanh có một id của tab, như thế này:

<div id="tabs"> 

sau được thực hiện trong các tài liệu chức năng sẵn sàng Các:

$('#tabs > ul > li > a').each(function (index, element) { 
    $(element).click(function() {   
     $('#tabs').tabs('load', index); 
    }); 

Nó đăng ký cho mỗi tab sự kiện nhấp chuột, với chỉ số của tab nhờ Scott Pier

tôi cũng có điều này trong tài liệu của tôi đã sẵn sàng để ngăn chặn caching

$("#tabs").tabs({ 
    ajaxOptions: { 
     cache: false, 
     error: function (xhr, status, index, anchor) { 
      $(anchor.hash).html(
     "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
     "If this wouldn't be a demo."); 
     } 
    } 
}); 

Answer 9

Tôi biết liên kết này cũ, nhưng tôi đã gặp phải tình huống tương tự. Tôi đã cố gắng hiểu và kết hợp tất cả những gì đã được nêu ở đây, nhưng nó vẫn không hoạt động hoặc nó sẽ làm rối tung những gì tôi có.

Tôi có một hộp thoại modal với 4 tab, chỉ số giá trị 0,1,2,3 và tôi muốn mở trên tab 1 như vậy trong mã của tôi có các dòng sau:

$("#tabs").tabs('select',1); 

và tab 1 sẽ luôn chứa dữ liệu hiển thị trước đó (nội dung html ajax) cho đến khi tôi nhấp vào một tab khác (ví dụ như tab 2) và sau đó quay lại (tới tab 1) ...vì vậy tôi đã làm như sau:

// this forces tab content update 
    $("#tabs").tabs('select',1); 
    $("#tabs").tabs('select',2); 
    $("#tabs").tabs('select',1); 

và nó làm việc :)

Answer 10

Bạn có thể dễ dàng loại bỏ các nội dung của tab đó được nhấp vào và tải lại nó với cùng một nội dung (hoặc bất cứ điều gì bạn muốn). Ví dụ:

$("#tabs").tabs({                 
    activate:function(event,ui){ 
    //Remove the content of the current tab 
    ui.newPanel.empty(); 
    //load the file you want into current panel 
    ui.newPanel.load('content'+(ui.newTab.index()+1)+'.php');             
    }                   
}); 

Trong trường hợp này, ví dụ nếu tab thứ hai được nhấp, bảng điều khiển được làm trống và nạp lại với content2.php

Answer 11

Kể từ khi câu hỏi này đã được trả lời nhiều lần trong một thời gian dài của thời gian, nó không thể làm tổn thương để đăng một bản cập nhật cho các phiên bản mới hơn của jquery. Tôi đang sử dụng jquery-ui 1.10.3 và những vụ tấn công mà Trevor Conn làm dường như không còn giá trị nữa. Tuy nhiên, cách tiếp cận của ông đã giúp tôi với một số sửa đổi. Hãy nói rằng tab tôi muốn làm mới được gọi là "tab_1" (id của mục danh sách)

<div id="tabs" class="tabs"> 
    <ul> 
     <li id="tab_1"> 
      <a href="my_link">tab one</a> 
     </li> 
     ...(other tabs)... 
    </ul> 
</div> 

Trong phương pháp javascript của tôi để làm mới nội dung tab, tôi viết (sử dụng jquery):

var tab = $('#tab_1'); 
var id = tab.attr('aria-controls'); 
var url = $('a',tab).attr('href'); 
$("#"+id).load(url); 

Thuộc tính "aria-controls" chứa id của div chứa nội dung tab. "kiểm soát khu vực" có thể là một cái tên hợp lý hơn, nhưng như là một enthousiast opera, tôi không phàn nàn. :-)

Answer 12

Tôi đã tìm được một công việc về vấn đề này. Sau khi thử tất cả các phương pháp này, không ai trong số họ làm việc cho tôi. Vì vậy, để đơn giản tôi đã đưa ra giải pháp này và trong khi nó không phải là cách thanh lịch nhất, nó vẫn làm công việc.

Đặt tiêu điểm trên một tab khác trước và sau đó trả tiêu điểm về tab bạn muốn làm mới.

$("#myTabs").tabs("option", "active", 0); 
$("#myTabs").tabs("option", "active", 1);