jquery-ui-tabs. pasando una cadena de consulta

Question

¿Cómo podría pasar una cadena de consulta (? id = avalue) con cada uno de los siguientes enlaces asociados a las pestañas siguientes. Estoy intentando abrir contenido externo dentro de las pestañas (que está funcionando bien) pero no he podido pasar un parámetro con las URL. El valor para el parámetro sería el mismo para cada enlace.

Mi código de funcionamiento:

<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> 

Cualquier ayuda que me puedan ofrecer será muy apreciada.

Gracias de antemano

Answer 1

Puede codificar el parámetro para cada enlace:

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

Esto debería funcionar bien. ¿Qué es exactamente lo que no funciona para ti? ¿O tienes algo más en mente?

Answer 2

A partir de la búsqueda que he hecho, la mejor manera de abordar esto sin tener que hacer algo feo como:

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

sería para actualizar los hrefs de anclaje en la carga de la página. Toma la ID/valor que necesites y añádelo;

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

No es la solución más elegante, pero funciona.

Answer 3

¿Qué sucede si agrega un observador de evento en todos los enlaces?

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

Answer 4

Puede usar la opción ajaxOptions. El widget de pestañas pasará estas opciones al jQuery.ajax().

el código siguiente utiliza la opción data de la función de jQuery.ajax() para pasar el resultado de la función getId (un código de tiempo de estilo Unix en este ejemplo) al servidor cuando se selecciona una ficha.
la solicitud de URL se verá algo como RequestActionUpdate.aspx?id=1255015611701:

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

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