Dynamiczna zmiana zawartości DIVa

0

Witam,

Nie wiem za bardzo jak osiągnąć dynamiczną zmianę zawartości DIVa. Otoż mam na stronie element DIV oraz kilka przycisków. Element DIV ma ID="mojDIV". Każdy z przyciskow miałby cos napisać (usuwając poprzednią zawartość) w elemencie DIV. To znaczy, pierwszy przycisk wyświetla liste osob w mojDIV. Drugi przycisk wyświetla liste ksiażek w mojDIV itd. Na razie robie to poprzez:

var mojDIC = document.getElementById('ramkaTop');

function aboutAuthors()
{
    mojDIV.innerHTML = "<a href='#' onClick='about(osoba1);'>Osoba 1</a><br><a href='#' onClick='about(osoba2);'>Osoba 2</a>";
}

function poezja()
{
    mojDIV.innerHTML = "<a href='#' onClick='ksiazka(ks1);'>Książka 1</a><br><a href='#' onClick='wiersz(ks2);'>Książka 2</a>";

}

Problem w tym, że to nie działa tak, aby sie zmieniała zawartość tego elementu DIV. Ma ktoś pomysł jak to rozwiązać? Będzie potrzebny AJAX?

Czesc pliku index.html:

<div id="wrap">     
        <div id="ramkaTop">
            tekst próbny :)
        </div>

        <div id="buttons">
            <ul>
                <li><img id="autorzy" src="graphics/Autorzy.png" alt="Autorzy" width="154" height="64" onclick="aboutAuthors();" /></li>
                <li><img id="poezja" src="graphics/Poezja.png" alt="Poezja" width="154" height="64" onclick="poezja();" /></li>
            </ul>
        </div>
    </div>
0

Pewnie problem jest tutaj:

var mojDIC = document.getElementById('ramkaTop');

Zastanów się, co tutaj jest źle.

0

To był bład przy wpisywaniu. Postanowiłem zrobic tak:

function aboutAuthors()
{
        var mojDIC = document.getElementById('ramkaTop');
        mojDIV.innerHTML = "<a href='#' onClick='about(osoba1);'>Osoba 1</a><br><a href='#' onClick='about(osoba2);'>Osoba 2</a>";
}

function poezja()
{
        var mojDIC = document.getElementById('ramkaTop');
        mojDIV.innerHTML = "<a href='#' onClick='ksiazka(ks1);'>Książka 1</a><br><a href='#' onClick='wiersz(ks2);'>Książka 2</a>";

}

Działa tylko pierwszy przycisk. Reszta nie działa. Natomiast w htmlu mam taki kod:

<div id="wrap">     
        <div id="ramkaTop" name="ramkaTop" >
            tekst próbny
        </div>

        <div id="buttons">
            <ul>
                <li><img id="autorzy" src="graphics/Autorzy.png" alt="Autorzy" width="154" height="64" onclick="aboutAuthors();" /></li>
                <li><img id="poezja" src="graphics/Poezja.png" alt="Poezja" width="154" height="64" onclick="poezja();" /></li>
            </ul>
        </div>  
    </div>
0

Lepiej do tego zaprzęgnąć jQuery; będziesz miał dodatkowo kilka efektów do wykorzystania (fade, slide, itd.);
BTW, sprawdź, co wywala konsola.

0

Pojawia się problem ze zdarzeniem onClick: "Uncaught TypeError: undefined is not a function (anonymous function)" w linii:

<li><img id="poezja" src="graphics/Poezja.png" alt="Poezja" width="154" height="64" onclick="poezja();" /></li>

Edit:

problem jest również, jeśli z pierwszej funkcji odwolam sie do jakiejsc zew. funkcji:
mojDIV.innerHTML = "<a href='#' onClick='about(osoba1);'>Osoba 1</a><br><a href='#' onClick='about(osoba2);'>Osoba 2</a>"

i w funkcji about() bede sie odwolywal do elementu mojDIV to koncola wypluwa: "Uncaught ReferenceError: martyna is not defined
(anonymous function)main.php:1
onclick"

Jest wskazanie na pierwsza linie:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

0

skoro Ci pisze: martyna is not defined
to pokaż nam fragment kodu w którym jest słowo "martyna"

0

martyna to osoba1 w kodzie. Poradzilem sobie z problemem przy pomocy jquery ale bardziej martwi mnie rozwiazanie bez niego.

0

no to użyłeś martyna jako zmiennej
zapewne chodziło Ci o tekst "martyna" czyli zapomniałeś ująć tego słowa w cudzysłowy (które byś musiał escape'ować, bo to już trzeci zagnieżdżony cudzysłów: \")

0

Sprawdze te cudzyslowy. Do tej pory wzorem jedenj stronki uzywalem na zewnatrz " a wewnetrznych pojedynczych '. Z rana sprawdze czy to dziala. Choc najdziwniejsze jest to, ze taka funkcja dla pierwszego przycisku dziala. Nie dziala dla kolejnych, wiec nie jestem przekonany czy to pomoze.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0