Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
Reply to this topicStart new topic
> [jQuery] Dodawanie i usuwanie inputów
shpaque
post 12.06.2018, 10:40:42
Post #1





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


Witam serdecznie,
dzisiaj borykam się z czymś, czego nigdy wcześniej nie robiłem - chcę przy każdym "row" aby była możliwość dodania następnego rowa i jego usunięcia. Konsola wywala 78 bledow typu:
  1. Uncaught SyntaxError: Invalid or unexpected token
  2. index.php:548 Uncaught ReferenceError: addMoreRows is not defined
  3. at HTMLAnchorElement.onclick


kod jest mieszany php + jquery i szczerze mówiąc już się zamotałem jak to zrobić, żeby dobrze wyszło, wygląda to tak:

  1. for ($y = 0; $y < $countLinks; $y++)
  2. {
  3. echo "
  4. <div class=\"row\" style=\"margin-top: 2px;\" id=\"rowLink".$y."\">
  5. <div class=\"col-sm-8\">
  6. <input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle".$y."\" value=\"".$c -> main[$x] -> link[$y] -> title."\" required />
  7. </div>
  8. <div class=\"col-sm-2\">
  9. <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$y."\" value=\"".$c -> main[$x] -> link[$y] -> page."\" required />
  10. </div>
  11. <div class=\"col-sm-1\">
  12. <a href=\"java script: void(0);\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" onclick=\"removeRow('+rowCount+');\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a>
  13. </div>
  14. <div class=\"col-sm-1\">
  15. <a class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" onclick=\"addMoreRows();\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a>
  16. </div>
  17. </div>
  18. ";
  19.  
  20. // Skrypt dodający i usuwający link
  21. $z = $y++;
  22. echo "
  23. <script>
  24. var rowCount = ".$y.";
  25. function addMoreRows(frm) {
  26. rowCount ++;
  27. var recRow = ' <div class=\"row\" style=\"margin-top: 2px;\" id=\"rowLink'+rowCount+'\">
  28. <div class=\"col-sm-8\">
  29. <input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle".$z."\" required />
  30. </div>
  31. <div class=\"col-sm-2\">
  32. <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$z."\" required />
  33. </div>
  34. <div class=\"col-sm-1\">
  35. <a href=\"java script: void(0);\" onclick=\"removeRow('+rowCount+');\">Delete</a>
  36. </div>
  37. </div>';
  38.  
  39. $('#rowLink".$y."').append(recRow);
  40. }
  41.  
  42. function removeRow(removeNum) {
  43. $('#rowLink".$z."' + removeNum).remove();
  44. }
  45. </script>
  46. ";
  47.  
  48. }
Go to the top of the page
+Quote Post
nospor
post 12.06.2018, 10:46:41
Post #2





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Masz bledy w funkcji addMoreRows() temu ta funkcja nie jest widoczna. Jednym z bledow jest to ze w js tekst moze miec tylko jedna linijke a ty tworzysz wielolinijkowy text z kodem html.

ps: przenosze. Z ajax to nei ma zadnego zwiazku


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 12.06.2018, 13:30:22
Post #3





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


ale jakos to sie da zrobic , chce caly row zrobic zeby sie dodal lub usunal a do tego trzeba kilka linijek - chyba ze to tylko kwestia zminimalizowania (bez '\n' )

bralem to stad: https://www.discussdesk.com/add-remove-more...sing-jquery.htm
tam gosc ma tez kilka linijek

