Jquery tabs reload content when a button is clicked

Question

I am using jquery tabs ( http://docs.jquery.com/UI/API/1.7.2/Tabs ). JQuery version 1.3.2 and jQuery version 1.7.2 and Ive were tested in firefox 3.5.6.

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

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

I also tested:

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

But this also does not work, my selection method is never called when the button is clicked

This is my jquery code:

    $(function() {
    var $tabs = $(".Tabs").tabs({
        selected: null,
        select: function() {
            alert("this doesn't run on button click");
            //Sets Content 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 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

.Button , live 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; .

---

, , , , . (URL- ). , , eval() script ( ?).

, , .

, json, , json:

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

Answer 2

:

• Firefox + Firebug - . .
• onClick, return false; return 'false, , URL- href.