单击选项卡内容内的链接时，在 jQuery-UI-选项卡中动态加载 ajax 内容答案

【问题标题】：Dynamically load ajax contents in the jQuery-UI- tabs on clicking on a link inside the tab contents单击选项卡内容内的链接时，在 jQuery-UI-选项卡中动态加载 ajax 内容
【发布时间】：2014-02-03 06:16:49
【问题描述】：

我有一个基本的 jQuery UI 选项卡，它默认加载 ajax 内容。

示例如下：

<script>
$(function() {
    $( "#tabs" ).tabs();
});
</script>

<div id="tabs">
<ul>
<li><a href="http://localhost/demotabs/users/list">List Users</a></li>
<li><a href="http://localhost/demotabs/jobs/list">List Jobs</a></li>
</ul>
<div id="tabs-1">
... ajax contents of user's list comes here....
plus a link <a href="http://localhost/demotabs/users/add">add new user</a>
</div>
<div id="tabs-2">
... ajax contents of jobs's list comes here....
plus a link <a href="http://localhost/demotabs/jobs/add">add new job</a>
</div>
</div>

我想要实现的是当我点击添加新用户链接时，清除标签 1 内容并显示通过 ajax 加载的添加用户表单的内容，保持选项卡 1 处于选中状态。

类似地，如果单击添加新工作，则显示清除选项卡 2 中的初始工作列表内容并显示通过 ajax 加载的添加工作表单的内容，保持选项卡 2 处于选中状态。

我不知道如何做到这一点，请指导我正确的方向来解决这个难题......

谢谢.....

【问题讨论】：

标签： php jquery jquery-ui jquery-ui-tabs

【解决方案1】：

你可以做这样的事情。将类设置为链接并为该链接创建 onClick 事件。在 html 参数中指定要在 ajaxurl 中调用的 url。

<script>
    $(function(){
         $(".tab_list).click(function(){
          var url=$(this).attr("param");
          $.ajax{
              // ....
          url: "http://yourdomain.com/path/to/file/url
              // ....
          }
       });
    })
 </script>
 <ul>
    <li><a href="http://localhost/demotabs/users/list" class="tab_list" param="users">List Users</a></li>
     <li><a href="http://localhost/demotabs/jobs/list" class="tab_list" param="jobs">List Jobs</a></li>
  </ul>

希望这会有所帮助。

【讨论】：

【解决方案2】：

你可以试试这个，

    <div id="tabs-1">
    ... ajax contents of user's list comes here....
    plus a link <a href="users/add" onclick="return LoadData(this,'1')">add new user</a>
    </div>
    <div id="tabs-2">
    ... ajax contents of jobs's list comes here....
    plus a link <a href="jobs/add" onclick="return LoadData(this, '2')">add new job</a>
    </div>


     <script>
      $(function() {
        $( "#tabs" ).tabs();
     });

      function LoadData(ths, d){ 
            var baseUrlpath ='Your base url here';
             var url = baseUrlpath + $(ths).attr('href'); 
             console.log(url); 
             $( "#tabs-"+d ).load(url, function() {
                 console.log( "Load was performed." );
             });

             return false;
      }
    </script>

【讨论】：

我正在对您的解决方案进行一些修改，但没有任何反应。我可以进入函数 LoadData(ths, d)，正确警告 ths 和 d 值，但是 $("#tabs-"+d).load($(ths).attr('href'), function() 是不工作....无法获取日志...
你有什么变化？您可以发布您所做的更改吗？
函数 LoadData(ths, d){ var url = baseUrlpath + $(ths).attr('href');控制台.log(url); $( "#tabs-"+d ).load( url , function() { console.log( "加载已执行。" ); });返回假； }
baseUrlpath 丢失。所以你需要在var url之前添加var baseUrlpath ='your base path value';
我正确获取了 var url 的值....它的 $("#tabs-"+d).load( url , function() 似乎不起作用..我重复 url是正确的并且警报正常...

【解决方案3】：

在要显示的静态文本之后的 tab1 内创建一个 div 标签。在脚本中，通过使用 div 标签的 id，您可以动态显示 tab1 内部的元素。除了 div 你也可以使用 span

【讨论】：

【解决方案4】：

使用closest函数

// Use "on", when your content loading via ajax
$('#tabs div').on('click', 'a', function()
{
    var container = $(this).closest('div');
    $.post($(this).attr('href'), function(data){
        container.html(data);
    })

    return false;
})

【讨论】：