Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX ?] Pisanie "na zywo"
Forum PHP.pl > Forum > Przedszkole
BatGraf
6.12.2008, 18:13:42
Cześć smile.gif

Słuchajcie, mam problem tego typu.
Znalazłem na stronie

To ta strona

bardzo fajny system wpisywania kmentarzy. Świetność jego polega na tym, ze piszę ... i widzę co napisałem smile.gif Niby nic szczególnego, w końcu od tego służą formularze i klawiatura, ale cały pic polega na tym, ze moje wpisy, na bieząco pojawiaja sie w miejscu, gdzie będą zapisane.

Trzeba kliknąć:
1 Comment for “class5 , czyli co potrafi GD”






Rozebrałem stronę od kodu, ale nie potrafię znaleźć, co za to jest odpowiedzialne.

Nie szukam gotowcac, ale bardzo będe wdzięczny jesli ktoś mi podpowie co to jest. Jaka to biblioteka itp.

I jeszcze jedno pytanie - czy jednocześnie można to zapisywać do pliku / bazy?


Z góry wielkie i ogromne dzięki za pomoc smile.gif
sowiq
6.12.2008, 18:21:33
Najprostsza wersja wyświetlania:

Kod
function preview(source, output){
    document.getElementById(output).innerHTML = source.value;
}


[HTML] pobierz, plaintext 
  1. <div id="podglad"></div>
  2. <input name="nazwa" onkeyup="preview(this, 'podglad')" value="">
[HTML] pobierz, plaintext
BatGraf
6.12.2008, 19:02:38
dzięki, wiedziałem, że dla fachury to rzut okiem i wszystko jasne.

Przepraszam za następne pytanie, ale jesli Ci starczy cierpliwości smile.gif napisz jak to zastosować, bo z JS tak troche cieniutko smile.gif stoję

Czy

function preview(source, output){
documrnt.getElementById(output).innerHTML = source.value;
}

otoczyć <style type="text/javascript"> </style> i umieścić w HEAD ?
sowiq
6.12.2008, 19:10:15
Od tego jest forum, żeby pytać winksmiley.jpg

http://webmade.org/porady/umieszczanie-skryptow-kodu-js.php
http://republika.onet.pl/13965,15242,3,02,kursy.html
BatGraf
6.12.2008, 20:00:12
Dzieki :]

Nie wiem, cos robię źle, bo nie wychodzi mi to tak jak na wspomnianej stronie, ale jeszcze raz prześledzę jej kod. Nie chcę byc upierdliwy.

Tak czy inaczej dzieki za pomoc smile.gif

Tak dla informacji:
[HTML] pobierz, plaintext 
  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7. <!-- // 
  8. function preview(source, output){
  9.     documrnt.getElementById(output).innerHTML = source.value;
  10. }
  11.  -->
  12. </script>
  13. </head>
  14.  
  15. <body>
  16. <div id="podglad"></div>
  17. <input name="nazwa" onkeyup="preview(this, 'podglad')" value="">
  18. </body>
  19. </html>
[HTML] pobierz, plaintext
sowiq
6.12.2008, 20:04:19
documrnt.getElementById(output).innerHTML = source.value;
ma być:
document
BatGraf
6.12.2008, 20:06:40
JESTEŚ WIELKI biggrin.gif działa smile.gif


_____________

a zapis to już po wysłaniu, jasne

_____________

Generalnie chcę zrobić box, który bedzie edytowany/uzupełniany, ale jak będzie się uzupełniał na bieżąco juz sformatowany stylami, będzie piknie.

Pozostaje mi tylko ukryć formularz w hidden i aktywować po kliknięciu na sam box. Tu JQuery chyba pomoze, nie?

Ale się cieszę, ze to działa smile.gif


Mam jeszcze jedno pytanie, jesli mogę.
Czy jeśli zrobię textarea - wiesz, że jak dam enter, to przechodzi do nowej linii, to czy mozna zrobić, żeby i w podglądzie wchodziła nowa linia?
webdice
6.12.2008, 20:56:01
Musisz zmienić znak nowej linii na br. Mniej więcej tak.

Kod
String.replace ('\r\n', '<br />');


Gdzie String to wartość wyświetlanego pola.
BatGraf
6.12.2008, 22:38:22
ale to wstawić w kodzie przy divie czy w javascript w head?
erix
6.12.2008, 22:41:29
A czy to wygląda jak HTML? tongue.gif

Nie. Dostosuj tylko wg tego, jak napisał ~webdice:
Cytat
Gdzie String to wartość wyświetlanego pola.
BatGraf
6.12.2008, 22:47:34
Jednak chyba nie w ten sposób


[HTML] pobierz, plaintext 
  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7. <!-- // 
  8. function preview(source, output){
  9.     document.getElementById(output).innerHTML = source.value;
  10. 	String.replace ('\r\n', '<br />');
  11. }
  12.  -->
  13. </script>
  14. <style type="text/css">
  15. <!--
  16. #podglad {
  17. 	width: 150px;
  18. 	padding: 10px;
  19. }
  20. -->
  21. </style>
  22. </head>
  23.  
  24. <body>
  25. <div class="hh" id="podglad"></div>
  26. <textarea name="nazwa" onkeyup="preview(this, 'podglad')"></textarea>
  27. </body>
  28. </html>
[HTML] pobierz, plaintext
erix
6.12.2008, 22:52:27
A czy rozumiesz, co to znaczy, DOSTOSUJ? tongue.gif

~webdice podał Ci wszystkie niezbędne informacje. Zerknij na Mozilla Developer Center o stringach, tam możesz więcej poczytać nt. użycia.
BatGraf
6.12.2008, 23:08:40
Wiesz co, chyba dam sobie z tym spokój, bo nie moge tego znaleźć. Tzn znalazłem stronę dokumentacja, ale nie powiedziało mi to wiele wiecej.

nie wiem co, w którym miejscu zmienić, a jeczeć "pomózcie" tez nie lubię.

sowiq wyjaśnił mi to tak, że załapałem - nie znam po prostu js, choc żałuję, ale wszystkiego na raz nie dam rady ogarnąć.

Tak czy inaczej dzięki za chęci.
erix
7.12.2008, 01:00:01
no patrz:
Kod
//string do zmiany
zmienna = staraZmienna.replace('a', 'b');
Krizis
24.01.2009, 16:49:24
Jak zrobić to:
[HTML] pobierz, plaintext 
  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7. <!-- // 
  8. function preview(source, output){
  9.     document.getElementById(output).innerHTML = source.value;
  10. 	String.replace ('\r\n', '<br />');
  11. }
  12.  -->
  13. </script>
  14. <style type="text/css">
  15. <!--
  16. #podglad {
  17. 	width: 150px;
  18. 	padding: 10px;
  19. }
  20. -->
  21. </style>
  22. </head>
  23.  
  24. <body>
  25. <div class="hh" id="podglad"></div>
  26. <textarea name="nazwa" onkeyup="preview(this, 'podglad')"></textarea>
  27. </body>
  28. </html>
[HTML] pobierz, plaintext


tylko zamiast tego:
[HTML] pobierz, plaintext 
  1. <textarea name="nazwa" onkeyup="preview(this, 'podglad')"></textarea>
[HTML] pobierz, plaintext


to:
[HTML] pobierz, plaintext 
  1. <select size="1" name="nazwa">
  2.   <option selected>-- Wybierz --</option>
  3.   <option value="Szary">Szary</option>
  4.   </select>
[HTML] pobierz, plaintext


Żeby porostu wyświetlało się z 'value="Szary"' napis 'Szary' pod tym.

Proszę o pomoc.
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.