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>

Just to clarify, is this jQuery UI tabs or another plugin? Also, when you say "a button inside the tab", you mean that tab's content area has a button, and when you hit it you want that content to reload, right? — jbnunn
– jbnunn, Commented Dec 12, 2009 at 22:31
Yes exactly! Sorry for not being clear, I updated the question. Im' quite new to jquery so maybe I'm doing something wrong.. Do you have an idea how to solve it? — Martin
– Martin, Commented Dec 12, 2009 at 23:31

Mottie · Accepted Answer · 2009-12-17 22:28:21Z

7

+100

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

edited Dec 17, 2009 at 22:28

answered Dec 13, 2009 at 4:45

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Martin Over a year ago

Thanks! But it didn't work.. I updated the question, I tried adding the return false and changing to live but the content is still not loaded. I can see that the "button clicked" event runs but then I'm calling load but my content is not loaded. As you can see in the code my content loads in select: function(e, ui). Maybe select doesn't run when calling load? What am I doing wrong?

Martin Over a year ago

Also I can see that the select: function(e, ui) doesn't run at all. So I tried adding $tabs.tabs('select', $tabs.tabs('option', 'selected')); before I load the data but that doesn't make the select function load either. What can be wrong?

Mottie Over a year ago

Actually the function from my answer should be outside of the tabs function, but still inside the $(function() { ... }). I'll have to look at it a bit more to see why the select function isn't being called.

Martin Over a year ago

Thanks a lot! I have it set up to just load the data when the tab is clicked because I don't want to load all the content at once. My code works if I click the tabs so I don't think the eval() could be problems with that code but the select function is not called, which I think is strange. Yes right now I'm calling the same web service but will change that later when I got this working. Can't see why the select function isn't called, what can be wrong?

Mottie Over a year ago

AHHH... change the $tabs to $('.Tabs') in the click function... I'll update my answer

|

Peter Rowell · Accepted Answer · 2009-12-13 02:29:02Z

0

Two things:

Firefox + Firebug plugin are your friends. Use them.
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.

answered Dec 13, 2009 at 2:29

Peter Rowell

17.8k2 gold badges52 silver badges65 bronze badges

Collectives™ on Stack Overflow

Jquery tabs reload content on button click

2 Answers 2

15 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related