Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dynamiczne tworzenie obiektów (JS)
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Sexee
31.03.2012, 22:53:54
Cytat
<script type="text/javascript" language="javascript">

function createDiv()
{
var element = document.createElement("div");

element.id = "item";
element.className = "item";
element.innerHTML = "xd"
document.body.appendChild(element);
element.style.width = '43';
element.style.height = '43px';
element.style.backgroundColor = '#FF6633';

var p = document.getElementById('sex');
var nowyNod = document.createTextNode('a');
p.insertBefore(element, item);
}
</script


Cześć, przeglądałem forum i napotkalem na czyjś post w którym była dynamiczna metoda tworzenia obiektów. Zacząłem się tym interesować jednak stoję na minie. Stworzony obiekt po wygenerowaniu tworzy się w dwóch miejscach - w divie którym chciałem i tym niechcianym. Nie mam pojęcia jak to naprawić, dlatego prosiłbym o pomoc.
mortus
1.04.2012, 09:12:59 
[JAVASCRIPT] pobierz, plaintext 
  1. // ...
  2. document.body.appendChild(element);  // tu wstawiasz raz
  3. // ...
  4. p.insertBefore(element, item);  // a tu drugi
[JAVASCRIPT] pobierz, plaintext
Sexee
1.04.2012, 11:07:59
Yhm, nie zauważyłem. Teraz mam taki kod:

Cytat
<script type="text/javascript" language="javascript">

function createDiv()
{
var element = document.createElement("div");

element.id = "item";
element.className = "item";
element.innerHTML = "xd"
element.style.width = '32';
element.style.height = '32px';
element.style.backgroundColor = '#c3c3c3';

var p = document.getElementById('sex');
var nowyNod = document.createTextNode('a');
p.insertBefore(element);
}

</script>


I chciałbym zapytać, jak zrobić by te obiekty potem się wczytały? Że gdy go utworzę to on będzie tam na stałe. Czy można zrobić do tego funkcję, że z pliku oblicza wartość i ona wczytuje właśnie takie elementy?
mortus
1.04.2012, 11:15:28
Cytat(Sexee @ 1.04.2012, 12:07:59 ) *
I chciałbym zapytać, jak zrobić by te obiekty potem się wczytały? Że gdy go utworzę to on będzie tam na stałe.

Nie wiem, co rozumiesz przez "na stałe". Można przypisać odpowiednią funkcję metodzie window.onload, ale wszystkie elementy generowane przez tę funkcję będą generowane po każdym wejściu na strone, czy to przez wpisanie adresu, czy przez odświeżenie. Żeby treść była później stała to musiałaby być generowana dynamicznie np. z bazy danych i aktualizowana po każdym wywołaniu wspomnianej funkcji. Zarys w JS:
[JAVASCRIPT] pobierz, plaintext 
  1. function createElements() {
  2.   // tutaj wszystkie obliczenia, ustawienie parametrów i wywołanie w pętli funkcji tworzącej pojedynczy element
  3. }
  4. window.onload = createElements;
[JAVASCRIPT] pobierz, plaintext
Sexee
1.04.2012, 11:30:01
Dokładnie o to chodzi, że wczytuje z czegoś - a na stałe to znaczy że nie tak jak obecnie, że usuwa stworzony obiekt po odświeżeniu a wręcz przeciwnie. Tylko nie wiem jak zrobić taką funkcję, a nawet gdzie szukać.
mortus
1.04.2012, 12:05:08
Jeśli aktualizacja tej treści ma się odbywać automatycznie, to trzeba posłóżyć się AJAX-em, który prześle aktualną treść do odpowiedniego skryptu PHP. Zadaniem tego skryptu PHP będzie aktualizacja treści, czy to w bazie danych, czy w pliku... przy czym z plikami będzie trochę zabawy. No i co najważniejsze, skrypt JS po ponownym uruchomieniu strony (wejście na stronę lub jej odświeżenie) nie może wstawiać tej samej treści jeszcze raz, a to oznacza, że musi być w jakiś sposób sparametryzowany.

Najlepiej by było, gdyby aktualizowana treść znajdowała się zawsze w jakimś głównym kontenerze (div-ie), wtedy wyglądałoby to mniej więcej tak:
[HTML] pobierz, plaintext 
  1. <head>
  2.   <script>
  3.     function updateSource(newContent)
  4.       // tutaj AJAX wysyłający newContent do pliku PHP
  5.     }
  6.     function createElements() {
  7.       // tutaj obliczenia i wstawianie nowych elementów do kontenera <div id="content">
  8.       // a później aktualizacja przez AJAX
  9.       var newContent = document.getElementById('content').innerHTML;
  10.       updateSource(newContent);
  11.     }
  12.     window.onload = createElements;
  13.   </script>
  14. </head>
  15. <body>
  16.   <div id="content">
  17.     <!-- ten element będzie dynamicznie zmieniany przez funkcję createElements -->
  18.   </div>
  19. </body>
[HTML] pobierz, plaintext

Natomiast, jak już pisałem, skrypt PHP powinien modyfikować źródło, czyli albo odpowiednie pliki, albo tabelę w bazie danych.
Sexee
1.04.2012, 12:29:48
Cytat
Najlepiej by było, gdyby aktaulizowana treść znajdowała się zawsze w jakimś głównym kontenerze (div-ie), wtedy wyglądałoby to mniej więcej tak:

No tak, i właśnie tak mam zamiar zrobić.

Cytat
Natomiast, jak już pisałem, skrypt PHP powinien modyfikować źródło, czyli albo odpowiednie pliki, albo tabelę w bazie danych.

Yhm, to raczej podstawa.

A jeżeli chodzi o AJAX'a - nie znam nawet w nim jednej funkcji więc to raczej sobie odpuszczę mimo iż jego możliwości są ogromne.

---------------------------------

[JAVASCRIPT] pobierz, plaintext 
  1. <script>
  2.  
  3.     function createElements() 
  4.    {
  5.      //tutaj wczytywanie
  6.       var newContent = document.getElementById('LOL').innerHTML;
  7.       updateSource(newContent);
  8.     }
  9.     window.onload = createElements;
  10. </script>
[JAVASCRIPT] pobierz, plaintext


Wszystko okej, ale ciekawi mnie jak zrobić zapis i odczyt. Potrafię tylko na plikach, bazy danych to nie temat na dziś. Może ktoś by umiał coś podpowiedzieć, pomóc?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.