Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Dodawanie i usuwanie inputów
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
shpaque
12.06.2018, 10:40:42
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: 
[XML] pobierz, plaintext 
  1. Uncaught SyntaxError: Invalid or unexpected token
  2. index.php:548 Uncaught ReferenceError: addMoreRows is not defined
  3.     at HTMLAnchorElement.onclick
[XML] pobierz, plaintext


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:

[PHP] pobierz, plaintext 
  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.                                  }
[PHP] pobierz, plaintext
nospor
12.06.2018, 10:46:41
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
shpaque
12.06.2018, 13:30:22
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?

[PHP] pobierz, plaintext 
  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.                                  }
[PHP] pobierz, plaintext


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

[HTML] pobierz, plaintext 
  1. // Skrypt dodający i usuwający link
  2.                                     $z = $y + 1;
  3. 									echo "
  4. 									<script>
  5. 									$(function() {
  6.         								var thisRow = $('#rowLink".$y."');
  7.         								var i = '".$y."';
  8.  
  9.         								$('#addRow".$y."').click(function() {
  10.                 							$('<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);
  11. 											i++;
  12.                 							return false;
  13.         								});
  14.  
  15.         								$('#removeRow".$y."').click(function() { 
  16.                 							if( i > 2 ) {
  17.                         						$(this).parents('div').remove();
  18.                         						i--;
  19.                 							}
  20.                 							return false;
  21.         								});
  22. 									});
  23. 									</script>
  24. 									";
[HTML] pobierz, plaintext


@EDIT

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

[PHP] pobierz, plaintext 
  1. echo "
  2. 									<script>
  3. 									$('.btn-add').click(function() {
  4. 										var thisRow = $('#rowLink".$y."');
  5. 										var i = '".$y."';
  6.                 						$('<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);
  7. 										i++;
  8.                 						return false;
  9.         							});
  10. 									</script>
  11. 									";
[PHP] pobierz, plaintext
nospor
12.06.2018, 15:06:02
Cytat
zacznijmy od początku (mój monolog) - dlaczego wykonuje operacje tyle razy?
Bo dales to w petli?
shpaque
12.06.2018, 15:15:16
...ale kliekniete raz...

to petla nadrzedna i to co nas interesuje:

[PHP] pobierz, plaintext 
  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.                                  }
[PHP] pobierz, plaintext


probelm w tym ze to sie wykonuje nie tyle razy ile mam petle $y tylko $x...
nospor
12.06.2018, 15:19:03
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.
shpaque
12.06.2018, 15:30:21
to bylo w miedzyczasie dla testu - caly czas jest
[HTML] pobierz, plaintext 
  1. $('#addRow".$y."').click(function()
[HTML] pobierz, plaintext


jak mam przeniesc skrypt na zewnatrz skoro zalezny jest od zmienncch?
nospor
12.06.2018, 15:30:35
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.
shpaque
13.06.2018, 11:59:08
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)

[PHP] pobierz, plaintext 
  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. 									";
[PHP] pobierz, plaintext


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?
Neutral
13.06.2018, 12:05:33
Czy chodzi Ci o te linie pod script? Jeśli tak, to po co tyle tego wkleiłeś?
nospor
13.06.2018, 12:07:40
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.
shpaque
13.06.2018, 12:15:34
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?
nospor
13.06.2018, 12:17:28
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.
shpaque
13.06.2018, 12:22:26
czyli od poczatku a ma byc w tylu:

[PHP] pobierz, plaintext 
  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();\">
[PHP] pobierz, plaintext
?
nospor
13.06.2018, 12:25:53
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
shpaque
13.06.2018, 13:56:52 
[HTML] pobierz, plaintext 
  1. <script>
  2. function addRow(this) {
  3. 	var catalogNumber = this.getAttribute('data-cat');
  4. 	var mainNumber = this.getAttribute('data-main');
  5. 	var linkNumer = this.getAttribute('data-link');
  6. 	var i = linkNumber + 1;
  7.     var thisRow = $('#rowLink'+i);
  8.     $('<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);
  9.     return false;
  10. };
  11. </script>
[HTML] pobierz, plaintext

co takiego? co teraz?

a kod zmienilem tak:

[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext


teraz ze skryptem poszedlem w ta strone:

[HTML] pobierz, plaintext 
  1. <script>
  2. $(document).ready(function() {
  3. 	function addRow(row) {
  4. 		var catNumber = row.getAttribute('data-row-cat');
  5. 		var mainNumber = row.getAttribute('data-row-main');
  6. 		var linkNumer = row.getAttribute('data-row-link');
  7.  
  8. 		var i = linkNumber++;
  9. 		var objTo = $('#cat' + catNumber + 'main' + mainNumber);
  10. 		var div = document.createElement("div");
  11. 		div.setAttribute("class", "row" + i);
  12.  
  13. 		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>';
  14.  
  15. 		objTo.appendChild(div);
  16. 		return false;
  17. 	}
  18. });
  19. </script>
[HTML] pobierz, plaintext


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?
nospor
13.06.2018, 14:07:05
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.
shpaque
13.06.2018, 14:46:20
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;

[HTML] pobierz, plaintext 
  1. <script>
  2. function addRow(row) {
  3. 	var catNumber = row.data('rowCat');
  4. 	var mainNumber = row.data('rowMain');
  5. 	var linkNumer = row.data('rowLink');
  6.  
  7. 	var i = linkNumber++;
  8. 	var newRow = $('#cat' + catNumber + 'main' + mainNumber);
  9.  
  10. 	$('<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);
  11. 	$i++;
  12. 	return false;
  13. }
  14. </script>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext
nospor
13.06.2018, 14:48:54
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
shpaque
13.06.2018, 14:54:37
return addRow(this) - zrobiony
.data() dodany
onclick - zrobione

czego nie doczytalem

linkNumber is not defined
nospor
13.06.2018, 14:55:31
Cytat
czego nie doczytalem
A tego ci nie powiem bo znowu bym musial wskazac palcem co przegapiles wink.gif
Juz o tym ze sam blad powinienies zobaczyc nie wspomne.
shpaque
13.06.2018, 15:17:37
dobra przerobilem sobie html zeby jedna para buttonow byla w petli:

[HTML] pobierz, plaintext 
  1. <div id="<?php echo 'cat'.$i.'main'.$x; ?>">
  2. 								<?php for ($y = 0; $y < $countLinks; $y++): ?>
  3. 									<?php if ($y < 1): ?>
  4.                                 		<div class="row">
  5.                                        		<div class="col-sm-8">
  6.                                           		<input class="form-control text-center" type="text" name="linkTitle[]" value="<?php echo $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="linkPage[]" value="<?php echo $c -> main[$x] -> link[$y] -> page; ?>" required />
  10.                                        		</div>
  11.                                        		<div class="col-sm-1">
  12.                                        			<a href="#" class="btn btn-md text-center btn-delete" type="button" style="width: 100%; height: 100%;"><span class="fa fa-remove icon-md" title="Usuń ten link"></span></a>
  13.                                        		</div>
  14.                                        		<div class="col-sm-1">
  15.                                        			<button class="btn btn-md text-center btn-add" style="width: 100%; height: 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></button>
  16.                                        		</div>
  17.                                     	</div>
  18.                                     <?php else: ?>
  19.                                     	<div class="row">
  20.                                        		<div class="col-sm-8">
  21.                                           		<input class="form-control text-center" type="text" name="linkTitle[]" value="<?php echo $c -> main[$x] -> link[$y] -> title; ?>" required />
  22.                                        		</div>
  23.                                        		<div class="col-sm-2">
  24.                                           		<input class="form-control text-center" type="text" name="linkPage[]" value="<?php echo $c -> main[$x] -> link[$y] -> page; ?>" required />
  25.                                        		</div>
  26.                                     	</div>
  27.                                 	<?php endif ?>
  28.                                 <?php endfor ?>
  29.                             	</div>
[HTML] pobierz, plaintext


poprawilem bledy w skrypcie

[HTML] pobierz, plaintext 
  1. <script>
  2. function addRow(row) {
  3. 	var catNumber = $(row).data('rowCat');
  4. 	var mainNumber = $(row).data('rowMain');
  5. 	var linkNumber = $(row).data('rowLink');
  6.  
  7. 	var i = linkNumber++;
  8. 	var newRow = $('#cat' + catNumber + 'main' + mainNumber);
  9.  
  10. 	$('<div class="row" style="margin-top: 2px;"><div class="col-sm-8"><input class="form-control text-center" type="text" name="linkTitle[]" 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"></div></div>').appendTo(newRow);
  11. 	i++;
  12. 	return false;
  13. }
  14. </script>
[HTML] pobierz, plaintext


niby jest ok teraz, teraz jak usunac rowy tak, zeby minimalnie zostal 1 w petli (mimo ze np z php petla robi 3 linie + mamy te wygenerowane przez js)
nospor
13.06.2018, 15:31:24
Juz ci chyba kiedys pisalem, ze rowy to mozesz kopac a nie usuwac wink.gif

Cytat
teraz jak usunac rowy tak, zeby minimalnie zostal 1 w petli (mimo ze np z php petla robi 3 linie + mamy te wygenerowane przez js)
No teraz to ja nie rozumiem.
shpaque
13.06.2018, 21:14:23
teraz musze dorobic opcje usuniecia analogicznie inputow, z tym ze z php robi petle z istniejacymi rowami, powiedzmy ze jest ich 3, dodaje za pomoca skryptu ktory tu robimy powiedzmy kolejne 3
- jak zrobic teraz skrypt zeby moc usunac np 5 rowow zostawiajac 1 w petli

cos na tej zasadzie, tylko

[HTML] pobierz, plaintext 
  1. function removeRow(row) {
  2. 	var catNumber = $(row).data('rowCat');
  3. 	var mainNumber = $(row).data('rowMain');
  4. 	var linkNumber = $(row).data('rowLink');
  5.  
  6. 	$('#cat' + catNumber + 'main' + mainNumber).remove();
  7. 	return false;
  8. }
[HTML] pobierz, plaintext


1. nie moge skasowac wszystkich na raz (tylko pojedynczo) i musze zostawic zawsze 1.

czyli .remove() powinno byc przy child div tak? i w petli if linknumber > 0 ?
Pyton_000
13.06.2018, 21:20:22
https://stackoverflow.com/questions/1887429...t-for-first-one
shpaque
14.06.2018, 10:09:02
ok zadzialalo tak

[HTML] pobierz, plaintext 
  1. // Skrypt usuwający link
  2. function removeRow(row) {
  3. 	var catNumber = $(row).data('rowCat');
  4. 	var mainNumber = $(row).data('rowMain');
  5. 	var linkNumber = $(row).data('rowLink');
  6.  
  7. 	$('#cat' + catNumber + 'main' + mainNumber).find('.row:last-child').remove();
  8. 	return false;
  9. }
[HTML] pobierz, plaintext



teraz tylko zeby 1 zawsze zostal

pewnie cos takiego trzeba
[HTML] pobierz, plaintext 
  1. function removeRow(row) {
  2. 	var catNumber = $(row).data('rowCat');
  3. 	var mainNumber = $(row).data('rowMain');
  4.  
  5. 	if ($('#cat' + catNumber + 'main' + mainNumber).not('.row:first-child')){
  6. 	$('#cat' + catNumber + 'main' + mainNumber).find('.row:last-child').remove();}
  7. 	return false;
  8. }
[HTML] pobierz, plaintext

no ale takie kombinowanie nie dziala

@EDIT

mam to! dziękuję

[HTML] pobierz, plaintext 
  1. function removeRow(row) {
  2. 	var catNumber = $(row).data('rowCat');
  3. 	var mainNumber = $(row).data('rowMain');
  4.  
  5. 	$('#cat' + catNumber + 'main' + mainNumber).find('.row:last-child').not('.row:first-child').remove();
  6. 	return false;
  7. }
[HTML] pobierz, plaintext


to teraz ,a, amnalogiczna rzecz:

[HTML] pobierz, plaintext 
  1. // Skrypt dodający rozdział
  2. var n = 1;
  3. function addMain(row) {
  4. var catNumber = $(row).data('rowCat');
  5. var mainNumber = $(row).data('rowCount');
  6. var x = mainNumber + n;
  7. var newMain = $('#cat' + catNumber);
  8.  
  9. $('<div class="row rozdzial" style="margin-bottom: 5px;"><div class="col-sm-8"><div class="form-group"><label>Tytuł rozdziału</label><input class="form-control text-center" type="text" name="mainTitle[]" required /></div></div><div class="col-sm-2"><div class="form-group"><label>Strona rozdziału</label><input class="form-control text-center" type="text" name="mainPage[]" required /></div></div><div class="col-sm-1"><div class="form-group"><label>Usuń rozdział</label><button class="btn btn-md text-center btn-delete" style="width: 100%; height: 100%;" data-row-cat=' + x + ' data-row-main=' + x + ' onclick="return removeMain(this);"><span class="fa fa-remove icon-md" title="Usuń rozdział"></span></button></div></div><div class="col-sm-1"><div class="form-group"><label>Dodaj rozdział</label><button class="btn btn-md text-center btn-add" style="width: 100%; height: 100%;" data-row-cat=' + x + ' data-row-main=' + x + ' onclick="return addMain(this);"><span class="fa fa-plus icon-md" title="Dodaj rozdział"></span></button></div></div></div><div id="cat' + catNumber + 'main' + x + '"><div class="row"><div class="col-sm-8"><input class="form-control text-center" type="text" name="linkTitle[]" required /></div><div class="col-sm-2"><input class="form-control text-center" type="text" name="linkPage[]" required /></div><div class="col-sm-1"><button class="btn btn-md text-center btn-delete" style="width: 100%; height: 100%;" data-row-cat="' + catNumber + '" data-row-main="0" onclick="return removeRow(this);"><span class="fa fa-remove icon-md" title="Usuń link"></span></button></div><div class="col-sm-1"><button class="btn btn-md text-center btn-add" style="width: 100%; height: 100%;" data-row-cat="' + catNumber + '" data-row-main="0" onclick="return addRow(this);"><span class="fa fa-plus icon-md" title="Dodaj link"></span></button></div></div></div>').appendTo(newMain);
  10. n++;
  11. return false;
  12. }
[HTML] pobierz, plaintext


@EDIT

ok tam juz poprawione, musialem dodac zmienna "n", pierwszy raz bedzie ok, ale przy kolejnym tworze n wychodzi mi NaN

[HTML] pobierz, plaintext 
  1. var n = 0;
  2. function addMain(row) {
  3. 	var catNumber = $(row).data('rowCat');
  4. 	var rowCount = $(row).data('rowCount');
  5. 	var mainNumber = rowCount + n;
  6. 	var newMain = $('#cat' + catNumber);
  7.  
  8. 	$('<div class="row rozdzial" style="margin-bottom: 5px;"><div class="col-sm-8"><div class="form-group"><label>Tytuł rozdziału</label><input class="form-control text-center" type="text" name="mainTitle[]" required /></div></div><div class="col-sm-2"><div class="form-group"><label>Strona rozdziału</label><input class="form-control text-center" type="text" name="mainPage[]" required /></div></div><div class="col-sm-1"><div class="form-group"><label>Usuń rozdział</label><button class="btn btn-md text-center btn-delete" style="width: 100%; height: 100%;" data-row-cat=' + catNumber + ' data-row-main=' + mainNumber + ' onclick="return removeMain(this);"><span class="fa fa-remove icon-md" title="Usuń rozdział"></span></button></div></div><div class="col-sm-1"><div class="form-group"><label>Dodaj rozdział</label><button class="btn btn-md text-center btn-add" style="width: 100%; height: 100%;" data-row-cat=' + catNumber + ' data-row-main=' + mainNumber + ' onclick="return addMain(this);"><span class="fa fa-plus icon-md" title="Dodaj rozdział"></span></button></div></div></div><div id="cat' + catNumber + 'main' + mainNumber + '"><div class="row"><div class="col-sm-8"><input class="form-control text-center" type="text" name="linkTitle[]" required /></div><div class="col-sm-2"><input class="form-control text-center" type="text" name="linkPage[]" required /></div><div class="col-sm-1"><button class="btn btn-md text-center btn-delete" style="width: 100%; height: 100%;" data-row-cat="' + catNumber + '" data-row-main=' + mainNumber + ' onclick="return removeRow(this);"><span class="fa fa-remove icon-md" title="Usuń link"></span></button></div><div class="col-sm-1"><button class="btn btn-md text-center btn-add" style="width: 100%; height: 100%;" data-row-cat="' + catNumber + '" data-row-main=' + mainNumber + ' onclick="return addRow(this);"><span class="fa fa-plus icon-md" title="Dodaj link"></span></button></div></div></div>').appendTo(newMain);
  9. 	n++;
  10. 	return false;
  11. }
[HTML] pobierz, plaintext
Neutral
14.06.2018, 11:01:40
Napisz może parseInt lub parseFloat.
shpaque
14.06.2018, 17:34:27
nie dzialaja

jak to zrobic?

[HTML] pobierz, plaintext 
  1. var n = 1;
  2. function addMain(row) {
  3. 	var catNumber = $(row).data('rowCat');
  4. 	var rowCount = $(row).data('rowCount');
  5. 	var mainNumber = rowCount + n;
  6. 	var newMain = $('#cat' + catNumber);
  7.  
  8. 	$('<div class="row rozdzial" style="margin-bottom: 5px;"><div class="col-sm-8"><div class="form-group"><label>Tytuł rozdziału</label><input class="form-control text-center" type="text" name="mainTitle[]" required /></div></div><div class="col-sm-2"><div class="form-group"><label>Strona rozdziału</label><input class="form-control text-center" type="text" name="mainPage[]" required /></div></div><div class="col-sm-1"><div class="form-group"><label>Usuń rozdział</label><button class="btn btn-md text-center btn-delete" style="width: 100%; height: 100%;" data-row-cat=' + catNumber + ' data-row-main=' + mainNumber + ' onclick="return removeMain(this);"><span class="fa fa-remove icon-md" title="Usuń rozdział"></span></button></div></div><div class="col-sm-1"><div class="form-group"><label>Dodaj rozdział</label><button class="btn btn-md text-center btn-add" style="width: 100%; height: 100%;" data-row-cat=' + catNumber + ' data-row-main=' + mainNumber + ' onclick="return addMain(this);"><span class="fa fa-plus icon-md" title="Dodaj rozdział"></span></button></div></div></div><div id="cat' + catNumber + 'main' + mainNumber + '"><div class="row"><div class="col-sm-8"><input class="form-control text-center" type="text" name="linkTitle[]" required /></div><div class="col-sm-2"><input class="form-control text-center" type="text" name="linkPage[]" required /></div><div class="col-sm-1"><button class="btn btn-md text-center btn-delete" style="width: 100%; height: 100%;" data-row-cat="' + catNumber + '" data-row-main=' + mainNumber + ' onclick="return removeRow(this);"><span class="fa fa-remove icon-md" title="Usuń link"></span></button></div><div class="col-sm-1"><button class="btn btn-md text-center btn-add" style="width: 100%; height: 100%;" data-row-cat="' + catNumber + '" data-row-main=' + mainNumber + ' onclick="return addRow(this);"><span class="fa fa-plus icon-md" title="Dodaj link"></span></button></div></div></div>').appendTo(newMain);
  9. 	n++;
  10. 	return false;
  11. }
[HTML] pobierz, plaintext
Neutral
14.06.2018, 22:52:44
Nie jestem pewien, ale może to pójdzie:
Kod
var mainNumber = parseFloat(rowCount) + parseFloat(n);
shpaque
15.06.2018, 09:13:41
wtedy dostaje tak:

pierwszy generowany ma id "cat1Main0"
drugi: cat1Main2 questionmark.gif
trzeci Cat1MainNaN

[HTML] pobierz, plaintext 
  1. var c = 0;
  2. function addMain(row) {
  3. 	var catNumber = $(row).data('rowCat');
  4. 	var rowCount = $(row).data('rowCount');
  5. 	var n = c;
  6. 	var mainNumber = rowCount + n;
  7. 	var newMain = $('#cat' + catNumber);
  8.  
  9. 	$('<div class="row rozdzial" style="margin-bottom: 5px;"><div class="col-sm-8"><div class="form-group"><label>Tytuł rozdziału</label><input class="form-control text-center" type="text" name="mainTitle[]" required /></div></div><div class="col-sm-2"><div class="form-group"><label>Strona rozdziału</label><input class="form-control text-center" type="text" name="mainPage[]" required /></div></div><div class="col-sm-1"><div class="form-group"><label>Usuń rozdział</label><button class="btn btn-md text-center btn-delete" style="width: 100%; height: 100%;" data-row-cat=' + catNumber + ' data-row-main=' + mainNumber + ' onclick="return removeMain(this);"><span class="fa fa-remove icon-md" title="Usuń rozdział"></span></button></div></div><div class="col-sm-1"><div class="form-group"><label>Dodaj rozdział</label><button class="btn btn-md text-center btn-add" style="width: 100%; height: 100%;" data-row-cat=' + catNumber + ' data-row-main=' + mainNumber + ' onclick="return addMain(this);"><span class="fa fa-plus icon-md" title="Dodaj rozdział"></span></button></div></div></div><div id="cat' + catNumber + 'main' + mainNumber + '"><div class="row"><div class="col-sm-8"><input class="form-control text-center" type="text" name="linkTitle[]" required /></div><div class="col-sm-2"><input class="form-control text-center" type="text" name="linkPage[]" required /></div><div class="col-sm-1"><button class="btn btn-md text-center btn-delete" style="width: 100%; height: 100%;" data-row-cat="' + catNumber + '" data-row-main=' + mainNumber + ' onclick="return removeRow(this);"><span class="fa fa-remove icon-md" title="Usuń link"></span></button></div><div class="col-sm-1"><button class="btn btn-md text-center btn-add" style="width: 100%; height: 100%;" data-row-cat="' + catNumber + '" data-row-main=' + mainNumber + ' onclick="return addRow(this);"><span class="fa fa-plus icon-md" title="Dodaj link"></span></button></div></div></div>').appendTo(newMain);
  10. 	c++;
  11. 	return false;
  12. }
[HTML] pobierz, plaintext


nawet jak tak to rozpisze to pierwszy jest cat0main0, drugi cat0main1, a juz trzeci cat0mainNan

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.