Home/ Questions/Q 9120521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T05:38:46+00:00

using jQuery UI 1.9.2 (upgraded from 1.8.23) and I see this on the Upgrade

  • 0

using jQuery UI 1.9.2 (upgraded from 1.8.23) and I see this on the Upgrade guide;

Deprecated url method and use of title attribute; use aria-controls attribute

(#7132) The url method has been deprecated in favor of leaving the href attribute unmodified even for remote tabs. The href attribute will point to the actual resource and the aria-controls attribute will point to the associated panel. This means that the title attribute will no longer be used to specify a custom panel id.

I have this code:

var $t = $("#tabs");
$t.tabs("url", 0, url);           
$t.bind("tabsload", function (event, ui) {
    console.log('tabsload fired');
});
$t.tabs("load", 0);

I cannot figure out how to set the url value for the tab (this code is fired when the user clicks on a grid row and the url value is rebuilt based on grid values) now as I do not understand the upgrade guide to use the aria-controls comment.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The approach I have taken is to set the href of the AJAX link and then call the load method to reload the content.

    I appreciate that this does not use the aria-controls attribute, but the snippet from the upgrade guide states that this attribute points to the panel – remote tabs receive their content based on anchor contained in the li element, so I figured I should be able to use this approach.

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="Scripts/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.min.css"
        rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tabs').tabs();
            $('#change-button').click(function (event) {
                $('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at ' + new Date().toTimeString());
                $('#tabs').tabs('load', 0);
                event.preventDefault();
            });
        });
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="tabs">
        <ul>
            <li>
                <a id="ajax-link" href="Handler1.ashx?echo=some text to repeat">Tab 1</a>
            </li>
        </ul>
    </div>

    <button id="change-button">Change</button>
    </form>
</body>
</html>

    I am using a generic HTTP handler (this is the AJAX request) which simply echos back the text it is passed, e.g., Handler1.ashx?echo=some text to repeat. Note that my tabs consist of only one tab that makes an AJAX call to this handler.

    To change the Url, I handle the click event of the button and modify the href of ajax-link like this and then reload it:

    $('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at '
    + new Date().toTimeString());
$('#tabs').tabs('load', 0);

    So for this to work you will need to provide the link you wish to change with an ID and you will need to know at which position the tab page occurs.

    • 0