✔ Tabs -> nach aktualisieren auf aktiviertem Tab bleiben!

[Kalma]

Hi,

ich habe eine Seite, wo ich Tabs verwende (Jquery Tabs)


Ich habe also folgende Tabs, und folgenden Link:

<a href="#start">Auf einen Blick</a>
<a href="#info">Infos</a>
<a href="#contact">Kontakt</a>


Wenn ich jetzt auf "Kontakt" klicke, komme ich also per Ajax zu den Kontakt-inhalten.
Hier kann ich bearbeiten; jedoch, wenn ich aktualisieren lasse, dann lande ich wieder auf der Seite "Auf einen Blick", was ja logisch ist, denn es wird ja aktualisiert, was ajax ja nicht richtig mitkriegt, wies aussieht.

Jetzt überlege ich, wie ich das umsetze.
Einfach Tabs ohne Ajax, oder Tabs mit Ajax.
Ohne hätte ich den Nachteil, es sähe nicht so schick aus.


Könnt ihr mir sagen, wie ich Ajax beibringe, auf der richtigen Seite zu bleiben, wenn ich aktualisiere?


Gruß und Danke
David

 

[Parantatatam]

Ich weiß ad hoc nicht genau, wie man jQuery dazu bekommt, dass es die Anker beim Wechsel von einem Tab auf den anderen oben in der URL anzeigt, aber wenn du das geschafft hast, dann kannst du die Tabs so einstellen, dass es den Anker lädt (ist mit JavaScript möglich) und diesen als vorausgewählten nimmt. Wenn kein Anker vorhanden ist, dann einfach auf den ersten Tab springen.

 

[Kalma]

Also ich habe das bisher halt so gelöst, mit dem Aktualisieren der Seite.


Habe aber bei Facebook gesehen, dass die das einfach machen, indem Sie die Inputs wieder disablen (also verschwinden lassen) und die Bearbeitungssymbole wieder einblenden.

Wie ist das möglich?


Habe bis jetzt folgendes Script für die Bearbeitung:

function validate(formid, checkfile, postvalue, errordiv, okdiv, locateto, timeout)
{
	$(function(){
		// have a look on forms submit handler
		$(formid).bind('submit', function(evt){
			// Ajax-Request
			$.ajax({
				url: 			checkfile,
				type: 			'post',
				data: 			$(this).serialize()+postvalue,    // serialize form-values
				form_id: 		$(this).attr('id'),  				// ID des Formulars speichern
				form_submit:	this.submit,     					// submit-Handler speichern
							
				success: function(msg){
					// if error
					if($.trim(msg).length > 0) {
						// convert back-string
						var strRet = unescape(msg);

						// create JSON-Object
						var objJSON = eval("("+strRet+")");
						$('#'+errordiv).empty();
						$('#'+errordiv).css({'display': 'block'});
						
						var objUL = document.createElement("ul");
						document.getElementById(errordiv).appendChild(objUL);
						
						for(var strEntry in objJSON)
						{
							$(objUL).append(objJSON[strEntry]);
						}

						fadeIt(0, objUL);
					} else {
						// delete submit-Handler
						$('#'+this.form_id).unbind('submit', $(this).form_submit);
									
						// Hide Error Box
						$('#'+errordiv).animate({ height: 'hide', opacity: 'hide' }, 'fast');
									
									
						// Show Status Box
						$('#'+okdiv).animate({ height: 'show', opacity: 'show' }, 'fast');								
									
						var inputs = document.getElementsByTagName("input");
			
						// disable all inputs
						for (var i = 0; i < inputs.length; i++) 
						{
							inputs[i].disabled = true;
						}
									
									
						// Locate to location-parameter
						setTimeout("self.location.href='"+locateto+"'",timeout);
					}
				}
			});

			return false;
		});
	});
							

	function fadeIt(intI, objUL){
		if(intI<objUL.childNodes.length)
			$(objUL.childNodes[intI]).fadeIn('fast', function(){fadeIt(++intI, objUL);});
	}
}

Das macht also, wenn jemand auf Senden klickt:
- Eingabe zur Datei senden
- Eingabe prüfen
- Wenn ok, -> OK Box einblenden
- Wenn nicht ok, -> Fehler box einblenden
- Wenn gegeben, weiterleiten zu einer Seite




Wäre super, wenn ihr mir helfen könntet
David

 

[Sven Mintel]

Moin David,

ist das schon irgendwo online bzw. könntest du eine Demo bereitstellen?

 

[Kalma]

Hi Sven,

also das mit den Tabs habe ich jetzt per URl gelöst, einfach per $_GET[] die aktuelle Seite abfragen und dann einbinden.



Das mit dem Inhalt speichern, habe ich leider nicht online..



Gruß
David