Jquery选项卡在按钮单击时重新加载内容

问题描述：

我正在使用jquery标签（ http：//docs.jquery。 COM / UI / API / 1.7.2 /标签）。 Jquery版本1.3.2和Jquery UI版本1.7.2和我一直在firefox 3.5.6中测试。

I'm using jquery tabs (http://docs.jquery.com/UI/API/1.7.2/Tabs). Jquery version 1.3.2 and Jquery UI version 1.7.2 and Ive been testing in firefox 3.5.6.

选择选项卡时我只需将当前日期添加到内容区域HTML。我还有一个类名为Button的链接。单击此链接时，我想重新加载当前所选选项卡的内容。但是通过我尝试过的解决方案，我无法让它发挥作用。我可以看到加载了按钮点击事件，但以下代码没有重新加载我的数据：

When selecting a tab I just add the current date to the content area html. I also have a link with the class name "Button". When this link is clicked I want to reload the content of the currently selected tab. But with the solution I've tried I can't get it to work. I can see that the "button clicked" event is loaded but the following code isn't reloading my data:

$(".Tabs").tabs('load', $(".Tabs").tabs('option', 'selected'));

我也一直在测试：

var selected = $(".Tabs").tabs('option', 'selected');
$(".Tabs").tabs('select', null);
$(".Tabs").tabs('select', selected);

但这也不起作用，按下按钮时我的select方法永远不会被调用

But that doesn't work either, my select method never gets called when pushing the button

这是我的jquery代码：

This is my jquery code:

    $(function() {
    var $tabs = $(".Tabs").tabs({
        selected: null,
        select: function() {
            alert("this doesn't run on button click");
            //Sets Content's html to current date
            $("#Content").html(new Date);
        }
    });

    $('.Button').click(function() {
        alert("this runs on button click");
        //Here I want to reload the current selected tab
        $(".Tabs").tabs('load', $(".Tabs").tabs('option', 'selected'));
        return false;
    });
    $('.Tabs').tabs('select', 0); // Select first tab
});

这是html：

<div class="Tabs">
    <ul>
        <li><a href="#Content">Tab1</a></li>
        <li><a href="#Content">Tab2</a></li>
    </ul>
    <div id="Content">

    </div>
</div>
<a class='Button' href='#'>Load Content Again</a>

答

如果您的 .Button class在加载的内容中，您需要使用 live jQuery的功能。

if your .Button class is inside the content that is loaded, you will need to use the live functionality of jQuery.

$('.Button').live('click', function() {
 //Here I want to reload the current selected tab
 $tabs.tabs('load', $tabs.tabs('option', 'selected'));
 return false;
});

另外，因为 .Button 是一个链接，你需要在该函数中添加 return false; 。

Also, since .Button is a link, you'll need to add return false; inside that function.

通过查看代码，我不确定为什么要将其设置为在您单击之后才加载选项卡。同时单击任何选项卡将始终加载相同的内容（网址不会更改）。最后，您不需要使用 eval（）脚本（这可能是问题吗？）。

From looking over your code, I'm not sure why you have it set up to not load a tab until after you click on one. Also clicking on any tab will always load the same content (the url doesn't change). And lastly, you shouldn't need to use eval() the script (could this be the problem?).

除了这些问题之外，看起来你的代码应该可以工作。

Besides these issues, it looks like your code should work.

我也不确定你的json是如何格式化的，所以我重写了这个，假设以下json格式：

I'm also not sure how your json is formatted, so I rewrote this assuming the following json format:

({
 "items": [
  { "title": "example 1" },
  { "title": "example 2" },
  { "title": "example 3" },
  { "title": "example 4" },
  { "title": "example 5" },
  { "title": "example 6" },
  { "title": "example 7" },
  { "title": "example 8" },
  { "title": "example 9" },
  { "title": "example 10" }
 ]
})

脚本

$(function() {
 var $tabs = $(".Tabs").tabs({
  selected: null,
  select: function(event, ui) {
   loadTab( ui.index ); // ui.index = index of the clicked tab
  }
 });
 $('.Button').live('click', function() {
  //Here I want to reload the current selected tab
  loadTab( $(".Tabs").tabs('option', 'selected') );
  return false;
 });
 $('.Tabs').tabs('select',0);
});

function loadTab(indx){
 $.ajax({
  type: "GET",
  url: "http://domain.com/Service.svc/get",
  dataType: "json",
  success: function(data) {
   var content = "";
   $.each(data.items, function(items){
    content += "<a class='Button' href='#'>" + this.title + "</a><br>";
   });
   $("#Content").html(content + "<br />Tab Index #" + indx + " on " + (new Date()).toUTCString());
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
   if (!$('#error').length) $("#Content").prepend('<div id="error"></div>');
   $('#error').html(textStatus + '<br /><br />');
  }
 })
}

Jquery选项卡在按钮单击时重新加载内容

相关推荐