5

私はWebアプリケーションに取り組んでおり、JQuery UIタブ、特に各タブにバインドされたajaxリクエストのターゲットURLを動的に更新する「url」メソッドを使用して大きな進歩を遂げていました。ここに簡単な例を作成しました：

関数 1 と関数 2 の 2 つのタブのそれぞれには、テストに渡されたパラメーターに基づいて、いくつかのテストの結果が表示されます。テストは全体を通して同じままですが、タブにバインドされた URL を操作して、関数で使用される変数を変更していました。遅延読み込みタブで呼び出される URL を更新する 'url' メソッドを使用すると、これを行うことができましたが、現在は廃止されており、すぐにはサポートされなくなります。そのため、JQuery UI 1.9 の「beforeLoad」イベントを使用してこれを行う方法を探していました。

提案は、ui.ajaxSettings を操作してデータ パラメータを設定できるというものでしたが、バグ ( http://bugs.jqueryui.com/ticket/8673 ) があり、これは修正されないようです。推奨される回避策は、代わりに ui.ajaxSettings.url を操作することです。

私の実際の例を以下に示しますが、これが私が求めているものを達成するための最もクリーンで適切な方法であるかどうかはわかりません。提案があれば大歓迎です。これだけのことを行う方法の例を見つけるのに苦労したので、同様の状況にある他の人に役立つことを願っています. 

<title> Jquery Tabs AJAX Test</title>

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css">

</head>
<body >

<script type=text/javascript>
    $(document).ready(function() {

        $( '#tabs' ).tabs({  }); 

         $('button.set_variable').click(function() { 
             var variable = $(this).val(); 
             $( '#tabs' ).tabs({ 
                 beforeLoad: function( event, ui ) { 
                     ui.ajaxSettings.url += "&variable=" + variable ; 
                     } 
                 }); 
             var selected_tab = $('#tabs').tabs('option', 'selected'); 
             $( '#tabs' ).tabs("load", selected_tab); 
          }); 
     })
</script>

    <button class="set_variable" value="1">Variable = 1</button> 
    <button class="set_variable" value="2">Variable = 2</button> 
    <button class="set_variable" value="3">Variable = 3</button> 

    <div id="tabs" > 
    <ul> 
         <li><a href="ajax.php?func=ajax-func1">Function 1 </a></li> 
         <li><a href="ajax.php?func=ajax-func2">Function 2 </a></li> 
    </ul> 
    </div> 
</body></html>

注意: ここの ajax.php ファイルは、渡されたものをエコー バックするだけです。

<?php
    extract($_GET);
    var_dump($_GET);
?>
4

1 に答える 1

2

あなたもこのようなことをすることができます:

var variable = '';
$( '#tabs' ).tabs({  beforeLoad: function( event, ui ) { 
    if(variable != '')
         ui.ajaxSettings.url += "&variable=" + variable ; 
}}); 

$('button.set_variable').click(function() { 
     variable = $(this).val(); 
});

http://jsfiddle.net/DNWzY/1/

于 2013-04-09T21:08:04.977 に答える