Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dodanie tekstu w js
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
gregi1
12.11.2008, 22:53:55
Pytanie mam funkcje:

[HTML] pobierz, plaintext 
  1. function dodaj_element(kontener){
  2. 	var znacznik = document.createElement('input');
  3.  
  4. 	znacznik.setAttribute('type', 'text');
  5. 	znacznik.setAttribute('name', 'Imie');
  6.  
  7. 	znacznik.className = 'upload';
  8.  
  9. 	var kontener = document.getElementById(kontener);
  10. 	kontener.appendChild(znacznik);
  11.  
  12. }
  13. //-->
  14. </script>
[HTML] pobierz, plaintext


I moje pytanie jest jak z lewej strony tego inputa wyswietlic jakis tekst. Np. Podaj imie...
melkorm
13.11.2008, 00:24:16
przed "wkładaniem" inputa możesz dać:
Kod
kontener.innerHTML = "Imie : ";


nie wiem jak to będzie wyglądać w Twoim kodzie i czy Ciebie to zadowala ale takie coś przyszło mi pierwsze do głowy .. jeżeli będziesz chciał bardziej złozony efekt napisz wiecej szczegółów + jakiś kod html'a gdzie to się wyświetla ;]
gregi1
13.11.2008, 09:00:55
Pomoglo tylko czesciowo bo moge wstawic ten kod tylko raz. A ja potrzebuje kilka takich tekstow przed kazdym

kontener.appendChild(znacznik);

bo mam ich kilka.
nospor
13.11.2008, 09:14:49
tekst dodajesz na identycznej zasadzie co inputa - tworzysz obiekt tekstowy i appendChild.

Jakbys jednak skorzystał z gotowych libow, np. jQuery, to Twoj kod by wyglądał tak:
Kod
function dodaj_element(kontener){
$('#'+kontener).append('<p>Twoj jakis tekst: <input type="text" name="Imie" class="upload" /></p>');
}