ok to sprobujmy z czyms takim - co tu nachrzanilem?

  1. for ($y = 0; $y < $countLinks; $y++)
  2. {
  3. echo "
  4. <div class=\"row\" style=\"margin-top: 2px;\" id=\"rowLink".$y."\">
  5. <div class=\"col-sm-8\">
  6. <input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle".$y."\" value=\"".$c -> main[$x] -> link[$y] -> title."\" required />
  7. </div>
  8. <div class=\"col-sm-2\">
  9. <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$y."\" value=\"".$c -> main[$x] -> link[$y] -> page."\" required />
  10. </div>
  11. <div class=\"col-sm-1\">
  12. <a class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow".$y."\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a>
  13. </div>
  14. <div class=\"col-sm-1\">
  15. <a class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow".$y."\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a>
  16. </div>
  17. </div>
  18. ";
  19.  
  20. // Skrypt dodający i usuwający link
  21. $z = $y + 1;
  22. echo "
  23. <script>
  24. $(function() {
  25. var thisRow = $('#rowLink".$y."');
  26. var i = ".$z.";
  27.  
  28. $('#addRow".$y."').live('click', function() {
  29. $('<div class=\"row\" style=\"margin-top: 2px;\" id=\"rowLink".$y."\"><div class=\"col-sm-8\"><input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle'+i'\" required /></div><div class=\"col-sm-2\"><input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage'+i'\" required /></div><div class=\"col-sm-1\"><a class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow'+i'\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a></div><div class=\"col-sm-1\"><a class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow'+i'\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a></div></div>').appendTo(scntDiv);
  30. i++;
  31. return false;
  32. });
  33.  
  34. $('#removeRow".$y."').live('click', function() {
  35. if( i > 2 ) {
  36. $(this).parents('p').remove();
  37. i--;
  38. }
  39. return false;
  40. });
  41. });
  42. </script>
  43. ";
  44.  
  45. }


@EDIT
ok dodaje mi ale tyle razy ile razy wykonuje mi petle

  1. // Skrypt dodający i usuwający link
  2. $z = $y + 1;
  3. echo "
  4. $(function() {
  5. var thisRow = $('#rowLink".$y."');
  6. var i = '".$y."';
  7.  
  8. $('#addRow".$y."').click(function() {
  9. $('<div class=\"col-sm-8\"><input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle'+ i +'\" required /></div><div class=\"col-sm-2\"><input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage'+ i +'\" required /></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow'+ i +'\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow'+ i +'\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a></div>').appendTo(thisRow);
  10. i++;
  11. return false;
  12. });
  13.  
  14. $('#removeRow".$y."').click(function() {
  15. if( i > 2 ) {
  16. $(this).parents('div').remove();
  17. i--;
  18. }
  19. return false;
  20. });
  21. });
  22. </script>
  23. ";


@EDIT

zacznijmy od początku (mój monolog) - dlaczego wykonuje operacje tyle razy?

  1. <script>
  2. $('.btn-add').click(function() {
  3. var thisRow = $('#rowLink".$y."');
  4. var i = '".$y."';
  5. $('<div class=\"col-sm-8\"><input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle'+ i +'\" required /></div><div class=\"col-sm-2\"><input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage'+ i +'\" required /></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow'+ i +'\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow'+ i +'\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a></div>').appendTo(thisRow);
  6. i++;
  7. return false;
  8. });
  9. </script>
  10. ";
Go to the top of the page
+Quote Post
nospor
post 12.06.2018, 15:06:02
Post #4





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Cytat
zacznijmy od początku (mój monolog) - dlaczego wykonuje operacje tyle razy?
Bo dales to w petli?


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 12.06.2018, 15:15:16
Post #5





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


...ale kliekniete raz...

to petla nadrzedna i to co nas interesuje:

  1. for ($x = 0; $x < $countMains; $x++)
  2. {
  3. $lpx = $x + 1;
  4. $countLinks = count($c -> main[$x] -> link);
  5. echo "
  6. <div class=\"row rozdzial\" id=\"rowRozdzial".$x."\" style=\"margin-bottom: 5px;\">
  7. <div class=\"col-sm-8\">
  8. <div class=\"form-group\">
  9. <label>Rozdział ".$lpx." - tytuł</label>
  10. <input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."\" value=\"".$c -> main[$x] -> title."\" required />
  11. </div>
  12. </div>
  13. <div class=\"col-sm-2\">
  14. <div class=\"form-group\">
  15. <label>Rozdział ".$lpx." - strona</label>
  16. <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."\" value=\"".$c -> main[$x] -> page."\" required />
  17. </div>
  18. </div>
  19. <div class=\"col-sm-1\">
  20. <div class=\"form-group\">
  21. <label>Usuń rozdział</label>
  22. <a href=\"./index.php?page=edit&id=".$getID."&c=".$getCustomerName."&f=del&fn=".$catalog[$i] -> file."\" class=\"btn btn-md text-center btn-delete\" type=\"button\" id=\"deleteCat".$i."\" name=\"deleteCat".$i."\" style=\"width: 100%;\" onclick=\"return confirm('Czy na pewno usunąć ten rozdział i wszystkie jego linki?');\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten rozdział i wszystkie jego linki\"></span></a>
  23. </div>
  24. </div>
  25. <div class=\"col-sm-1\">
  26. <div class=\"form-group\">
  27. <label>Dodaj rozdział</label>
  28. <a href=\"./index.php?page=edit&id=".$getID."&c=".$getCustomerName."&f=addnew\" class=\"btn btn-md text-center btn-add\" type=\"button\" id=\"addCat".$i."\" name=\"addCat".$i."\" style=\"width: 100%;\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj kolejny rozdział\"></span></a>
  29. </div>
  30. </div>
  31. </div>
  32. ";
  33.  
  34. for ($y = 0; $y < $countLinks; $y++)
  35. {
  36. echo "
  37. <div class=\"row\" style=\"margin-top: 2px;\" id=\"rowLink".$y."\">
  38. <div class=\"col-sm-8\">
  39. <input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle".$y."\" value=\"".$c -> main[$x] -> link[$y] -> title."\" required />
  40. </div>
  41. <div class=\"col-sm-2\">
  42. <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$y."\" value=\"".$c -> main[$x] -> link[$y] -> page."\" required />
  43. </div>
  44. <div class=\"col-sm-1\">
  45. <a href=\"#\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow".$y."\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a>
  46. </div>
  47. <div class=\"col-sm-1\">
  48. <a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow".$y."\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a>
  49. </div>
  50. </div>
  51. ";
  52.  
  53. // Skrypt dodający link
  54. $z = $y + 1;
  55. echo "
  56. <script>
  57. $('#addRow".$y."').click(function() {
  58. var thisRow = $('#rowLink".$y."');
  59. var i = '".$z."';
  60. $('<div class=\"col-sm-8\"><input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle'+ i +'\" required /></div><div class=\"col-sm-2\"><input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage'+ i +'\" required /></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow'+ i +'\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow'+ i +'\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a></div>').appendTo(thisRow);
  61. return false;
  62. });
  63. </script>
  64. ";
  65. }


probelm w tym ze to sie wykonuje nie tyle razy ile mam petle $y tylko $x...
Go to the top of the page
+Quote Post
nospor
post 12.06.2018, 15:19:03
Post #6





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Cytat
...ale kliekniete raz...

"Uwielbiam" jak sie wyklocasz gdy sam tak malo ogarniasz. Momentalnie to zniecheca do jakiejkolwiej dalszej pomocy.

Co z tego ze klikniety raz, skoro w petli dales to:
$('.btn-add').click(function() {

czyli przypisales tyle zdarzen click ile miales obrotow petli a co za tym idzie na 1 click odpalilo sie to wlasnie tyle samo razy ile stworzyles zdarzen.

Generalne caly ten kod jest do wyrzucenia i przepisania na nowo bo taka sieczke zrobiles ze to nawet jak jakims cudem zadziala to za chwile znowu sie zwali zbyle powodu. Ale to juz moze ktos inny ci pomoze.


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 12.06.2018, 15:30:21
Post #7





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


to bylo w miedzyczasie dla testu - caly czas jest
  1. $('#addRow".$y."').click(function()


jak mam przeniesc skrypt na zewnatrz skoro zalezny jest od zmienncch?
Go to the top of the page
+Quote Post
nospor
post 12.06.2018, 15:30:35
Post #8





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




No i jeszcze tworzysz jakis testowy kod ktory zaraz usuwasz ale glowe nim trujesz... A my musimy analizowac za kazdym razem wszystko.

Powtarza ci tyle razy ile masz $x bo w X powtarzasz cale $y od 0 i ponownie jak wczesniej tworzysz tyle zdarzen ile $x
O to
$('#addRow".$y."').click(function()
powtarzasz tyle razy $x i wiec ci odpala zdarzenie click wlasnie tyle razy. Logika tego co mowilem wczesniej sie nie zmienia.


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 13.06.2018, 11:59:08
Post #9





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


no dobrze to wiem, ze logika sie nie zmienia, ale nie wysune skryptu poza petle bo w nim wlasnie wszystko uzaleznione jest od zmiennych dlatego tez nie pownno sie to zapetlac bo w kazdj petli zmienia sie zmienna...

to znaczy jakby zmienic nr id row i buttona, to moze sie udac?

czyli dodalem rand() i teraz robi pojedynczego jak powinien w idealnym miejscu - to co nie dziala, to kiedy kliekne w PLUSa utworzonego wiersza (bo w obecne jak daje plusa to dodaje pod nim tak jak trzeba, a w pustego nic sie nie dzieje)

  1. for ($y = 0; $y < $countLinks; $y++)
  2. {
  3. $z = $y."-".rand();
  4. echo "
  5. <div class=\"row\" style=\"margin-top: 2px;\" id=\"rowLink".$z."\">
  6. <div class=\"col-sm-8\">
  7. <input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle".$y."\" value=\"".$c -> main[$x] -> link[$y] -> title."\" required />
  8. </div>
  9. <div class=\"col-sm-2\">
  10. <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$y."\" value=\"".$c -> main[$x] -> link[$y] -> page."\" required />
  11. </div>
  12. <div class=\"col-sm-1\">
  13. <a href=\"#\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow".$z."\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a>
  14. </div>
  15. <div class=\"col-sm-1\">
  16. <a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow".$z."\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a>
  17. </div>
  18. </div>
  19. ";
  20.  
  21. // Skrypt dodający link
  22. echo "
  23. <script>
  24. var i = '".$y."';
  25. $('#addRow".$z."').click(function() {
  26. var thisRow = $('#rowLink".$z."');
  27. $('<div class=\"col-sm-8\"><input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle'+ i +'\" required /></div><div class=\"col-sm-2\"><input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage'+ i +'\" required /></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow'+ i +'\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow'+ i +'\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a></div>').appendTo(thisRow);
  28. i++;
  29. return false;
  30. });
  31. </script>
  32. ";


probelm w tym ze to wszystko jest w tym samym row zamiast tworzyc sie nowego w petli $y jak to obejsc?

dlaczego nikt nie jest mi w stanie pomoc?
Go to the top of the page
+Quote Post
Neutral
post 13.06.2018, 12:05:33
Post #10





Grupa: Zarejestrowani
Postów: 286
Pomógł: 46
Dołączył: 10.01.2016

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


Czy chodzi Ci o te linie pod script? Jeśli tak, to po co tyle tego wkleiłeś?
Go to the top of the page
+Quote Post
nospor
post 13.06.2018, 12:07:40
Post #11





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Cytat
dlaczego nikt nie jest mi w stanie pomoc?
Nie wiem jak inni ale ja ci juz pisalem: ten kod to sieczka i sie do niczego nie nadaje. Nawet jak kiedys zadziala to padnie przy pierwszej lepszej modyfikacji. Mi osobiscie nie chce sie marnowac czasu na jego naprawianie. Dodatkowo dochodzi fakt ze masz dziwne podejscie do pomagajacych i srednio bierzesz sobie do glowy to co ci mowia...

To trzeba wywalic i napisac od nowa.
Ma byc jedna funkcja addRow() nie tworzona w petli. Ona na podstawie kliknietego guzika ma pobrac sobie dane z tego guzika i dzialac na danym wierszu. Naprawde nie ma potrzeby tworzyc wielu takich funkcji.
Guziki zas zamiast unikalnych ID maja zawierac w sobie niezbedne dane chociazby w sekcji html "data-". Funkcja addRow() pobierze sobie te dane i bedzie wiedziec co ma robic.


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 13.06.2018, 12:15:34
Post #12





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


czyli wyjsc z petli dac skrypt na sam koniec dokumentu a buttona id dac zeby mial w sobie nr katalogu($i), maina($x) i $y z petli?
Go to the top of the page
+Quote Post
nospor
post 13.06.2018, 12:17:28
Post #13





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




No i wlasnie to jest to o czym mowilem. NIe sluchasz co sie do ciebie mowi. Odnosnie ID oraz gdzie maja byc dane juz napisalem a ty to przeinaczyles.


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 13.06.2018, 12:22:26
Post #14





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


czyli od poczatku a ma byc w tylu:

  1. <a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" data-cat=\"".$i."\" data-main=\"".$x."\" data-link=\"".$y."\" onlicki=\"addRow();\">
?
Go to the top of the page
+Quote Post
nospor
post 13.06.2018, 12:25:53
Post #15





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Tak.

Tylko do addRow() masz przekazac referencje do guzika by addRow wiedzialo skad ma brac dane.

<a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" data-cat=\"".$i."\" data-main=\"".$x."\" data-link=\"".$y."\" onclick=\"addRow(this);\">

No i dane, ktore sa wspolne dla danego wiersza nie musisz powielac w kazdym buttonie. Mozesz je przypisac do wiersza. Majac button jestes w stanie dobrac sie do wiersza. Zbedna duplikacja powoduje sieczke w kodzie w ktorej ciezko sie potem odnalezc


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 13.06.2018, 13:56:52
Post #16





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


  1. function addRow(this) {
  2. var catalogNumber = this.getAttribute('data-cat');
  3. var mainNumber = this.getAttribute('data-main');
  4. var linkNumer = this.getAttribute('data-link');
  5. var i = linkNumber + 1;
  6. var thisRow = $('#rowLink'+i);
  7. $('<div class=\"col-sm-8\"><input class=\"form-control text-center\" type=\"text\" name=\"linkTitle['+ i +']\" required /></div><div class=\"col-sm-2\"><input class=\"form-control text-center\" type=\"text\" name=\"linkPage['+ i +']\" required /></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow'+ i +'\"><span class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></span></a></div><div class=\"col-sm-1\"><a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow'+ i +'\"><span class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></span></a></div>').appendTo(thisRow);
  8. return false;
  9. };

co takiego? co teraz?

a kod zmienilem tak:

  1. <div class = "linki">
  2. <?php for ($y = 0; $y < $countLinks; $y++): ?>
  3. <div class="row">
  4. <div class="col-sm-8">
  5. <input class="form-control text-center" type="text" name="linkTitle[]" value="<?php echo $c -> main[$x] -> link[$y] -> title; ?>" required />
  6. </div>
  7. <div class="col-sm-2">
  8. <input class="form-control text-center" type="text" name="linkPage[]" value="<?php echo $c -> main[$x] -> link[$y] -> page; ?>" required />
  9. </div>
  10. <div class="col-sm-1">
  11. <a href="#" class="btn btn-md text-center btn-delete" type="button" style="width: 100%;"><span class="fa fa-remove icon-md" title="Usuń ten link"></span></a>
  12. </div>
  13. <div class="col-sm-1">
  14. <button class="btn btn-md text-center btn-add" style="width: 100%;" data-row-cat="<?php echo $i; ?>" data-row-main="<?php echo $x; ?>" data-row-link="<?php echo $y; ?>" onliclick="addRow(this);"><span class="fa fa-plus icon-md" title="Dodaj link"></span></button>
  15. </div>
  16. </div>
  17. <?php endfor ?>
  18. </div>


teraz ze skryptem poszedlem w ta strone:

  1. $(document).ready(function() {
  2. function addRow(row) {
  3. var catNumber = row.getAttribute('data-row-cat');
  4. var mainNumber = row.getAttribute('data-row-main');
  5. var linkNumer = row.getAttribute('data-row-link');
  6.  
  7. var i = linkNumber++;
  8. var objTo = $('#cat' + catNumber + 'main' + mainNumber);
  9. var div = document.createElement("div");
  10. div.setAttribute("class", "row" + i);
  11.  
  12. div.innerHTML = '<div class="row"><div class="col-sm-8"><input class="form-control text-center" type="text" name="linkTitle[]" value="" required /></div><div class="col-sm-2"><input class="form-control text-center" type="text" name="linkPage[]" value="" required /></div><div class="col-sm-1"><button class="btn btn-md text-center btn-delete" type="button" style="width: 100%;"><span class="fa fa-remove icon-md" title="Usuń ten link"></span></button></div><div class="col-sm-1"><button class="btn btn-md text-center btn-add" style="width: 100%;" data-row-cat=' + catNumber + ' data-row-main=' + mainNumber + ' data-row-link=' + i + ' onliclick="addRow(this);"><span class="fa fa-plus icon-md" title="Dodaj link"></span></button></div></div>';
  13.  
  14. objTo.appendChild(div);
  15. return false;
  16. }
  17. });


i nic nie dziala - tam w petli przynajmniej dzialalo jakos wink.gif a teraz zupelnie nie wiem co i dlaczego

poza tym dlaczego przy klieknieciu w button odswieza mi strone?
Go to the top of the page
+Quote Post
nospor
post 13.06.2018, 14:07:05
Post #17





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Cytat
a teraz zupelnie nie wiem co i dlaczego
Wtedy tez nie wiedziales co i dlaczego wiec nie marudz tongue.gif

Odswieza ci strone bo dales button w form a button odswieza strone. Musisz anulowac button by nie dzialal jak submit.
nie: addRow(this);
a: return addRow(this);
przy zalozeniu ze addRow zwraca false co na chwile obecna masz w kodzie.

addRow(this)
this czyli zmienna row w addRow to jest obiekt js przycisku. Skoro uzywasz jQuery to przekonwertuj to na jquery i uzywac .data(). Ulatwiaj sobie zycie.

I zacznij w koncu przykladac sie do tego co piszesz..

onliclick.... powaznie? Naprawde nie widzisz co napisales? I potem sie dziwisz ze nikt nie chce ci pomoc jak totalnie olewacko podchodzisz do sprawy.


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 13.06.2018, 14:46:20
Post #18





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


ok czyli wracamy do wersji poprzedniej

cos z tym row. data() pochrzanilem ale nie mam pojecia oczywiscie co, a z nuttona wrocilem do a i i tak przeladowuje;

  1. function addRow(row) {
  2. var catNumber = row.data('rowCat');
  3. var mainNumber = row.data('rowMain');
  4. var linkNumer = row.data('rowLink');
  5.  
  6. var i = linkNumber++;
  7. var newRow = $('#cat' + catNumber + 'main' + mainNumber);
  8.  
  9. $('<div class="row"><div class="col-sm-8"><input class="form-control text-center" type="text" name="linkTitle[]" value="" required /></div><div class="col-sm-2"><input class="form-control text-center" type="text" name="linkPage[]" value="" required /></div><div class="col-sm-1"><button class="btn btn-md text-center btn-delete" type="button" style="width: 100%;"><span class="fa fa-remove icon-md" title="Usuń ten link"></span></button></div><div class="col-sm-1"><button class="btn btn-md text-center btn-add" style="width: 100%;" data-row-cat=' + catNumber + ' data-row-main=' + mainNumber + ' data-row-link=' + i + ' onliclick="addRow(this);"><span class="fa fa-plus icon-md" title="Dodaj link"></span></button></div></div>').appendTo(newRow);
  10. $i++;
  11. return false;
  12. }


  1. <a href="" class="btn btn-md text-center btn-add" style="width: 100%;" data-row-cat="<?php echo $i; ?>" data-row-main="<?php echo $x; ?>" data-row-link="<?php echo $y; ?>" onclick="return addRow(this);"><span class="fa fa-plus icon-md" title="Dodaj link"></span></a>
Go to the top of the page
+Quote Post
nospor
post 13.06.2018, 14:48:54
Post #19





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Przeczytaj jeszcze raz uwaznie moj poprzedni post. Mnie naprawde nie bawi powtarzac kilka razy co juz napisalem.
O konsoli bledow tez ci juz pisalem - to tak na marginesie


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 13.06.2018, 14:54:37
Post #20





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


return addRow(this) - zrobiony
.data() dodany
onclick - zrobione

czego nie doczytalem

linkNumber is not defined
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 20:24