jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen

K00S · 08.09.2011, 11:13

Hallo,
folgendes Problem: Ich erstelle mit jQuery UI Tabs in einem DIV und lade dieses div nach dem Speichern-Click mit jQuery AJAX wieder komplett nach. Nach dem AJAX muss natürlich wieder der Aufruf einer Funktion gestartet werden, die mir wieder die Tabs mit jQuery generiert. Lange Rede, kurzer Sinn: die Tabs sind auf jeden Fall nach dem AJAX wieder da. Ich wollte aber nun lösen, dass der vorher aufgerufene Tab mit gespeichert wird. jQuery bietet dazu das Cookie-Plugin. Das hab ich auch integriert und es funktioniert. Wenn ich aber dann auf Speichern gehe, wird ajax gestartet, das Teil neu geladen und dann ist der Fokus wieder auf dem ersten Tab. Der Cookie wird also gar nicht berücksichtigt. Weiß jemand da eine Lösung?
Schöne Grüße,
K00S

Chriz · 08.09.2011, 11:31

Fang doch mal an zu debuggen. Was steht im Cookie? Setz doch erstmal den aktivierten Tab manuell, danach kannst du ihn dann über den Cookie steuern.

ChrisB · 08.09.2011, 11:39

Zitat:

Zitat von K00S

Der Cookie wird also gar nicht berücksichtigt.

In wie fern sollte er denn auch?

Neue Milch kommt nicht dadurch in den Kühlschrank, dass jemand einen Zettel „Wir brauchen Milch“ auf den Küchentisch legt - sondern dadurch, dass jemand diesen Zettel liest, Milch kauft, und in den Kühlschrank packt … D’oh!

Zitat:

Weiß jemand da eine Lösung?

Lese den Zettel, und kaufe Milch.

Lese den Inhalt des Cookies, und setze nach dem Laden aktiv den Fokus auf den Tab, auf den der Cookie verweist.

K00S · 08.09.2011, 11:43

Name: ui-tabs-1
Wert: 2
So sieht der Cookie beispielsweise aus.

Code:

$(".Tabs").tabs({
        selected: 2
    });

Das funktioniert. Dann ist aber immer der 3. Tab standardmäßig ausgewählt.
Es sollte aber so funktionieren:

Code:

$(".Tabs").tabs({
        cookie: {}
    });

So stehts zumindest auf der jQuery UI Webseite.

EDIT:
So jetzt hab ich mal weiter probiert.
Der Cookie wird nicht gefunden. Ansonsten verhält es sich mit dieser Programmlösung wie vorher. Normal aktualisieren geht, nur AJAX nicht richtig.

Code:

$(".Tabs").each(function(i){
        if($.cookie("Tabs_"+i))
        {
            var active = $.cookie("Tabs_"+i);
        }else{
            var active = 0;
        }
        $(this).tabs({
            select: active,
            cookie: {
                name: "Tabs_"+i
            }
        });
    });

rudygotya · 08.09.2011, 20:40

Zitat:

Es sollte aber so funktionieren:
Code:
$(".Tabs").tabs({ cookie: {} });
So stehts zumindest auf der jQuery UI Webseite.

Eben nicht:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="screen"><link rel="stylesheet" href="" type="text/css" media="screen">
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="screen">
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" ></script>
    <script src="jquery.cookie.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" ></script>
    
    
    <script>
        // http://jqueryui.com/demos/tabs/#cookie
        $(function () {
            
            $( "#tabs" ).tabs({
                cookie: {
                    // store cookie for a day, without, it would be a session cookie
                    expires: 1
                }
            });
            
        });
    
    </script>
    
    
</head>

<body>
    
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
    </div>
</div>





</body>
</html>

K00S · 10.09.2011, 08:07

// store cookie for a day, without, it would be a session cookie <-- genau das will ich ja, und das passiert ganz brav. Und das mit dem außenrum ist auch klar. Das war nur ein Codeausschnitt von mir, weil vor dem Onload wird der wahrscheinlich gar nix machen

rudygotya · 10.09.2011, 13:54

Jo, das hab ich in dem Moment nicht gesehen

Wobei das gepostete Beispiel funktioniert. Debugge das ganze mal per firebug/breakpoints oder zeig doch mal reduziertes Online-Beispiel.