Przyjemniej, nieprawdaż?
gregi1
13.11.2008, 09:35:14
Pewnie ze przyjemniej ale ja jestem kompletnym laikiem w tej kwestii i czy aby korzystac z takiego liba, to pewnie trzeba cos na poczatku zaimportowac?
nospor
13.11.2008, 09:40:47
http://docs.jquery.com/How_jQuery_Works
czyli standardowo musisz dodac liba w <head>
[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <script type="text/javascript" src="jquery.js"></script>
  4.   </head>
  5.   <body>
  6.     blabla
  7.   </body>
  8.   </html>
[HTML] pobierz, plaintext
vokiel
13.11.2008, 10:36:48
Jak już dodajesz inputa, to zamiast paragrafu lepiej byłoby dodać label, ustawić atrybut for, dzięki czemu automatycznie kursor zostanie przeniesiony do danego inputa tongue.gif
czyli korzystająć z przykładu nospora:
[HTML] pobierz, plaintext 
  1. function dodaj_element(kontener){
  2. $('#'+kontener).append('<label for="upload_1">Twoj jakis tekst:</label><input type="text" name="Imie" id="upload_1" class="upload" />');
  3. }
[HTML] pobierz, plaintext
gregi1
13.11.2008, 21:10:29
To jeszcze jedno pytanie jest dodaje sobie kilka pol to czy mozna je dodac w jakiejs tabeli aby byly ulozone. Nie wiem czy dobrze to wytlumaczylem chodzi mi o to aby bylo mniej wiecej tak : 
[HTML] pobierz, plaintext 
  1. <table><tr><td>Jakis tekst</td><td><input.....></td><tr>
  2. <tr><td>Jakis tekst</td><td><input.....></td><tr></table>
[HTML] pobierz, plaintext
questionmark.gif?

I pytanie drugie.... jesli chcialbym stworzyc przycisk usuwajacy dodany formularz to moge zrobic dokladnie taka sama funkcje i dac ja pod przycisk tylko zamiast append dac remove? Czy jest moze jakas funkcja usuwajaca wszystko od razy?

I mozna to podpiac pod przycisk przy dodawaniu go w taki sposob:
[HTML] pobierz, plaintext 
  1. $('#'+kontener).append('<label for="upload_1">Twoj jakis tekst:</label><input type="button" name="Imie" id="upload_1" class="upload" onclick="usunwszystko(); />');
[HTML] pobierz, plaintext
vokiel
14.11.2008, 12:05:59
Żadnej tabelki nie potrzebujesz, css wystarczy
ustawiasz parametry dla label i input, wszystko razem jeszcze wrzucasz w div.
[HTML] pobierz, plaintext 
  1. <div class="holder"><label for="input_1">Input 1</label><input id="input_1" class="upload" /></div>
  2. <style type="text/css">
  3. .holder {clear: both; width: 600px;}
  4. .holder label{width: 300px; float: left; display: inline;}
  5. .holder input{display: inline;}
  6. </style>
  7. <div>
  8. <div class="holder"><label for="input_1">Input 1</label><input id="input_1" class="upload" /></div>
  9. <div class="holder"><label for="input_2">Input 1</label><input id="input_2" class="upload" /></div>
  10. <div class="holder"><label for="input_3">Input 1</label><input id="input_3" class="upload" /></div>
  11. <div class="holder"><label for="input_4">Input 1</label><input id="input_4" class="upload" /></div>
  12. <div class="holder"><label for="input_5">Input 1</label><input id="input_5" class="upload" /></div>
  13. </div>
[HTML] pobierz, plaintext


Tworzenie inputow wraz z przyciskami do ich usuwania. Tworzysz linki a href z klasą add oraz id z nazwa kontenera.
[HTML] pobierz, plaintext 
  1. <a href="#" class="add" id="id_kontenera" title="Dodaj nowy input" >dodaj</a>
  2. <script type="text/javascript">
  3. $(document).ready(
  4. 	function(){
  5. 		$("a.add").click(function(){
  6. 		// pobierasz id kontenera
  7. 		var kontener = $(this).attr('id');
  8. 		// tworzysz diva (kontenera dla lablela inputa i linku do usuniecia
  9. 		var new_div = '<div class="holder">';
  10. 		// tworzysz label i inputa
  11. 		var new_label_input = '<label for="input_1">Input 1</label><input id="input_1" class="upload" />';
  12. 		// tworzysz nowy link
  13. 		var new_link = $('<a href="#" >usun</a>');
  14. 		// dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
  15. 		new_link.click(function(){
  16. 			$(this).parent("div").remove();
  17. 			return false;
  18. 		});
  19. 		// dodajesz do diva lablel i input
  20. 		new_div.append(new_label_input);
  21. 		// dodajesz do diva link
  22. 		new_div.append(new_link);
  23. 		// dodajesz do kontenera caly div
  24. 		$('#'+kontener).append(new_div);
  25. 		return false;
  26. 	});
  27. });
  28. </script>
[HTML] pobierz, plaintext
gregi1
14.11.2008, 12:36:36
Cytat(vokiel @ 14.11.2008, 12:05:59 ) *
Żadnej tabelki nie potrzebujesz, css wystarczy
ustawiasz parametry dla label i input, wszystko razem jeszcze wrzucasz w div.
[HTML] pobierz, plaintext 
  1. <div class="holder"><label for="input_1">Input 1</label><input id="input_1" class="upload" /></div>
  2. <style type="text/css">
  3. .holder {clear: both; width: 600px;}
  4. .holder label{width: 300px; float: left; display: inline;}
  5. .holder input{display: inline;}
  6. </style>
  7. <div>
  8. <div class="holder"><label for="input_1">Input 1</label><input id="input_1" class="upload" /></div>
  9. <div class="holder"><label for="input_2">Input 1</label><input id="input_2" class="upload" /></div>
  10. <div class="holder"><label for="input_3">Input 1</label><input id="input_3" class="upload" /></div>
  11. <div class="holder"><label for="input_4">Input 1</label><input id="input_4" class="upload" /></div>
  12. <div class="holder"><label for="input_5">Input 1</label><input id="input_5" class="upload" /></div>
  13. </div>
[HTML] pobierz, plaintext


Czyli co to normalnie mam wrzucic do html w miejscy gdzie chce aby te inputy sie pojawily?
Ale ten div nie bedzie widoczny dopuki nie klikne dodaj nowy input?
Cytat
Tworzenie inputow wraz z przyciskami do ich usuwania. Tworzysz linki a href z klasą add oraz id z nazwa kontenera.
[HTML] pobierz, plaintext 
  1. <a href="#" class="add" id="id_kontenera" title="Dodaj nowy input" >dodaj</a>
  2. <script type="text/javascript">
  3. $(document).ready(
  4. 	function(){
  5. 		$("a.add").click(function(){
  6. 		// pobierasz id kontenera
  7. 		var kontener = $(this).attr('id');
  8. 		// tworzysz diva (kontenera dla lablela inputa i linku do usuniecia
  9. 		var new_div = '<div class="holder">';
  10. 		// tworzysz label i inputa
  11. 		var new_label_input = '<label for="input_1">Input 1</label><input id="input_1" class="upload" />';
  12. 		// tworzysz nowy link
  13. 		var new_link = $('<a href="#" >usun</a>');
  14. 		// dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
  15. 		new_link.click(function(){
  16. 			$(this).parent("div").remove();
  17. 			return false;
  18. 		});
  19. 		// dodajesz do diva lablel i input
  20. 		new_div.append(new_label_input);
  21. 		// dodajesz do diva link
  22. 		new_div.append(new_link);
  23. 		// dodajesz do kontenera caly div
  24. 		$('#'+kontener).append(new_div);
  25. 		return false;
  26. 	});
  27. });
  28. </script>
[HTML] pobierz, plaintext


Ale ta funkcje dodaj_element(kontener) musze tez miec?
vokiel
14.11.2008, 14:40:07
Nie tej funkcji już nie musisz mieć, taka jest zaleta jquery, że sama wykryje, że kliknąłeś w odpowieni link ($("a.add").click)
- css wrzucasz tam gdzie zawsze wrzucasz css tongue.gif
- js wrzucasz w head
- <a href="#" class="add" id="id_kontenera" title="Dodaj nowy input" >dodaj</a> wrzucasz w miejsce gdzie chcesz zeby tresc sie pojawiala (wrzucając to w diva o jakimś id, żeby jquery wiedziała gdzie dodać inputy) czyli np
[HTML] pobierz, plaintext 
  1. <div id="kontener_na_nowe_inputy_div">
  2. <a href="#" class="add" id="kontener_na_nowe_inputy" title="Dodaj nowy input" >dodaj</a> 
  3. </div>
[HTML] pobierz, plaintext

schemat dokumentu
1. nagłowek
2. head a w nim css, jquery z listingu
3. body a w nim div z kontenerem i w nim inputy

zmieniłem jedną rzecz (żeby zachować poprawną semantykę, div w który js będzie wpisywać nowe wartości ma dodane na końcu _div, żeby nie było dwóch elementów na stronie o tym samym id)
czyli w js trzeba zmienić linijkę:
[HTML] pobierz, plaintext 
  1. <!-- z tego -->
  2. var kontener = $(this).attr('id');
  3. <!-- na ten -->
  4. var kontener = $(this).attr('id')+ '_div';
[HTML] pobierz, plaintext
gregi1
14.11.2008, 16:32:15
Wiesz co nie wiem czy dobrze to zrobilem ale moja strona wyglada tak i troche to nie dziala, bo od razu mam wyswietlone inputy, a po kliknieciu w przycisk nic sie nie dzieje

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <link href="css/main.css" rel="stylesheet" type="text/css">
  7. <script type="text/javascript" src="js/swfobject.js"></script>
  8. <script type="text/javascript" src="js/script.js"></script>
  9. <script type="text/javascript" src="js/skrypt.js"></script>
  10. <script language="javascript">AC_FL_RunContent = 0;</script>
  11. <script src="pl/AC_RunActiveContent.js" language="javascript"></script>
  12. <script type="text/javascript" src="jquery.js"></script>
  13.  
  14.  
  15. <script type="text/javascript">
  16. $(document).ready(
  17. function(){
  18. $("a.add").click(function(){
  19. // pobierasz id kontenera
  20. var kontener = $(this).attr('id')+ '_div';
  21. // tworzysz diva (kontenera dla lablela inputa i linku do usuniecia
  22. var new_div = '<div class="holder">';
  23. // tworzysz label i inputa
  24. var new_label_input = '<label for="input_1">Podaj imie:</label><input type="text" id="input_1" class="upload" />';
  25. // tworzysz nowy link
  26. var new_link = $('<a href="#" >usun</a>');
  27. // dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
  28. new_link.click(function(){
  29. $(this).parent("div").remove();
  30. return false;
  31. });
  32. // dodajesz do diva lablel i input
  33. new_div.append(new_label_input);
  34. // dodajesz do diva link
  35. new_div.append(new_link);
  36. // dodajesz do kontenera caly div
  37. $('#'+kontener).append(new_div);
  38. return false;
  39. });
  40. });
  41. </script>
  42. </head>
  43. <body>
  44.  
  45.  
  46. <div id="kontener_na_nowe_inputy_div">
  47. <a href="#" class="add" id="kontener_na_nowe_inputy" title="Dodaj nowy input" >dodaj</a>
  48. </div>
  49.  
  50. <div class="holder"><label for="input_1">Podaj imie</label><input type="text" id="input_1" class="upload" /></div>
  51. <style type="text/css">
  52. .holder {clear: both; width: 600px;}
  53. .holder label{width: 300px; float: left; display: inline;}
  54. .holder input{display: inline;}
  55. </style>
  56. <div>
  57. <div class="holder"><label for="input_1">Input 1</label><input type="text" id="input_1" class="upload" /></div>
  58.  
  59. </div>
  60.  
  61. </body>
  62. </html>
[HTML] pobierz, plaintext
vokiel
15.11.2008, 15:03:20
Rzeczywiście nie mogło działać, przy tworzeniu diva nie ustawiłem go jako elementu dokumentu, tylko ciąg znaków. Poprawiona wersja:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <link href="css/main.css" rel="stylesheet" type="text/css">
  6. <script type="text/javascript" src="js/swfobject.js"></script>
  7. <script type="text/javascript" src="js/script.js"></script>
  8. <script type="text/javascript" src="js/skrypt.js"></script>
  9. <script language="javascript">AC_FL_RunContent = 0;</script>
  10. <script src="pl/AC_RunActiveContent.js" language="javascript"></script>
  11. <script type="text/javascript" src="jquery.js"></script>
  12.  
  13. <script type="text/javascript">
  14.  
  15. $(document).ready(
  16. 	function(){
  17. 		// aby tworzyc wiecej inputow to trzeba by ustawic ich unikalne id, do tego bedzie ten licznik
  18. 		var licznik=1;
  19. 		$("a.add").click(function(){
  20. 		// pobierasz id kontenera
  21. 		var kontener = $(this).attr('id');
  22. 		kontener = kontener + "_div";
  23. 		// tworzysz diva (kontenera dla lablela inputa i linku do usuniecia
  24. 		var new_div = $('<div class="holder">');
  25. 		// tworzysz label i inputa
  26. 		var new_label_input = '<label for="input_'+licznik+'">Podaj imie:</label><input type="text" id="input_'+licznik+'" class="upload" />';
  27. 		// tworzysz nowy link
  28. 		var new_link = $('<a href="#" >usun</a>');
  29. 		// dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
  30. 		new_link.click(function(){
  31. 			$(this).parent("div").remove();
  32. 			return false;
  33. 		});
  34. 		// dodajesz do diva lablel i input
  35. 		new_div.append(new_label_input);
  36. 		// dodajesz do diva link
  37. 		new_div.append(new_link);
  38. 		// dodajesz do kontenera caly div
  39. 		$('#'+kontener).append(new_div);
  40. 		licznik++;
  41. 		return false;
  42. 	});
  43. });
  44. </script>
  45. <style type="text/css">
  46. .holder {clear: both; width: 600px;}
  47. .holder label{width: 300px; float: left; display: inline;}
  48. .holder input{display: inline;}
  49. </style>
  50. </head>
  51. <body>
  52. <div id="kontener_na_nowe_inputy_div">
  53. 	<a href="#" class="add" id="kontener_na_nowe_inputy" title="Dodaj nowy input" >dodaj</a>
  54. </div>
  55. </body>
  56. </html>
[HTML] pobierz, plaintext
gregi1
16.11.2008, 11:06:37
Wielkie dzieki, pomoglo. Nawet wiedzialem jak przerobic abym mial kilka przyciskow dodaj i kilka div'ow smile.gif Ale znow napotkalem na problem, otoz wyglada on nastepujaco, gdzies na forum juz pisalem o tym, ale chodzi o to: ze na stronie wyswietlam te div'y i przyciski dodaj w petli czyli mam ich kilka (to ma byc formularz kontaktowy) i jak mozna by zrobic aby po kliknieciu przycisku dodaj, wszystkie przyciski dodaj zostaly zablokowane tzn. po wysweitleniu jednego formularza nie dalo sie wysweitlic kolejnego.
Usuniecie licznika nie pomaga, bo po kliknieciu w dodaj zawsze jest dodawany formularz. Probowalem zrobic sobie zmienna na false i w funkcji zmieniac ja na true i przy pomocy tego sprawdzac if'em ktora jest jak na true to mialem wszystkie przyciski poblokowane.


Jeszcze jeden problem.
Czy ten link do usuwania (ta akcje mozna by jakos podpiac do buttona? Bo skoro mam przycisk submit to ladniej by to wygladalo jakby i usun bylo buttonem?
Po raz kolejny dzieki za pomoc.
vokiel
17.11.2008, 10:05:51
Cytat(gregi1 @ 16.11.2008, 11:06:37 ) *
(...)jak mozna by zrobic aby po kliknieciu przycisku dodaj, wszystkie przyciski dodaj zostaly zablokowane tzn. po wysweitleniu jednego formularza nie dalo sie wysweitlic kolejnego.(..)

Możesz dodac na poczatku sprawdzanie warunku w funkcji 
[HTML] pobierz, plaintext 
  1. $("a.add").click(function(){
  2. if(added){
  3. // caly ten kod co byl
  4. // a na koncu
  5. var added=true;
  6. // no i tutaj przydaloby sie ukryc inne przyciski dodaj, albo nawet wszystkie w ogóle:
  7. $("a.add").toggle();
  8. // albo 
  9. $("a.add").addClass("hide");
  10. }else{
  11. $("a.add").addClass("show");
  12. }
  13. }
[HTML] pobierz, plaintext


Cytat(gregi1 @ 16.11.2008, 11:06:37 ) *
Czy ten link do usuwania (ta akcje mozna by jakos podpiac do buttona? Bo skoro mam przycisk submit to ladniej by to wygladalo jakby i usun bylo buttonem?

Możesz ostylować link, żeby wyglądał jak button, albo po prostu wstawić button.
[HTML] pobierz, plaintext 
  1. // tworzysz nowy link (zmieniasz tutaj)
  2. var new_link = $('<button class="usun"><span>usun</span></button>');
  3. // reszta juz może zostać tak jak było
  4. // dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
  5. new_link.click(function(){
  6. $(this).parent("div").remove();
  7. return false;
  8. });
[HTML] pobierz, plaintext


Trochę inną rzecz robisz, niż myślałem, kilka formularzy, a nie tak jak podejrzewałem dodawanie pól do jednego
gregi1
17.11.2008, 14:46:33
Wiesz co jestem kompletnym laikiem ale nie dziala mi za bardzo to co podales:
Mam cos takiego:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <link href="css/main.css" rel="stylesheet" type="text/css">
  6. <script type="text/javascript" src="js/swfobject.js"></script>
  7. <script type="text/javascript" src="js/script.js"></script>
  8. <script type="text/javascript" src="js/skrypt.js"></script>
  9. <script language="javascript">AC_FL_RunContent = 0;</script>
  10. <script src="pl/AC_RunActiveContent.js" language="javascript"></script>
  11. <script type="text/javascript" src="jquery.js"></script>
  12.  
  13. <script type="text/javascript">
  14.  
  15.  
  16. $(document).ready(
  17. function(){
  18. // aby tworzyc wiecej inputow to trzeba by ustawic ich unikalne id, do tego bedzie ten licznik
  19. //var licznik=1;
  20. $("a.add").click(function(){
  21. if(added){
  22. // pobierasz id kontenera
  23. var kontener = $(this).attr('id');
  24. kontener = kontener + "_div";
  25. // tworzysz diva (kontenera dla lablela inputa i linku do usuniecia
  26. var new_div = $('<div class="holder">');
  27. // tworzysz label i inputa
  28. var new_label_input0 = '<label for="input"><center>WYŚLIJ ZAPYTANIE </center></label><br />';
  29. var new_label_input = '<label for="input">Podaj adres e-mail: </label><input style="margin-left:27px;" name="mail" type="text" id="input" class="upload" size="49" /><br />';
  30.  
  31. var new_label_input4 = '<label for="input">Treść wiadomości: </label><textarea style="margin-left:31px;margin-top:3px;" name="wiadomosc" id="input" class="upload" cols="46" rows="5"/></textarea><br />';
  32. var new_label_input5 = '<input style="margin-left:250px;margin-bottom:5px;" type="submit" name="wyslij_form" id="input" class="upload" value="Wyślij" />';
  33. // tworzysz nowy link
  34. var new_link = $('<a style="margin-left:20px;margin-bottom:5px; color:black" class="zwin_formularz" href="#" >Zrezygnuj</a>');
  35. // dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
  36. new_link.click(function(){
  37. $(this).parent("div").remove();
  38. return false;
  39. });
  40. // dodajesz do diva lablel i input
  41. new_div.append(new_label_input0);
  42. new_div.append(new_label_input);
  43. new_div.append(new_label_input4);
  44. new_div.append(new_label_input5);
  45.  
  46. // dodajesz do diva link
  47. new_div.append(new_link);
  48. // dodajesz do kontenera caly div
  49. $('#'+kontener).append(new_div);
  50. //licznik++;
  51.  
  52.  
  53. var added=true;
  54. // no i tutaj przydaloby sie ukryc inne przyciski dodaj, albo nawet wszystkie w ogóle:
  55. $("a.add").toggle();
  56. // albo
  57. return false;
  58. }
  59. });
  60. });
  61. </script>
  62. <style type="text/css">
  63. .holder {clear: both; width: 600px;}
  64. .holder label{width: 300px; float: left; display: inline;}
  65. .holder input{display: inline;}
  66. </style>
  67. </head>
  68. <body>
  69. <div id="kontener_na_nowe_inputy_div">
  70.  
  71. </div>
  72.  
  73. <a href="#" class="add" id="kontener_na_nowe_inputy" title="Dodaj nowy input" >dodaj</a>
  74.  
  75.  
  76. <div id="kontener_na_nowe_inputy2_div">
  77.  
  78. </div>
  79.  
  80. <a href="#" class="add" id="kontener_na_nowe_inputy2" title="Dodaj nowy input" >dodaj</a>
  81. </body>
  82. </html>
[HTML] pobierz, plaintext
vokiel
21.11.2008, 11:26:12 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <link href="css/main.css" rel="stylesheet" type="text/css">
  6. <script type="text/javascript" src="jquery.js"></script>
  7.  
  8. <script type="text/javascript">
  9. $(document).ready(
  10. function(){
  11. $("a.add").click(function(){
  12. var kontener = $(this).attr('id');
  13. kontener = kontener + "_div";
  14. var new_div = $('<div class="holder">');
  15. var new_label_input = '<label for="input"><center>WYŚLIJ ZAPYTANIE </center></label><br />';
  16. new_label_input += '<label for="input">Podaj adres e-mail: </label><input style="margin-left:27px;" name="mail" type="text" id="input" class="upload" size="49" /><br />';
  17. new_label_input += '<label for="input">Treść wiadomości: </label><textarea style="margin-left:31px;margin-top:3px;" name="wiadomosc" id="input" class="upload" cols="46" rows="5"/></textarea><br />';
  18. new_label_input += '<input style="margin-left:250px;margin-bottom:5px;" type="submit" name="wyslij_form" id="input" class="upload" value="Wyślij" />';
  19. var new_link = $('<a style="margin-left:20px;margin-bottom:5px; color:black" class="zwin_formularz" href="#" >Zrezygnuj</a>');
  20. new_link.click(function(){
  21. $(this).parent("div").remove();
  22. $("a.add").toggle();
  23. return false;
  24. });
  25. new_div.append(new_label_input);
  26. new_div.append(new_link);
  27. $('#'+kontener).append(new_div);
  28.  
  29. var added=true;
  30. $("a.add").toggle();
  31. return false;
  32. });
  33. });
  34. </script>
  35. <style type="text/css">
  36. .holder {clear: both; width: 600px;}
  37. .holder label{width: 300px; float: left; display: inline;}
  38. .holder input{display: inline;}
  39. </style>
  40. </head>
  41. <body>
  42. <div id="kontener_na_nowe_inputy_div">
  43. </div>
  44. <a href="#" class="add" id="kontener_na_nowe_inputy" title="Dodaj nowy input" >dodaj</a>
  45.  
  46.  
  47. <div id="kontener_na_nowe_inputy2_div">
  48. </div>
  49. <a href="#" class="add" id="kontener_na_nowe_inputy2" title="Dodaj nowy input" >dodaj</a>
  50. </body>
  51. </html>
[HTML] pobierz, plaintext
gregi1
26.11.2008, 19:16:29
Wielkie dzieki za pomoc, to mam jeszcze prosbe, potrzebna mi jeszcze jedna rzecz, a narazie nie mam czasu na nauke js - bo ucze sie Flasha:) wiec bylbym wdzieczny za pomoc.

Domyslam sie ze to mozna by zrobic przy pomocy obecnego skryptu.

Chcialbym dodatkowo miec link "wiecej>>>" po kliknieciu ktorego w jego miejscu wyswietlaja sie slowa z bazy danych. Czyli wykonuje sie zapytanie sql i wyswieltaja sie wyniki, musi to byc bez przeladowania strony, bo inaczej strace rezultaty wyszukiwania. Dzieki za pomoc
erix
27.11.2008, 18:15:46
http://www.sitepoint.com/article/ajax-jquery/
gregi1
27.11.2008, 22:05:05
Cytat(erix @ 27.11.2008, 18:15:46 ) *
http://www.sitepoint.com/article/ajax-jquery/

Dzieki za link, hmm a mozna w kod funkcji wstawic nie odzielny plik a jakas zmienna php? Moze wyjasnie to na przykladzie :

Mam cos takiego.......
[PHP] pobierz, plaintext 
  1. <?php
  2. ..........
  3. while ($row = mysql_fetch_array($result)) {
  4. echo $row[1];
  5.  
  6. //i tutaj chcialbym przycisk WIECEJ ktory wyswietli mi po kliknieciu $row[2] i $row[3].
  7. <a  href="#" class="wiecej" id="wiecej_'.$row[0].'" title="wyswietl wiecej" >WIECEJ</a><div id="wyswietl_wiecej">TUTAJ POWINNO MI SIE WSTAWIC $ROW[2] i $ROW[3].</div>
  8.  
  9. }
  10. ?>
[PHP] pobierz, plaintext


Wiec jak powinien wygladac moj skrypt js?

Mam cos takiego:
[PHP] pobierz, plaintext 
  1. <?php
  2. <script type="text/javascript">
  3.         $(document).ready(function(){
  4.             $("a.wiecej").click(function(){
  5.             $("#wyswietl_wiecej).questionmark.gifquestionmark.gifquestionmark.gif?    
  6.                        //CO TUTAJ POWINNO BYC?
  7.             });
  8.         });
  9.         </script>
  10. ?>
[PHP] pobierz, plaintext


Z gory dzieki za pomoc.
erix
27.11.2008, 22:14:13
To w click.

Kod
$.get('link.php', function(d){
$('#wyswietl_wiecej').html(d);
});
gregi1
28.11.2008, 14:29:37
Cytat(erix @ 27.11.2008, 22:14:13 ) *
To w click.

Kod
$.get('link.php', function(d){
$('#wyswietl_wiecej').html(d);
});


A co to jest to link.php?
erix
28.11.2008, 14:33:20
http://docs.jquery.com/Main_Page

Poszukaj, bo mi już ręce opadają... :S
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.