[JavaScript] jquery php-inhalt in div laden

Dieses Thema im Forum "Webentwicklung" wurde erstellt von _zippo^, 10. Oktober 2011 .

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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!
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.
  3. #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 >
     
  4. #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
     
  5. #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;
    ...
    });
     
  6. #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!
     
  7. #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 >
     
  8. #7 12. Oktober 2011
    AW: jquery php-inhalt in div laden

    Ich denke, du suchst das: jQuery (demo)
     
  9. #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);
     
  10. #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?
     
  11. #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);
     
  12. #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.
     
  13. #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
     

  14. Videos zum Thema
Die Seite wird geladen...
Similar Threads - JavaScript jquery php
  1. Antworten:
    9
    Aufrufe:
    1.354
  2. Antworten:
    2
    Aufrufe:
    1.207
  3. Antworten:
    5
    Aufrufe:
    961
  4. Antworten:
    1
    Aufrufe:
    1.289
  5. Antworten:
    22
    Aufrufe:
    1.983
  • Annonce

  • Annonce