1

loadメソッドを介したjQueryUIタブのリロードに関する投稿はたくさんありますが、1.9以降では機能しないようです。これをフィドルで表示する方法を見つけたいと思いますが、そうではないので... 1.8以降で設定された次のネストされたタブでは毎回更新ボタン/機能が機能しますが、1.9では1回しか機能しないことに注意してください+、その後失敗します。コンテキストでは、（wordpressの下でphpを介して動的コンテンツをロードする）それはまったく機能しません。ajaxStart（）ajaxStop（）関数呼び出しによると、更新ボタンがクリックされるたびにajax呼び出しが行われますが、コンテンツ（タブEまたはタブA/サブ親Eで日付/時刻を確認してください））は、＃refreshボタンの最初のクリックでのみ再ロードされ、それ以降のクリックでタブコンテンツを再ロードできません。

stye.css

div.clear { clear:both; }
#refresh {  position: relative; top:-40px; left:300px; }
#loading 
{   display:none; 
    position: absolute; 
    top:100px; 
    left:300px; 
    font-size: 200%; 
    z-index:1001; 
    border:3px solid green; 
    background:#ffffff; 
}

tabs.js

jQuery(function()
{   set_tabs();
    jQuery('body').on("click", "#refresh", function()
    {   jQuery('.tabset ul li a').each(function()
        {   var link = jQuery(this);
            var tab = link.parent();
            var tabset = link.closest('div.tabset');
            if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');
        });
        jQuery(".tabset").tabs( "load" , index );
    });
    jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
    jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{   jQuery('.tabset').tabs({ cache:true }); }

index.html

        <!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css" rel="stylesheet"-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="tabs.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" />

<div id="parentTabSet" class="tabset">
    <ul>
        <li><a href="#A">A</a></li>
        <li><a href="#B">B</a></li>
        <li><a href="#C">C</a></li>
        <li><a href="#D">D</a></li>
        <li><a href="tabs_e.html">E</a></li>
    </ul>
    <input type='button' id='refresh' value='refresh' />
    <div id='loading'>Loading...</div>
    <div id="A" class="tabset">
        <ul>
            <li><a href="#A_1">A_1</a></li>
            <li><a href="#A_2">A_2</a></li>
            <li><a href="tabs_e.html">parent E</a></li>
        </ul>
        <div id="A_1"><p>A_1 - FOO</p></div>
        <div id="A_2"><p>A_2 - BAR</p></div>
    </div>
    <div id="B"><p>Div B</p></div>
    <div id="C"><p>Div C</p></div>
    <div id="D"><p>Div D</p></div>
</div>

tabs_e.html

<script>
jQuery( function()
{   set_tabs();
    var d = new Date();
    jQuery('#E_1 p').text(d);
    jQuery('#E_2 p').text(d);
});
</script>
<div class="tabset">
    <ul>
        <li><a href="#E_1">E_1</a></li>
        <li><a href="#E_2">E_2</a></li>
    </ul>
    <div id="E_1"><p>E_1 - BAR</p></div>
    <div id="E_2" class='clear'><p>E_2 - BAZ</p></div>
</div>
4

2 に答える 2

0

そのため、キャッシュ オプションが 1.9 以降で非推奨になっただけでなく、(使用された場合) load メソッドがタブ コンテンツをリロードしないように従来の動作が変更されていることが判明しました。私が思いついたアプローチは、私が思うに、誰かがよりクリーンな代替手段を提供してくれることを望んでいる忌まわしいものです。(oh pleeeaazzz!) とにかく、FWIW... これが私が思いついたものです。

tabs.js (再訪)

jQuery(function()
{   set_tabs();
    jQuery(document).on("click", "#refresh", function()
    {   refresh = {};
        refresh.tab = true;
        jQuery('.tabset ul li a').each(function()
        {   var link = jQuery(this);
            var tab = link.parent();
            var tabset = link.closest('div.tabset');
            if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');

        });
        jQuery(".tabset").tabs( "load" , index );
    });
    jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
    jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{   jQuery('.tabset').tabs(
    {   beforeLoad: function( event, ui)
        {   if(typeof refresh.tab =='undefined')
            {   if ( ui.tab.data( "loaded" ))
                { event.preventDefault();
                    return;
                }
                ui.jqXHR.success(function() {   ui.tab.data( "loaded", true );});
            }   else refresh={};
        }
    });
}
于 2013-03-14T21:56:20.457 に答える
0

The .live() function has been deprecated for a while now, and support is completely gone in jQuery 1.9+. Use this:

$(document).on("click", "#refresh", function() {
      // your current "live" code
});
于 2013-03-14T18:42:51.750 に答える