Anzeige

[JS] Inhalt nur in DIV neu laden

[JS] Inhalt nur in DIV neu laden | PSD-Tutorials.de

Erstellt von Hansi05, 28.06.2009.

  1. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    Hallo,

    ich will wenn man auf einen Link klickt, es nicht das Layout neu lädt sondern nur den Inhalt in der Div.

    Dazu habe ich folgendes gefunden:

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <script language="javascript">
    5. function tester (textValue){
    6. var initialText = "";
    7. switch (textValue) {
    8.   case 'link1':
    9.     initialText = "link1,link1,link1,link1,link1,link1,link1,link1,link1!";
    10.     break;
    11.   case "link2":
    12.     initialText = "link2,link2,link2,link2,link2,link2,link2,link2,link2!";
    13.     break;
    14.   case "link3":
    15.     initialText = "link3,link3,link3,link3,link3,link3,link3,link3,link3!";
    16.     break;
    17. }
    18. document.getElementById("textContainer").firstChild.nodeValue = initialText;
    19. }
    20. </script>
    21. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    22. <title>Untitled Document</title>
    23. <style type="text/css">
    24. <!--
    25. #textContainer {
    26.     position:absolute;
    27.     left:169px;
    28.     top:17px;
    29.     width:188px;
    30.     height:129px;
    31.     z-index:1;
    32. }
    33. -->
    34. </style>
    35. </head>
    36.  
    37. <body>
    38. <div id="textContainer">&nbsp;</div>
    39. <p><a href="#" onclick="javascript:tester('link1')">link 1</a></p>
    40. <p><a href="#" onclick="javascript:tester('link2')">link 2</a></p>
    41. <p><a href="#" onclick="javascript:tester('link3')">link 3</a></p>
    42. </body>
    43. </html>
    Eig genau das, was ich suche, nur 2/3 Dinge würde ich gerne noch anders haben.
    1. Es sollen Datein (php/htm) reingeladen werden wo der Inhalt drin steht.
    2. Es soll den obereb Link als "defalut" anzeigen, also soll von Anfang an da stenen
    und als I-Punkt wäre noch richtig gut, wenn noch eine kleine Ladegrafik eingebaut wird wenn man wechselt.

    Ich hoffe mal, dass mir da einer von euch helfen kann. Ich würde nur ungerne was komplett vorgefertigtes nehmen, weil da viel zu viel Zeug drin steht, und den Code eig nur unnötig groß macht. Wills einfach halten ;)

    Also hab im Voraus schonmal Dank ;)
     
    #1      
  2. MaedeG

    MaedeG Nicht mehr ganz neu hier

    Dabei seit:
    31.07.2008
    Beiträge:
    90
    Geschlecht:
    männlich
    Software:
    Photoshop CS4, Notepadd++
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    sowas vieleicht?

    PHP:
    1.  
    2. <?php
    3. $page = htmlentities($_GET["page"]);
    4. if ($page == "startseite") {
    5.  include('startseite.html');
    6. } elseif ($page == "") {//als Default
    7.   include('startseite.html');
    8. } else {//als Fehlermeldung
    9.   include('z.b. Fehleranzeige');
    10. }
    11. ?>
    12.  
    du hast dann z.b. eine index.php und die url "index.php?page=startseite" und mit dieser url wird dann der entsprechende content in die index.php geladen...
     
    Zuletzt bearbeitet: 28.06.2009
    #2      
  3. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Dann lädt es das Außengerüst aber mit, es soll aber nur den Inhalt in die Div laden.
     
    #3      
  4. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Du suchst also nach Moeglichkeiten, Inhalte dynamisch nachzuladen.
    Alles was du dazu brauchen wuerdest, waere ein bisschen Grundwissen in Sachen ajax.
    Moeglichkeiten gibt es sicherlich viele und man kann hier auch viel kombinieren, denke ich aber schau es dir hier einfach mal an und hol dir eine erste Inspiration:
    How to load content via AJAX in jQuery. By yensdesign.com

    Ich denke, dass dieses Beispiel alles drin hat, was du hier 'forderst'
     
    #4      
  5. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Sieht auf alle Fälle gut aus, ich versuch mal mein Bestes das anzupassen, danke ;)
     
    #5      
  6. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    So, da ich aus privaten Gründen kaum Zeit hatte, hab ich mich erst jetzt ans Anpassen machen können.

    Ich hab jetzt folgenden Code:

    Code (Text):
    1. $(document).ready(function(){
    2.     //References
    3.     var sections = $("#tabs li");
    4.     var loading = $("#loading");
    5.     var content = $("#content");
    6.    
    7.     //Manage click events
    8.     sections.click(function(){
    9.         //show the loading bar
    10.         showLoading();
    11.         //load selected section
    12.         switch(this.id){
    13.             case "content_s1":
    14.                 content.slideUp();
    15.                 content.load("content_s1.php", hideLoading);
    16.                 content.slideDown();
    17.                 break;
    18.             case "content_s2":
    19.                 content.slideUp();
    20.                 content.load("content_s2.php", hideLoading);
    21.                 content.slideDown();
    22.                 break;
    23.             case "content_s3":
    24.                 content.slideUp();
    25.                 content.load("content_s3.php", hideLoading);
    26.                 content.slideDown();
    27.                 break;
    28.             default:
    29.                 //hide loading bar if there is no selected section
    30.                 hideLoading();
    31.                 break;
    32.         }
    33.     });
    34.  
    35.     //show loading bar
    36.     function showLoading(){
    37.         loading
    38.             .css({visibility:"visible"})
    39.             .css({opacity:"1"})
    40.             .css({display:"block"})
    41.         ;
    42.     }
    43.     //hide loading bar
    44.     function hideLoading(){
    45.     loading.fadeTo(1000, 0);
    46.     };
    47. });
    Wenn ich jetzt auf die entsprechenden "Links" klicke lädt der mir auch die Datein rein. Mein Problem ist jetzt, dass wenn ich die Seite Lade und noch auf nichts geklickt habe, möchte ich gerne, dass die "content_s1.php" automatisch drin steht ... Hab da default gefunden und das auch wenig ausprobiert aber iwie wollte das nicht klappten.

    Kann mir da jmd helfen?
     
    #6      
  7. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Einfach wenn die HTML Datei erzeugt wird per PHP an der richtigen Stelle (im DIV) die Datei content_s1.php includen.
    Du könntest sie auch bei document ready laden, aber das wäre verlängert das Laden der Seite.
     
    #7      
  8. photonova

    photonova Noch nicht viel geschrieben

    Dabei seit:
    08.08.2008
    Beiträge:
    37
    Geschlecht:
    männlich
    Ort:
    Bad Oeynhausen
    Software:
    PS2, GIMP und Webentwicklung mit PHP, MySQL, XHTML und CSS
    Kameratyp:
    Canon EOS 50D
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Ich hatte das gleiche Problem letzte Woche... vielleicht kannst du damit was anfangen

    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    3.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4.  
    5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    6. <head>
    7.  
    8. <title>JS-Inhalt</title>
    9.  
    10. <meta http-equiv="content-type" content="text/html;charset=ISO-8895-15" />
    11.  
    12. <script language="javascript">
    13.  
    14.   var aPages    = new Array (
    15.                   'seite1.html'
    16.                 , 'seite2.html'
    17.                 , 'seite3.html'
    18.                 , 'seite4.html'
    19.                 );
    20.  
    21.   var oStart    = false;
    22.   var iInterval = 10000;
    23.   var iActive   = 1;
    24.  
    25.   function changeData(){
    26.     var iLength = aPages.length-1;
    27.     var iA=iActive+1;
    28.  
    29.     if (iLength==iActive)iA=0;
    30.       iActive=iA;
    31.      
    32.     getData(iActive);
    33.     oStart = window.setTimeout(changeData,iInterval);
    34.   }
    35.  
    36.  
    37.   if (window.XMLHttpRequest) {
    38.     XMLHttpRequestObject = new XMLHttpRequest();
    39.   } else if (window.ActiveXObject) {
    40.     XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    41.   }
    42.  
    43.  
    44.   function getData(iID) {
    45.  
    46.   if (XMLHttpRequestObject) {
    47.     XMLHttpRequestObject.open("GET", aPages[iID]);
    48.     XMLHttpRequestObject.onreadystatechange = function() {
    49.  
    50.       if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
    51.         document.getElementById('show').innerHTML = XMLHttpRequestObject.responseText;
    52.       }
    53.     }
    54.     XMLHttpRequestObject.send(null);
    55.   }
    56.   }
    57.  
    58.  
    59.   function startStopChangeData () {
    60.     var obj=document.getElementById('startStop');
    61.  
    62.     if (oStart){
    63.       oStart = window.clearTimeout(oStart);
    64.       obj.innerHTML='Show starten';
    65.     } else {
    66.       oStart = window.setTimeout(changeData,iInterval);
    67.       obj.innerHTML='Show anhalten';
    68.     }
    69.   }
    70.  
    71.   window.setTimeout(changeData,iInterval);
    72.  
    73. </script>
    74.  
    75. </head>
    76.  
    77. <body>
    78. <div id="container">
    79.  
    80.       <div id="inhalt">
    81.  
    82.         <div id="show"><?php include ('startseite.html'); ?></div>
    83.         <p id="startStop" onclick="startStopChangeData();" style="cursor:pointer;" class="luxus">Show anhalten</p>
    84.  
    85.       </div>
    86.  
    87. </div>
    88. </body>
    89. </html>
    90.  
    den PHP-Include kannst du auch weglassen... ich wollte nur eine Art Startseite
     
    #8      
  9. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden


    Genau dafür wäre der Include gut.
     
    #9      
  10. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    @stroyer
    include fällt aus weil:

    da hat er recht

    eine möglichkeit komplett ohne JS o.ä. wär halt noch ein Frame... zwar nicht soooo Suchmaschinen freundlich vlt aber im Grunde doch eigentlich genau das was du suchst.
     
    Zuletzt bearbeitet: 28.07.2009
    #10      
  11. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    gemeint war, dass es ganz am Anfang einen fixen Ausgangszustand gibt, der dann per AJAX geändert wird.
     
    #11      
  12. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Okay, ich hab jetzt einfach in die Datei Div wo der Content rein soll die content_s1.php per include rein gepackt, und so einfach funkt das auch, danke Dir ;)

    Ich hoffe mal, dass sich die Sache jetzt entgültigt erledigt hat :eek:

    Danke auch an die anderen alle :uhm:
     
    #12      
  13. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Und ich muss noch mal was fragen .............. Es hat sich JETZT erst ergeben, dass die einzelnen Sectionne verlinkt werden müssen, geht dsa irgendwie? Also dass ich ne Standard Datei haben (Home) und in Home dann 3 unter Links, die er beim Anklicken nicht neu lädt, die aber untereinander verlinkt werden sollen.

    Hab das jetzt ca so, dass ich in Home quasi 3 Tabs habe, und innerhalb des Inhalts dieser Tabs will ich nen Link zu dem jeweilig anderen Tab einfügen kann ...
     
    #13      
  14. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Du wirst ja eine Javascript Funktion zum Anzeigen haben. Die rufst du einfach im Link auf.
     
    #14      
  15. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Ich bin leider nicht so bewandert auf dem Gebiet, hier mal der JS Code:

    Code (Text):
    1. $(document).ready(function(){
    2.     //References
    3.     var sections = $("#tabs li");
    4.     var loading = $("#loading");
    5.     var content = $("#content");
    6.    
    7.     //Manage click events
    8.     sections.click(function(){
    9.         //show the loading bar
    10.         showLoading();
    11.         //load selected section
    12.         switch(this.id){
    13.             case "content_s1":
    14.                 content.slideUp();
    15.                 content.load("/section/Home/Home/content_s1.php", hideLoading);
    16.                 content.slideDown();
    17.                 break;
    18.             case "content_s2":
    19.                 content.slideUp();
    20.                 content.load("/section/Home/Home/content_s2.php", hideLoading);
    21.                 content.slideDown();
    22.                 break;
    23.             case "content_s3":
    24.                 content.slideUp();
    25.                 content.load("/section/Home/Home/content_s3.php", hideLoading);
    26.                 content.slideDown();
    27.                 break;
    28.             default:
    29.                 //hide loading bar if there is no selected section
    30.                 hideLoading();
    31.                 break;
    32.         }
    33.     });
    34.  
    35.     //show loading bar
    36.     function showLoading(){
    37.         loading
    38.             .css({visibility:"visible"})
    39.             .css({opacity:"1"})
    40.             .css({display:"block"})
    41.         ;
    42.     }
    43.     //hide loading bar
    44.     function hideLoading(){
    45.     loading.fadeTo(1000, 0);
    46.     };
    47. });
    Und hier wie die "verlinkt" sind:

    Code (Text):
    1. <li id="content_s1">Home</li>
    2. <li id="content_s2">News</li>
    3. <li id="content_s3">Terminkalender</li>
    Wenn ich jetzt aber un Inhalt der einzelnen Dateien die Liste noch mal einfüge, gehen die "Links" nicht mehr :(
     
    #15      
  16. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    PHP:
    1.  
    2. function clickIt(site)
    3. {
    4. var content=$("#content");
    5. content.slideUp();
    6. content.load("/section/Home/Home/content_s"+site+".php", hideLoading);
    7. content.slideDown();
    8. }
    9.  
    <a href="javascript:void(0);" onclick="javascript:clickIt(1);">Klick 1</a>

    z.B. so
     
    #16      
  17. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Auch auf die Gefahr hin, dass ich mich wiederhole, aber ich kann sowas kaum :(

    Kannst Du mir das bitte in meinen geposteten Code einfügen? (Sorry ........... :()
     
    #17      
  18. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Den Code-Schnippsel irgendwohin in den JS-Block, am besten unter den von dir geposteten Code.
    Das untere ist nur der Link.
     
    #18      
  19. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Wenn ich das einfach ganz unten in meine JavaScript Datei packe, schließt sich der aktuelle Tab aber es öffnet sich nicht der gewünschte neue (in deinem Link meinst du ja sicher den ersten, sprich content_s1, oder?)
     
    #19      
  20. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    [JS] Inhalt nur in DIV neu laden
    AW: [JS] Inhalt nur in DIV neu laden

    Hallo,

    ich muss das Thema aus dem Grund noch mal aufgreifen. Wenn ich nach der Methode:
    How to load content via AJAX in jQuery. By yensdesign.com
    meine Seite gestalte, hab ich ein Problem mit PHP. Angenommen ich lade im Layout eine Datei wo diverse Variablen drin stehen, ich die auf einer der Seiten abrufen will, habe ich dann das Problem dass die Variable quasi nicht gefunden wird, da die Seite nur drüber geladen wird :(

    Gibts vielleicht ne andere Variante? :eek:
     
    #20      
x
×
×