Jquery tabs reload content on button click

Question

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.

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'));

I have also been testing with:

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

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

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
});

This is the 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>

Answer 1

Two things:

1. Firefox + Firebug plugin are your friends. Use them.
2. Look for an onClick routine that is not doing a return false; By saying return 'false you tell the browser to not actually go to the URL in the href attribute.

Answer 2

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;
});

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

---

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.

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" }
 ]
})

Script

$(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 />');
  }
 })
}