Jquery .load() mit link Veränderung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
adresse
auslese
button
code
entfernen
frage
funktion
http
inhalt
jemand
klicken
parameter
positive bewertung
positive bewertungen
prinzip
problem
test
url
vorlage
zeile
-
Hey Leute ;)
Mein Problem:
Ich möchte mit Jquery .load() per Klick auf beispielsweise einen Button einen Inhalt, beispielsweise einen Text oder ein Bild, einblenden. Das wäre auch nicht das Problem, wenn ich nicht zusätzlich wollte, dass gleichzeitig die Adresse, bzw. der Link dabei verändert werde.
Mein Wunsch dabei ist aber, dass wenn man diesen veränderten Link ins Adressfeld eingibt und bestätigt, gleich dieser geladene Inhalt zu sehen ist, also sozusagen schon auf den Button gedrückt wurde.
Denn das ist mein Problem, ich kann zwar den Link verändern, aber wenn man ihn dann in einem leeren Tab eingibt, kommt die Ausgangsseite, bei der man noch auf den Button klicken muss, um die Veränderung sehen zu können.
Ich hoffe mir kann jemand helfen, am liebsten wäre es mir, wenn mir jemand auf http://jsfiddle.net eine Vorlage, bei der eben genau dies möglich ist erstellen könnte.
Vielen Dank im Voraus! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich würds ganz einfach so lösen, dass du den Buttons einen href mit # davor gibst. Wie du vielleicht weisst, ändert das die URL für den Browser nicht ab und die Seite lädt normal, für dich aber.
Dann liest du mit JavaScript die URL aus und splittest das #. Das Ergibt einen Array und somit auch deinen Paramter. Das ist der Schritt, der bei dir nicht klappt. Somit kannst du mit dem Link dann den geklickten Button simulieren.
url = document.URL; parameter = url.split('#')[1]; alert(parameter);
Du kannst die URL aber auch mit JavaScript ändern, dafür google mal window.history.replaceState. Ich empfehle jedoch die Variante mit #.
Ein jsFiddle möchte ich dir nicht posten. Probiers am besten selbst aus, so solltest du das hin bekommen. Der Lerneffekt ist so wenigstens da.
Mein Script kannst du auch testen indem du auf einer beliebigen Seite, z.B. Lima-City #Test hinten an die Url hängst und mein Script in der Konsole eingibst.
Beitrag zuletzt geändert: 31.10.2014 15:49:55 von c143 -
Vielen Dank für die schnelle Antwort!
Ich habe es soweit geschafft, allerdings muss ich, wenn ich 2 oder mehrere Buttons einbaue, immer zweimal auf diesen Button drücken bis der Inhalt kommt. Denn beim ersten Mal ändert sich die Adresse, und erst beim zweiten Mal kann dann mit dieser neuen Adresse gearbeitet werden.
hier der Code dazu:
$(function() { url = document.URL; parameter = url.split('#')[1]; $('#contentplace').load(parameter+'.html'); $('.button').on('click', function(){ url = document.URL; parameter = url.split('#')[1]; $('#contentplace').load(parameter+'.html'); }); });
Außerdem wollte ich noch fragen, gibt es auch eine Möglichkeit, wo in der Adresszeile dann nicht dieses '#' vorkommt?
Lg atraxoo -
Ich hab dir mal hier mein Script hochgeladen. Es beinhaltet folgenden Code:
<!DOCTYPE html> <html> <head> <title>atraxoo</title> <meta charset="UTF-8"> <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script> <script> $(document).ready(function(){ url = document.URL; parameter = url.split('#')[1]; if (typeof parameter != 'undefined'){ alert('Load wird durgeführt mit '+parameter) }else{ $(".button" ).each(function(index) { $(this).click(function(){ parameter = $(this).attr('href'); parameter = parameter.split('#')[1]; alert('Load wird durgeführt mit '+parameter) }); }); } }); </script> </head> <body> <a class="button" href="#button1">Button 1</a> <a class="button" href="#button2">Button 2</a> <a class="button" href="#button3">Button 3</a> </body> </html>
In Zeile 8 Wird zuerst mal abgewartet bis das Dokument geladen wird.
Dann in Zeile 9 und 10 wie schon bekannt mal der parameter ausgelesen.
In Zeile 12 wird aber überprüft ob überhaupt einer vorhanden ist, die Seite kann ja auch normal aufgerufen werden.
Wenn einer vorhanden ist, hab ich jetzt einfach mal ein alert eingebaut, dass ausgibt welcher Button in der Adresszeile stand.
Ansonsten (else) haben wir einen event Listener für die Klasse .button bei Zeile 15.
Für jeden auf click. Dabei wird das Attribut href ausgelesen und somit erhalten wir wieder den Parameter, den ich dir per alert ausgegeben habe.
atraxoo schrieb:
Wie bereits schon erwähnt, ja gibt es. Sogar zwei. Wie schon im ersten post steht kannst du mit JavaScript die Adresszeile so verändern wie du willst und wieder auslesen. Du kannst das ganze aber auch über PhP parameter Lösen und diese mit htaccess auch beliebig verändern.
Außerdem wollte ich noch fragen, gibt es auch eine Möglichkeit, wo in der Adresszeile dann nicht dieses '#' vorkommt?
Aber ich empfehle diese Methode. Jedoch:
Mein Code ist jetzt einfach so hin geklatscht. Ich kenne das Prinzip und das wird auch von manchen grösseren Seiten so genutzt, aber beachte, dass das nicht einfach die perfekte Methode ist.
Darum mag ich auch diese fertigen Scripts nicht. Du weisst jetzt wies ungefähr funktioniert und ändre was wenn nötig, weil perfekt ist es sicher noch nicht.
Beitrag zuletzt geändert: 1.11.2014 13:15:58 von c143 -
Ich habe das Script ausprobiert und habe dabei folgendes Problem festgestellt:
Wenn man in die Adresszeile den Ausgangslink, also ohne #button1 2 oder 3 eingibt, dann funktioniert dieses Prinzip wunderbar, denn dann läuft es ja über die "else" - Funktion.
Wenn man aber gleich die Adresse xxxx#button 1 2 oder 3 eingibt, dann greift nur die "if" - Funktion, und man kann dann auf der Seite nicht mehr zwischen den Inhalten wechseln so wie davor, weil ja nicht die "else" - Funktion läuft.
Gibt es für dieses Problem auch noch eine Lösung?
ps. Ich würde dir gern eine positive Bewertung geben, kann es aber nicht, weil ich ja selber 3 positive Bewertungen haben muss :/ -
Ach so, ich dachte du willst das gar nicht.
Kenne ja deinen Anwendungszweck nicht.
Das else ganz einfach entfernen und alles was drin steht in den 'normalen' Bereich packen. Hab den Code auch über meinen Beispiel Link angepasst.
atraxoo schrieb:
Kein Problem. Ein einfaches Danke bewirkt ja das Selbe. :-) Gern geschehen!
ps. Ich würde dir gern eine positive Bewertung geben, kann es aber nicht, weil ich ja selber 3 positive Bewertungen haben muss :/
EDIT: Habe die If Überprüfung noch angepasst:
Somit muss hinter dem # auch was stehen. Du kannst das aber auch löschen, wenn du sowieso bei einem Error zurück geben willst "Seite nicht gefunden" oder etwas ähnliches. Bedenke, dass so jede beliebige Angabe in den Link editiert werden kann.if(typeof parameter != 'undefined' && parameter.length > 1){
Beitrag zuletzt geändert: 1.11.2014 20:08:19 von c143 -
Super! Großes Dankeschön für deine Hilfe! :)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage