Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] dynamiczny formularz i focus()
Forum PHP.pl > Forum > Przedszkole
daggoth
Witajcie drodzy pehapowicze smile.gif
Raczkuję w temacie jQuery więc zwracam się do was z prośbą o pomoc.

Wymarzyło mi się, aby gdy użytkownik kliknie w ostatniego selecta by coś wklupać, zaraz pod nim wskoczy nowy select i tak w nieskończoność smile.gif
Znalazłem coś w interneciku i przerobiłem pod metodę focus(). Działa ale tylko na pierwszym selekcie (tak jakby ciągle stał na jednej wartości) Ma ktoś jakiś pomysł questionmark.gif

Kod
  1.  
  2. <div class="container">
  3. <div class="row">
  4. <input type="text" id="count" name="count" value="1" />
  5. <div class="control-group" id="fields">
  6. <label class="control-label" for="field1">Nice Multiple Form Fields</label>
  7. <div class="controls" id="profs">
  8. <div class="input-append">
  9. <input autocomplete="off" class="span3" id="field1" name="prof1" type="text" placeholder="Type something (it has typeahead too)" data-provide="typeahead" data-items="8" data-source='["Aardvark","Beatlejuice","Capricorn","Deathmaul","Epic"]'/><button id="b1" class="btn btn-info add-more" type="button">+</button>
  10. </div>
  11. <br>
  12. <small>Press + to add another form field :)</small>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  18. <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
  19. <script>
  20. $(document).ready(function(){
  21. var next = 1;
  22. $("#field"+next).focus(function(e){
  23. e.preventDefault();
  24. var addto = "#field" + next;
  25. next = next + 1;
  26. var newIn = '<br /><br /><input autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8">';
  27. var newInput = $(newIn);
  28. $(addto).after(newInput);
  29. $("#field" + next).attr('data-source',$(addto).attr('data-source'));
  30. $("#count").val(next);
  31. });
  32. });
  33.  
  34. </script>


Edit:
Późna pora, zapomniałem linka:
tu to działa smile.gif

http://jsbin.com/EBUMoKa/1/
vonski
Dobrze kombinujesz, ale to nie będzie działać, bo:

  1. $("#field"+next).focus(function(e)


rejestruje handler tylko dla #field1.

Zamiast tego musisz mieć jakąś klasę która będzie wskazywała input który po kliknięciu ma generować kolejny input (tak przynajmniej zrozumiałem Twoje intencje). Powiedzmy, że klasa nazywać się będzie "trigger".
Druga rzecz, że z racji tego, że inputy są dodawane dynamicznie, sama funkcja focus() nie wystarczy - należy użyć w tym wypadku funkcji on().
Coś w tym rodzaju:

  1. $('.container').on('focus', '.trigger', function(e) { // on() zamiast focus()
  2. e.preventDefault();
  3. $(this).removeClass('trigger'); // usuwasz klasę tigger z aktualnie ostatniego inputa, bo po dodaniu kolejnego, ten juz nie będzie ostatni :)
  4. var addto = "#field" + next;
  5. next = next + 1;
  6.  
  7. // dodajesz nowy input z klasą trigger i teraz to ten będzie pełnił rolę "wyzwalacza"
  8. var newIn = '<br /><br /><input class="trigger" autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8">';
  9. var newInput = $(newIn);
  10. $(addto).after(newInput);
  11. $("#field" + next).attr('data-source',$(addto).attr('data-source'));
  12. $("#count").val(next);
  13. });
daggoth
Super, o to chodziło smile.gif Wielkie dzięki smile.gif

Zastanawiam się, gdzie mogę poczytać o zachowaniu samego jQuery (handlery etc), jakieś praktyczne cechy. Składnie i manipulacje DOM już poniekąd rozumiem, brakuje mi właśnie takiej wiedzy smile.gif Można prosić o jakieś wsparcie tutorialami albo innym zbiorem wiedzy? smile.gif
vonski
Ten kurs jest moim zdaniem bardzo dobry na początek: http://ferrante.pl/frontend/javascript/jquery-to-latwe-1/
A jak już masz podstawy jQuery (i oczywiście podstawy JS) to wydaje mi się, że najlepiej się to pojmuje w sposób praktyczny.
Tzn. wymyśl sobie jakiś problem, powiedzmy na początek system komentarzy w AJAX, a potem spróbuj to po prostu zrobić.
Takie było przynajmniej moje podejście do tego tematu smile.gif

Edit:
Z drugiej strony ten kurs Ferrante na pewno BYŁ bardzo dobry parę lat temu, a wiadomo że teraz wyszło kilka nowych wersji jQuery... ale być może do złapania podstaw będzie ok.
L0k0
Cytat(vonski @ 21.01.2014, 00:23:28 ) *
Ten kurs jest moim zdaniem bardzo dobry na początek: http://ferrante.pl/frontend/javascript/jquery-to-latwe-1/


Przerabiałem ten kurs i jest on trochę podstarzały. Wiele rzeczy zostało zdeprecjonowanych (bind itp.) Chyba nie do końca warto wracać do tego.

Ja polecam:

http://try.jquery.com/
http://www.codecademy.com/tracks/jquery
https://www.codeschool.com/courses/try-jquery

Pozdrawiam!
daggoth
Panowie, bardzo dziękuję za porady smile.gif W wolnej chwili jak skończę projekt się za to zabiorę.

Bless i zapraszam na browara do Wadowic smile.gif
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.