Question

我正在开发一个Web应用程序，并且正在使用JQuery UI Tabs取得很大进展，特别是动态更新绑定到每个选项卡的ajax请求的目标url的'url'方法。我在这里创建了一个简化的例子：

2个标签中的每一个，功能1和1。功能2，根据传递给测试的参数显示一些测试的结果。测试始终保持不变，但我通过操纵绑定到选项卡的URL来更改函数中使用的变量。更新在延迟加载Tab上调用的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>

N.B。这里的ajax.php文件只是回传传递给它的内容。

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

Answer 1

你也可以这样做：

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/

在Jquery UI 1.9选项卡中替换'url'方法

1 个答案: