5

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

2 个选项卡（功能 1 和功能 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 回答