jquery-ui-tabs. passing a querystring

Question

Hi all. How could I pass a query string (?id=avalue) with each of the below links associated to the below tabs. I am attempting to open external content within the tabs (that it's working fine) but I have failed to pass a parameter with the urls. The value for the parameter would be the same for each link.

My functioning code:

<script type="text/javascript">

        $(function() {
            $("#tabs").tabs({spinner:'<b>Retrieving Data...</b>'}); 

        });

 </script>


<div id="tabs">
            <ul>
        <li><a href="table.aspx"><span>Introduction</span></a></li>
                <li><a href="RequestActionUpdate.aspx"><span>Update</span></a></li>
                <li><a href="tabstesttarget.aspx"><span>Target</span></a></li>
                <li><a href="table.aspx" ><span>View History</span></a></li>
            </ul>

        </div>

Any help you can offer me will be much appreciated.

Thanks in advance

Answer 1

You can hardcode the parameter to each link:

<li><a href="RequestActionUpdate.aspx?id=avalue"><span>Update</span></a></li>

This should work just fine. What exactly is not working for you? Or you have something else in mind?

Answer 2

From the searching that I've done, the best way to approach this without having to do something ugly like:

window.location = href + '?id=avalue'

would be to update the anchor hrefs on the page load. Grab whatever ID/value you need, and just append it;

$(document).ready(function(){
    value = "?id=foobar"
    $("#tabs ul li a").attr('href', ($(this).attr('href') + value) );
});

Not the most elegant solution, but it does work.

Answer 3

What happens if you add an event observer on all the links?

$("#tabs ul li a").click(
    function(){
       $(this).attr('href', $(this).attr('href') + $('#someHiddenInput').val());
     }
);

Answer 4

You can use the ajaxOptions option. The tabs widget will pass these options onto jQuery.ajax().

The following code uses the data option of the jQuery.ajax() function to pass the result of the getId function (a Unix-style time code in this example) to the server when a tab is selected.
The request url will look something like RequestActionUpdate.aspx?id=1255015611701:

function getId() {
  return (new Date()).getTime();
}

$("#tabs").tabs({
  spinner:'<b>Retrieving Data...</b>',
  ajaxOptions: { data: { id: getId } }
});