Grüße

Basti

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Datagrid in Jquery easy ui mittels AJAX füllen in Zend	MLang	JavaScript, Ajax und mehr	0	03.09.2011 01:48
Counter für jQuery UI Tabs	Ducon	PHP Einsteiger	6	08.08.2011 15:58
DOM neu laden !? jQuery mit neuen "Elementen"	dreamcatcher	JavaScript, Ajax und mehr	6	03.03.2011 18:44
Ajax - Dynamic Content mit JS in DIV laden	nickBee	HTML, Usability und Barrierefreiheit	8	30.07.2010 14:46
[Erledigt] Ajax, jQuery - CKEDITOR Fehler bei Instanzierung	jGeee	JavaScript, Ajax und mehr	3	26.03.2010 09:09
jQuery Ajax und $(this) Problem	halskrause	JavaScript, Ajax und mehr	8	01.03.2010 17:39
jQuery mit AJAX ohne ActiceX im IE?	krush	JavaScript, Ajax und mehr	2	11.08.2009 08:54

08.09.2011, 11:13
K00S Neuer Benutzer Registriert seit: 13.06.2011 Beiträge: 4 PHP-Kenntnisse: Fortgeschritten	jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen Hallo, folgendes Problem: Ich erstelle mit jQuery UI Tabs in einem DIV und lade dieses div nach dem Speichern-Click mit jQuery AJAX wieder komplett nach. Nach dem AJAX muss natürlich wieder der Aufruf einer Funktion gestartet werden, die mir wieder die Tabs mit jQuery generiert. Lange Rede, kurzer Sinn: die Tabs sind auf jeden Fall nach dem AJAX wieder da. Ich wollte aber nun lösen, dass der vorher aufgerufene Tab mit gespeichert wird. jQuery bietet dazu das Cookie-Plugin. Das hab ich auch integriert und es funktioniert. Wenn ich aber dann auf Speichern gehe, wird ajax gestartet, das Teil neu geladen und dann ist der Fokus wieder auf dem ersten Tab. Der Cookie wird also gar nicht berücksichtigt. Weiß jemand da eine Lösung? Schöne Grüße, K00S


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.09.2011, 11:31
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Fang doch mal an zu debuggen. Was steht im Cookie? Setz doch erstmal den aktivierten Tab manuell, danach kannst du ihn dann über den Cookie steuern. __________________ "Nuschel ich?" - "Was?"

08.09.2011, 11:43
K00S Neuer Benutzer Registriert seit: 13.06.2011 Beiträge: 4 PHP-Kenntnisse: Fortgeschritten	Name: ui-tabs-1 Wert: 2 So sieht der Cookie beispielsweise aus. Code: $(".Tabs").tabs({ selected: 2 }); Das funktioniert. Dann ist aber immer der 3. Tab standardmäßig ausgewählt. Es sollte aber so funktionieren: Code: $(".Tabs").tabs({ cookie: {} }); So stehts zumindest auf der jQuery UI Webseite. EDIT: So jetzt hab ich mal weiter probiert. Der Cookie wird nicht gefunden. Ansonsten verhält es sich mit dieser Programmlösung wie vorher. Normal aktualisieren geht, nur AJAX nicht richtig. Code: $(".Tabs").each(function(i){ if($.cookie("Tabs_"+i)) { var active = $.cookie("Tabs_"+i); }else{ var active = 0; } $(this).tabs({ select: active, cookie: { name: "Tabs_"+i } }); }); Geändert von K00S (08.09.2011 um 12:12 Uhr).

10.09.2011, 08:07
K00S Neuer Benutzer Registriert seit: 13.06.2011 Beiträge: 4 PHP-Kenntnisse: Fortgeschritten	// store cookie for a day, without, it would be a session cookie <-- genau das will ich ja, und das passiert ganz brav. Und das mit dem außenrum ist auch klar. Das war nur ein Codeausschnitt von mir, weil vor dem Onload wird der wahrscheinlich gar nix machen

10.09.2011, 13:54
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Jo, das hab ich in dem Moment nicht gesehen Wobei das gepostete Beispiel funktioniert. Debugge das ganze mal per firebug/breakpoints oder zeig doch mal reduziertes Online-Beispiel. Grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog