[JavaScript] jquery php-inhalt in div laden

_zippo^ · 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!

Anzeige

Nanobyte · 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 >

_zippo^ · 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

Nanobyte · 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;
...
});

_zippo^ · 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!

Nanobyte · 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 >

Breyndot-Echse · 12. Oktober 2011

AW: jquery php-inhalt in div laden

Ich denke, du suchst das: jQuery (demo)

Murdoc · 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);

_zippo^ · 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?

Murdoc · 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);

_zippo^ · 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.

_zippo^ · 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

Nützliche Suchen

[JavaScript] jquery php-inhalt in div laden

Videos zum Themenbereich