Question

How can I set jQuery’s ajax tab’s url dynamically in runtime?

Doing like this:

$(function() {
    //$("#tabs").tabs();
    $("#tabs").tabs("url" , 0, "dep.php" );
});

html

<div class="flts">
    <div id="tabs">
        <ul>
            <li><a href="dep.php">Вылеты</a></li>
            <li><a href="arr.php">Посадка</a></li>
        </ul>
    </div>
</div>

but it’s not working! What could be a problem?

Answer 1

Your approach doesn’t seem correct. The call of $("#tabs").tabs("url" , 0, "dep.php") is wrapped in $(function() {, so it’s run only the first time the page is loaded. That makes no sense. This method is used to later replace the tab content.

The correct is approach is:

• The page should only contain the tab label with a valid link but no tab content.

• When the page is first loaded, call $("#tabs").tabs(); to intialize and configure the tab widget.

The tab widget is now usable and the tab content is loaded when the specific tab is displayed for the first time (lazy loading).

• If you want to refresh or replace a tab later (e.g. from an event handler), call $("#tabs").tabs("url" , 0, "dep.php").

So the overall solution could look like this:

<div class="flts">
  <div id="tabs">
    <ul>
      <li><a href="dep.php">Вылеты</a></li>
      <li><a href="arr.php">Посадка</a></li>
      </ul>
    </div>
</div>

$(function() {
    // intial tabs configuration
    $("#tabs").tabs();
    // event handler setup for refresh

    $('#refreshButton').click(function() {
      $("#tabs").tabs("url", 0, "dep.php?var=val&var2=val");
    });
});