Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [AJAX][JavaScript][HTML] Dynamiczne tworzenie listy select + input wraz z pętlą mysql.
Giluś
post
Post #1





Grupa: Zarejestrowani
Postów: 377
Pomógł: 9
Dołączył: 2.11.2010

Ostrzeżenie: (0%)
-----


Hej, posiadam taki kod:

  1. <?php
  2. echo '<select name="opcja">';
  3. $wynik2 = mysql_query("SELECT * FROM opcje") or die('Błąd zapytania');
  4. while($r2 = mysql_fetch_assoc($wynik2)) {
  5. echo '<option value="'.$r2['id'].'">'.$r2['nazwa'].' / '.$r2['limit3'].' / '.$r2['limit2'].'</option>';
  6. }
  7. </select>
  8. <br />
  9.  
  10. Opcja 1:<br />
  11. <input type="text" name="o1" value=""/><br />
  12.  
  13. Opcja 2:<br />
  14. <input type="text" name="o2" value=""/><br />
  15. <p id="usun">Usuń</p>


I teraz chciałbym dynamicznie tworzyć w nieskończoność takie pola (czyli: Select/Opcja1/Opcja2 i guzik do usuwania wybranego "pola")
Po naciśnięciu jakiegoś guzika tworzyły by się automatycznie takie pola, później chciałbym obrabiać to w PHP..

Dodam jeszcze, że zapytanie do MySQL w każdym "polu" jest identyczne, oraz skrypt nie musi być jakoś mega optymalny, bo jest to do zastosowań domowych wiec nie będzie on narażony na miliony zapytań (IMG:style_emoticons/default/smile.gif)

Nie potrafię ogarnąć jak tworzyć ten SELECT i później uzupełnić go w option'y które pochodzą z MySQL'a..

Może Wy mi coś pomoże ?

*użyte słowo "pole" oznacza cały fragment tego wyżej kodu.


