[JS] Inhalt nur in DIV neu laden

Hansi05 · 28.06.2009

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function tester (textValue){
var initialText = "";
switch (textValue) {
  case 'link1':
    initialText = "link1,link1,link1,link1,link1,link1,link1,link1,link1!";
    break;
  case "link2":
    initialText = "link2,link2,link2,link2,link2,link2,link2,link2,link2!";
    break;
  case "link3":
    initialText = "link3,link3,link3,link3,link3,link3,link3,link3,link3!";
    break;
}
document.getElementById("textContainer").firstChild.nodeValue = initialText;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#textContainer {
    position:absolute;
    left:169px;
    top:17px;
    width:188px;
    height:129px;
    z-index:1;
}
-->
</style>
</head>

<body>
<div id="textContainer">&nbsp;</div>
<p><a href="#" onclick="javascript:tester('link1')">link 1</a></p>
<p><a href="#" onclick="javascript:tester('link2')">link 2</a></p>
<p><a href="#" onclick="javascript:tester('link3')">link 3</a></p>
</body>
</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

MaedeG · 28.06.2009

AW: [JS] Inhalt nur in DIV neu laden

sowas vieleicht?

PHP:

<?php 
$page = htmlentities($_GET["page"]);
if ($page == "startseite") {
 include('startseite.html'); 
} elseif ($page == "") {//als Default
  include('startseite.html');
} else {//als Fehlermeldung
  include('z.b. Fehleranzeige');
}
?>

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...

Hansi05 · 28.06.2009

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.

leohh · 29.06.2009

AW: [JS] Inhalt nur in DIV neu laden

Du suchst also nach Moeglichkeiten, Inhalte dynamisch nachzuladen.

Hansi05 schrieb:
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.

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:

Ich denke, dass dieses Beispiel alles drin hat, was du hier 'forderst'

Hansi05 · 29.06.2009

AW: [JS] Inhalt nur in DIV neu laden

Sieht auf alle Fälle gut aus, ich versuch mal mein Bestes das anzupassen, danke

Hansi05 · 28.07.2009

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:

$(document).ready(function(){
    //References
    var sections = $("#tabs li");
    var loading = $("#loading");
    var content = $("#content");
    
    //Manage click events
    sections.click(function(){
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
            case "content_s1":
                content.slideUp();
                content.load("content_s1.php", hideLoading);
                content.slideDown();
                break;
            case "content_s2":
                content.slideUp();
                content.load("content_s2.php", hideLoading);
                content.slideDown();
                break;
            case "content_s3":
                content.slideUp();
                content.load("content_s3.php", hideLoading);
                content.slideDown();
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
    loading.fadeTo(1000, 0);
    };
});

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?

stroyer · 28.07.2009

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.

photonova · 28.07.2009

AW: [JS] Inhalt nur in DIV neu laden

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

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>JS-Inhalt</title>

<meta http-equiv="content-type" content="text/html;charset=ISO-8895-15" />

<script language="javascript">

  var aPages    = new Array (
                  'seite1.html'
                , 'seite2.html'
                , 'seite3.html'
                , 'seite4.html'
                );

  var oStart    = false;
  var iInterval = 10000;
  var iActive   = 1;

  function changeData(){
    var iLength = aPages.length-1;
    var iA=iActive+1;

    if (iLength==iActive)iA=0;
      iActive=iA;
      
    getData(iActive);
    oStart = window.setTimeout(changeData,iInterval);
  }


  if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }


  function getData(iID) {

  if (XMLHttpRequestObject) {
    XMLHttpRequestObject.open("GET", aPages[iID]);
    XMLHttpRequestObject.onreadystatechange = function() {

      if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
        document.getElementById('show').innerHTML = XMLHttpRequestObject.responseText;
      }
    }
    XMLHttpRequestObject.send(null);
  }
  }


  function startStopChangeData () {
    var obj=document.getElementById('startStop');

    if (oStart){
      oStart = window.clearTimeout(oStart);
      obj.innerHTML='Show starten';
    } else {
      oStart = window.setTimeout(changeData,iInterval);
      obj.innerHTML='Show anhalten';
    }
  }
  
  window.setTimeout(changeData,iInterval);

</script>

</head>

<body>
<div id="container">

      <div id="inhalt">

        <div id="show"><?php include ('startseite.html'); ?></div>
        <p id="startStop" onclick="startStopChangeData();" style="cursor:pointer;" class="luxus">Show anhalten</p>

      </div>

</div>
</body>
</html>

den PHP-Include kannst du auch weglassen... ich wollte nur eine Art Startseite

stroyer · 28.07.2009

AW: [JS] Inhalt nur in DIV neu laden

Hansi05 schrieb:
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

Genau dafür wäre der Include gut.

SineTempore · 28.07.2009

AW: [JS] Inhalt nur in DIV neu laden

@stroyer
include fällt aus weil:

Hansi05 schrieb:
Dann lädt es das Außengerüst aber mit, es soll aber nur den Inhalt in die Div laden.

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.

stroyer · 28.07.2009

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.

Hansi05 · 28.07.2009

AW: [JS] Inhalt nur in DIV neu laden

stroyer schrieb:
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.

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:

Hansi05 · 24.08.2009

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 ...

stroyer · 24.08.2009

AW: [JS] Inhalt nur in DIV neu laden

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

Hansi05 · 24.08.2009

AW: [JS] Inhalt nur in DIV neu laden

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

Code:

$(document).ready(function(){
    //References
    var sections = $("#tabs li");
    var loading = $("#loading");
    var content = $("#content");
    
    //Manage click events
    sections.click(function(){
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
            case "content_s1":
                content.slideUp();
                content.load("/section/Home/Home/content_s1.php", hideLoading);
                content.slideDown();
                break;
            case "content_s2":
                content.slideUp();
                content.load("/section/Home/Home/content_s2.php", hideLoading);
                content.slideDown();
                break;
            case "content_s3":
                content.slideUp();
                content.load("/section/Home/Home/content_s3.php", hideLoading);
                content.slideDown();
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
    loading.fadeTo(1000, 0);
    };
});

Und hier wie die "verlinkt" sind:

Code:

<li id="content_s1">Home</li>
<li id="content_s2">News</li>
<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

stroyer · 24.08.2009

AW: [JS] Inhalt nur in DIV neu laden

PHP:

function clickIt(site)
{
var content=$("#content");
content.slideUp();
content.load("/section/Home/Home/content_s"+site+".php", hideLoading);
content.slideDown();
}

<a href="javascript:void(0);" onclick="javascript:clickIt(1);">Klick 1</a>

z.B. so

Hansi05 · 24.08.2009

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 ...........

)

stroyer · 24.08.2009

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.

Hansi05 · 24.08.2009

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?)

Hansi05 · 02.11.2009

AW: [JS] Inhalt nur in DIV neu laden

Hallo,

ich muss das Thema aus dem Grund noch mal aufgreifen. Wenn ich nach der Methode:

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: