#1 10. Oktober 2011 jquery php-inhalt in div laden huhu, ich mal wieder... ich bin gerade dabei ein wenig mit jquery umzugehen, natülich klappt wieder nix^^ vorhaben: ich habe eine index.php; in der befinden sich links á la Code: <a href="data.php" id="link">Link</a> desweiteren befindet sich auf der index.php ein div: Code: <div class="content" id="content"></div> desweiteren habe ich eine einfache data.php-Datei: Code: <?php echo "data"; ?> wie ihr euch jetzt vielleicht denkt möchte ich folgendes, onClick auf den link soll der inhalt der data.php in den div auf der index.php geladen werden. mein ansatz (aus der jquery docu zusammengeschustert): Code: <script type="text/javascript" language="JavaScript"> $(document).ready(function(){ $("#link").click(function(event){ $("#content").load("data.php"); }); }); </script> leider macht er nicht das was ich möchte, sondern springt einfach zur data.php; was mach ich falsch ? der grundaufbau scheint ja zu stimmen, denn wenn ich anstatt des load's einen einfachen alert ausgeben lasse so macht er es...??? danke! + Multi-Zitat Zitieren
#2 10. Oktober 2011 AW: jquery php-inhalt in div laden PHP: < script type = "text/javascript" language = "JavaScript" > $( document ). ready (function( evt ){ $( "#link" ). click (function( event ){ evt . preventDefault (); // Sorgt dafuer das der link nicht aufgerufen wird! $( "#content" ). load ( "data.php" ); }); });</ script > + Multi-Zitat Zitieren
#3 10. Oktober 2011 AW: jquery php-inhalt in div laden danke für deine antwort aber irgendwie hat dieses preventDefault keinen effekt ??? ah, habe es doch hinbekommen jetzt mit: PHP: < script type = "text/javascript" language = "JavaScript" > function contentloader ( e ){ switch( e ){ case "profil" : $( "#content" ). load ( "profil.php" ); var Ziel = "!profil" ; window . location . hash = Ziel ; break; case "einstellungen" : $( "#content" ). load ( "einstellungen.php" ); var Ziel = "!einstellungen" ; window . location . hash = Ziel ; break; case "freunde" : $( "#content" ). load ( "freunde.php" ); var Ziel = "!freunde" ; window . location . hash = Ziel ; break; } } </ script > ... wie man sieht habe ich jetzt noch eingebaut, dass sich die url verändert wenn ein php file eingelesen wird; mein problem ist jetzt noch - wenn ich direkt beispielsweise index.php#!profil in die adressleiste eingebe dann läd er zwar die seite, jedoch ohne den inhalt der profil.php in den content div zu laden weiß jemand wie ich das anders machen kann? danke schonmal für die hilfen + Multi-Zitat Zitieren
#4 11. Oktober 2011 AW: jquery php-inhalt in div laden Guck was beim Aufrufen im Hash steht und mach das selbe wie beim Click-Event. PHP: $( document ). ready (function(){switch( window . location . hash ) { case 'profil' : $( "#content" ). load ( "profil.php" ); break;...}); + Multi-Zitat Zitieren
#5 11. Oktober 2011 AW: jquery php-inhalt in div laden hey nano, ich bin noch komplett neu in der materie, ergo verstehe ich nicht genau was du meinst... ehrlich gesagt scheitert es bei mir schon dabei: PHP: < script type = "text/javascript" language = "JavaScript" >$( document ). ready (function(){ function contentloader ( e ){ switch( e ){ case "profil" : $( "#content" ). load ( "profil.php" ); var Ziel = "!profil" ; window . location . hash = Ziel ; break; case "einstellungen" : $( "#content" ). load ( "einstellungen.php" ); var Ziel = "!einstellungen" ; window . location . hash = Ziel ; break; case "freunde" : $( "#content" ). load ( "freunde.php" ); var Ziel = "!freunde" ; window . location . hash = Ziel ; break; } } //content loader schließt }); </ script > das ganze funktioniert so nicht, also wenn ich das jquery spezifische $(document).ready(function(){ }); um meine funktion herum packe, ich nehme mal an weil das window.location.hash so bei jquery nicht existiert ?! und was genau meinst du mit ,,das selbe wie beim click event'' - das click event gibt es ja so nicht mehr, da ich die funktion in den entsprechenden links auf der index.php mit PHP: href = "javascript:contentloader('profil');" aufrufe...??? danke schonmal! + Multi-Zitat Zitieren
#6 12. Oktober 2011 AW: jquery php-inhalt in div laden Du hast deine Funktion "contentloader", wenn du dieser Funktion den Hash vom Aufruf übergibst, dann wird automatisch der Inhalt geladen. Der Hash ist übrigens das was nach der Raute # kommt Rufe ich also deine Seite wie folgt auf, dann sollte der inhalt der profil.php erscheinen: http://domain.tld/#profil oder http://domain.tld/index.php#profil Sollte kein, oder ein ungültiger, hash übergeben werden, dann greift keine der Switch regeln und die Seite wird mit dem index-inhalt angezeigt. PHP: < script type = "text/javascript" language = "JavaScript" > function contentloader ( e ){ switch( e ){ case "profil" : $( "#content" ). load ( "profil.php" ); var Ziel = "profil" ; window . location . hash = Ziel ; break; case "einstellungen" : $( "#content" ). load ( "einstellungen.php" ); var Ziel = "einstellungen" ; window . location . hash = Ziel ; break; case "freunde" : $( "#content" ). load ( "freunde.php" ); var Ziel = "freunde" ; window . location . hash = Ziel ; break; } } //content loader schließt $( document ). ready (function(){ // Sobald der DOM fertig ist wird der Hash als Parameter an deine cintentloader Funktion übergeben contentloader ( window . location . hash . substring ( 1 ) ); // Substring da der hash die Raute mitliefert }); </ script > + Multi-Zitat Zitieren
#7 12. Oktober 2011 AW: jquery php-inhalt in div laden Ich denke, du suchst das: jQuery (demo) + Multi-Zitat Zitieren
#8 13. Oktober 2011 AW: jquery php-inhalt in div laden kleine verbesserung: Code: (function($) { function loadContent(id) { switch (id) { case 'profil': case 'einstellungen': case 'freunde': break; default: return; } $("#content").load(id + ".php"); window.location.hash = id; } $(function() { if (window.location.hash) loadContent(window.location.hash.substring(1)); }); })(jQuery); + Multi-Zitat Zitieren
#9 13. Oktober 2011 AW: jquery php-inhalt in div laden @ nanobyte - vielen dank, so hab ichs geschnallt! @ breyndot - wtf, da muss ich nochmal genauer drüber nachdenken @ murdoc - das ist jetzt aber nur dahingehend verbessert dass hash und zu ladende php datei direkt aus der übergebenen id resultieren, was mir zwar schreibaufwand erspart, aber vorraussetzt das id und namen übereinstimmen, seh ich das so richtig, oder hat dein vorschlag auch performancetechnische vorteile? + Multi-Zitat Zitieren
#10 14. Oktober 2011 AW: jquery php-inhalt in div laden die funktion macht 1:1 das selbe, nur eben nach dem DRY-prinzip. sollte `id` nicht der php-datei entsprechen, welche du anfordern wilst, kannst du sie in dem switch-statment immer noch ändern. z.b.: Code: (function($) { function loadContent(id) { switch (id) { case 'profil': id = 'benutzerprofil'; break; case 'einstellungen': case 'freunde': break; default: return; } $("#content").load(id + ".php"); window.location.hash = id; } $(function() { if (window.location.hash) loadContent(window.location.hash.substring(1)); }); })(jQuery); und dank des closures ist die funktion nicht mehr vom globalen jQuery-objekt abhänig. d.h.: jQuery.noConflict() im nachhinein hat keine auswirkung mehr auf die funktionalität. im beispiel von nanobyte jedoch wird davon ausgegangen, dass $ eine referenz von jQuery ist. wenn du die funktion loadContent global ansprechen willst, musst du sie nur noch exportieren: Code: var loadContent = (function($) { function loadContent(id) { switch (id) { case 'profil': case 'einstellungen': case 'freunde': break; default: return; } $("#content").load(id + ".php"); window.location.hash = id; } $(function() { if (window.location.hash) loadContent(window.location.hash.substring(1)); }); return loadContent; })(jQuery); + Multi-Zitat Zitieren
#11 16. Oktober 2011 AW: jquery php-inhalt in div laden hm okay, ich glaub ich verstehe noch nicht ganz warum das jetzt in dem Fall nötig ist, also ich kann mir nicht vorstellen, wann man es dringend benötigt, aber ich hoffe die einsicht wird mit der zeit folgen danke schonmal für deine und der anderen hilfen. + Multi-Zitat Zitieren
#12 19. Oktober 2011 AW: jquery php-inhalt in div laden ich muss das hier noch einmal ausgraben, ich probiere gerade in die funktion einzubauen, dass während des ladens ein animiertes gif eingeblendet wird. dafür habe ich zum einen die beiden funktionen: PHP: function showLoading () { $( "#contentisloading" ). show (); } function hideLoading () { $( "#contentisloading" ). hide (); } erstellt und dann in die gegebene funktion eingebaut: PHP: var loadContent = (function($) { function loadContent ( id ) { switch ( id ) { case 'profil' : case 'einstellungen' : case 'freunde' : break; default: return; } showLoading (); $( "#content" ). load ( id + ".php" ); window . location . hash = id ; } $(function() { if ( window . location . hash ) loadContent ( window . location . hash . substring ( 1 )); }); return loadContent ;})( jQuery ); die funktion hideLoading() wird in meiner $(document).ready(function() aufgerufen. das sollte doch jetzt eigentlich schon bedeuten ,, rufe die funktion auf (SHOW -> setze display:none auf block) bevor der content geladen wird und blende den div container wieder aus, sobald der inhalt der seite komplett geladen ist'' oder? jedenfalls würde ich jetzt erwarten, dass er beim aufrufen der loadContent funktion das bild anzeigt, was er jedoch nicht macht...? wo liegt mein denkfehler? ps. - ein einfacher aufruf im link, in dem ich auch die LoadContent() aufrufe schein nicht zu funktionieren, der loading-div wird zwar kurzzeitig angezeigt, allerdings wird er wieder ausgeblendet bevor der komplette inhalt der datei geladen ist (testweise 3 große bilder) - das sollte ja eigentlich nicht so sein oder, on document ready bedeutet ja schon, dass alles geladen soll ? gruß zippo + Multi-Zitat Zitieren