Pozdrawiam i z góry dziękuje za pomoc (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
gorden
post
Post #2





Grupa: Zarejestrowani
Postów: 486
Pomógł: 101
Dołączył: 27.06.2010

Ostrzeżenie: (0%)
-----


1. javascript zdarzenie onclick
2. wysyłasz wiadomośc ajaxem do serwera co kliknął i w zależności odsyłasz wyniki
3. na tablicy wyników zapytania użyj fukncji json_encode
4. dane za pomocą javascript pobierz w formacie json
5. masz czystą tablicę z wynikami select, użyj pętli w js do wyświetlenia danych
6. ggwp

Ten post edytował gorden 11.08.2014, 19:34:23
Go to the top of the page
+Quote Post
Giluś
post
Post #3





Grupa: Zarejestrowani
Postów: 377
Pomógł: 9
Dołączył: 2.11.2010

Ostrzeżenie: (0%)
-----


Cytat(gorden @ 11.08.2014, 20:33:53 ) *
6. ggwp



Hmm, co to oznacza ?
Go to the top of the page
+Quote Post
golabow
post
Post #4





Grupa: Zarejestrowani
Postów: 53
Pomógł: 17
Dołączył: 4.07.2014

Ostrzeżenie: (0%)
-----


good game, well played
Go to the top of the page
+Quote Post
Giluś
post
Post #5





Grupa: Zarejestrowani
Postów: 377
Pomógł: 9
Dołączył: 2.11.2010

Ostrzeżenie: (0%)
-----


Hej, dzięki bardzo za pomoc z opisaniem jak to mniej więcej zrobić, lecz mam pewien problem, ale najpierw mój kod:

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. $(document).ready(function() {
  3.  
  4. z = 0;
  5. var url="ajax.php";
  6.  
  7.  
  8. $("#klik").click(function(){
  9.  
  10. var myDiv = document.getElementById("myDiv");
  11.  
  12.  
  13. var selectList = document.createElement("select");
  14. selectList.setAttribute("id", "mySelect");
  15. selectList.setAttribute('name', 'op['+(z++)+'][id]');
  16. myDiv.appendChild(selectList);
  17.  
  18. for (var i = 0; i < 1; i++) {
  19. $.getJSON(url,function(data){
  20. $.each(data.op, function(i,op){
  21. var option = document.createElement("option");
  22. option.setAttribute("value", op.id);
  23. option.text = ""+op.nazwa+" / "+op.limit3+" / "+op.limit2+"";
  24. selectList.appendChild(option);
  25.  
  26. });
  27. });
  28. }
  29.  
  30. var br = document.createElement("br");
  31. myDiv.appendChild(br);
  32.  
  33. var input = document.createElement('input');
  34. input.setAttribute('name', 'op['+(z++)+'][opcja1]');
  35. myDiv.appendChild(input);
  36.  
  37. var br = document.createElement("br");
  38. myDiv.appendChild(br);
  39.  
  40. var input2 = document.createElement('input');
  41. input2.setAttribute('name', 'op['+(z++)+'][opcja2]');
  42. myDiv.appendChild(input2);
  43.  
  44.  
  45. var br = document.createElement("br");
  46. myDiv.appendChild(br);
  47. var br = document.createElement("br");
  48. myDiv.appendChild(br);
  49.  
  50.  
  51.  
  52. });
  53.  
  54. });
[JAVASCRIPT] pobierz, plaintext


  1. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
  2. <form action="" method="post">
  3. <div id="myDiv"></div><br />
  4. <input type="button" value="Dodaj" id="klik">
  5. <input type="submit" value="Guzik." />
  6. </form>


  1. <?php
  2. require_once('sql.php');
  3.  
  4. $var = array();
  5.  
  6. $wynik2 = mysql_query("SELECT * FROM opcje") or die('Błąd zapytania');
  7. while($obj = mysql_fetch_object($wynik2)) {
  8. $var[] = $obj;
  9. }
  10. echo '{"op":'.json_encode($var).'}';
  11.  
  12.  
  13.  
  14. ?>


Prawie wszystko działa jak należy..
- Nie wiem jak zrobić usunięcie danego wiersza..
- Oraz nie wiem jak zrobić aby ta moja lista select miała takie samo "z" - id jak i 2 poniżej inputy..

Kod
Edit:
Chociaż wstępnie chyba wiem, jak to zrobić:

Pod:
"var myDiv = document.getElementById("myDiv");"
Dodać:
"u = z++;"

I później wszystkie "z++" pozamieniać na "u"..

I chyba powinno być dobrze co nie ?

Tak wiec pozostałby jedynie jeden problem z usunięciem danego wiersza :)


I to chyba wszystko co nie wiem jak zrobić, może mi podpowiecie, ew. coś poprawicie..


Pozdrawiam i z góry bardzo dziękuje za pomoc (IMG:style_emoticons/default/smile.gif)

Ten post edytował Giluś 12.08.2014, 17:48:39
Go to the top of the page
+Quote Post
gorden
post
Post #6





Grupa: Zarejestrowani
Postów: 486
Pomógł: 101
Dołączył: 27.06.2010

Ostrzeżenie: (0%)
-----


po pierwsze skoro zaimplementowałeś do swojego kodu jQuery, to używaj go w pełni.. Twój problem za pomocą jQ można banalnie prosto rozwiązać, ale na początek kilka linków z dokumentacji:
http://api.jquery.com/jquery/ - jeśli opanujesz korzystanie z tego, Twój kod będzie co najmniej 2x krótszy, głównie chodzi tu o korzystanie z selektorów CSS. Korzystaj też z tego zamiast "createElement"
http://api.jquery.com/attr/ - zamiast setAttribute
http://api.jquery.com/append/ - zamiast appendChild, ale możesz użyć selektorów z użyciu jQuery() ($())

dobrze że przynajmniej zrozumiałeś mój pierwszy post i zastosowałeś się do instrukcji

co do samego problemu z usuwaniem elementów, nie wiem do końca o co Ci chodzi (który element chcesz usunąć), ale selektory + http://api.jquery.com/remove/ jest Twoim przyjacielem i ułatwi Ci życie. jeśli masz samo id elementu to wystarczy $("#id").remove()
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 4.04.2026 - 15:01