CODEWITHSUNDEEP
jqueryuser-interfacequery-string
user186423
user186423

Reputation:

jquery-ui-tabs. passing a querystring

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

Upvotes: 5

Views: 5188

Answers (4)

brianpeiris
brianpeiris

Reputation: 10795

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

Upvotes: 10

Detect
Detect

Reputation: 2069

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());
     }
);

Upvotes: 1

S Pangborn
S Pangborn

Reputation: 12729

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.

Upvotes: 1

kgiannakakis
kgiannakakis

Reputation: 104168

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?

Upvotes: 1

Related Questions