Question

I got a issue like this:
I am using Rails 3.2.9 and jqueryUI 1.9.0
I had a tabs UI and use ajax for each tab.
the html and Javascript code is like this:

<!-- index.html.erb -->
<div id="tabs">
  <ul>
    <li><a href="home/page1">page1</a></li>
    <li><a href="home/page2">page2</a></li>
  </ul>
</div>

<!-- page1.html.erb-->
<p>this is page 1</p>

<!-- page2.html.erb-->
<p>this is page 2</p>

and in home.js:

$(document).ready(function () {
  $( "#tabs" ).tabs();
});

so, when I start the server, and try to activate any tab, the front end will keeping send the requests back to server. does any one know what happened on this?

Thank you

---

Update

I change the home.js like this but still doesn’t work:

$(document).ready(function () {
  $( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
      if ( ui.tab.data( "loaded" ) ) {
      event.preventDefault();
      return;
      }

      ui.jqXHR.success(function() {
        ui.tab.data( "loaded", true );
      });
    }
  });
});

I still can not find the reason why this happened. A big thank you if some one can figure it out.
Thank you!

Answer 1

Because you specify home/page1 and home/page2 in your href links, it will load them up each time you click on the relevant tab.

Instead you can load the pages up once in index.html.erb by rendering partials into your page. If you rename page1.html.erb to _page1.html.erb and page2.html.erb to _page2.html.erb you can change your code to:

<div id="tabs">
    <ul>
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
    </ul>
    <div id="page1">
         <%= render 'home/page1' %>
    </div>
    <div id="page2">
         <%= render 'home/page2' %>
    </div>
</div>

Edit

If you still want to load the pages dynamically when you click each tab but only once, then don’t use partials – you can just use the cache option:

 $( "#tabs" ).tabs({ 
            cache: true 
            //some other options 
  });