Zastępowanie metody "url" w Jquery UI 1.9 Tabulatory

Pracuję nad aplikacją internetową i robiłem duże postępy używając zakładek JQuery UI, w szczególności metody "url" dynamicznej aktualizacji docelowego adresu URL żądania ajax, które było każda karta. Stworzyłem uproszczony przykład tutaj:Zastępowanie metody "url" w Jquery UI 1.9 Tabulatory

Każda z 2 kart, funkcja 1 & funkcja 2, wyświetla wyniki niektórych testów na podstawie parametrów, które są przekazywane do testu. Testy pozostały niezmienione, ale zmieniałem zmienne używane w funkcjach, manipulując adresem URL związanym z zakładką. Metoda "url" aktualizacji adresu URL wywoływana na karcie Lazy ładowania pozwoliła mi to zrobić, ale teraz jest przestarzała i wkrótce nie będzie obsługiwana. Więc szukałem sposobu, aby to zrobić za pomocą zdarzenia "beforeLoad" w JQuery UI 1.9.

Sugerowano, że można manipulować ui.ajaxSettings w celu ustawienia parametru danych, ale istnieje błąd (http://bugs.jqueryui.com/ticket/8673) i wygląda na to, że nie zostanie to naprawione. Zalecane obejście polega na manipulowaniu plikiem ui.ajaxSettings.url.

Mój przykład pracy jest poniżej, ale nie jestem pewien, czy jest to najczystszy/najbardziej odpowiedni sposób na osiągnięcie tego, o co prosiłem, i wszelkie sugestie byłyby mile widziane. Próbowałem znaleźć przykłady, jak to zrobić, ale mam nadzieję, że pomoże to komuś innemu w podobnej sytuacji.

<title> Jquery Tabs AJAX Test</title> 

<script type="text/javascript" src="js/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script> 
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css"> 

</head> 
<body > 

<script type=text/javascript> 
    $(document).ready(function() { 

     $('#tabs').tabs({ }); 

     $('button.set_variable').click(function() { 
      var variable = $(this).val(); 
      $('#tabs').tabs({ 
       beforeLoad: function(event, ui) { 
        ui.ajaxSettings.url += "&variable=" + variable ; 
        } 
       }); 
      var selected_tab = $('#tabs').tabs('option', 'selected'); 
      $('#tabs').tabs("load", selected_tab); 
      }); 
    }) 
</script> 

    <button class="set_variable" value="1">Variable = 1</button> 
    <button class="set_variable" value="2">Variable = 2</button> 
    <button class="set_variable" value="3">Variable = 3</button> 

    <div id="tabs" > 
    <ul> 
     <li><a href="ajax.php?func=ajax-func1">Function 1 </a></li> 
     <li><a href="ajax.php?func=ajax-func2">Function 2 </a></li> 
    </ul> 
    </div> 
</body></html>

nb Plik ajax.php tutaj tylko echo z powrotem, co zostało przekazane do niego.

<?php 
    extract($_GET); 
    var_dump($_GET); 
?>

Źródło

2012-11-21 Boidy

zrobiłem [jsfiddle] (http://jsfiddle.net/DNWzY/) dla niego – Shikiryu

Można zrobić coś takiego też:

var variable = ''; 
$('#tabs').tabs({ beforeLoad: function(event, ui) { 
    if(variable != '') 
     ui.ajaxSettings.url += "&variable=" + variable ; 
}}); 

$('button.set_variable').click(function() { 
    variable = $(this).val(); 
});

http://jsfiddle.net/DNWzY/1/

Źródło

2013-04-09 21:08:04 Shikiryu

Zastępowanie metody "url" w Jquery UI 1.9 Tabulatory

Odpowiedz

Powiązane problemy