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:
Uncaught SyntaxError: Invalid or unexpected token index.php:548 Uncaught ReferenceError: addMoreRows is not defined at HTMLAnchorElement.onclick
for ($y = 0; $y < $countLinks; $y++) { http://www.php.net/echo " <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".$y."\" value=\"".$c -> main[$x] -> http://www.php.net/link[$y] -> title."\" required /> </div> <div class=\"col-sm-2\"> <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$y."\" value=\"".$c -> main[$x] -> http://www.php.net/link[$y] -> page."\" required /> </div> <div class=\"col-sm-1\"> <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> </div> <div class=\"col-sm-1\"> <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> </div> </div> "; // Skrypt dodający i usuwający link $z = $y++; http://www.php.net/echo " <script> var rowCount = ".$y."; function addMoreRows(frm) { rowCount ++; var recRow = ' <div class=\"row\" style=\"margin-top: 2px;\" id=\"rowLink'+rowCount+'\"> <div class=\"col-sm-8\"> <input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle".$z."\" required /> </div> <div class=\"col-sm-2\"> <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$z."\" required /> </div> <div class=\"col-sm-1\"> <a href=\"java script: void(0);\" onclick=\"removeRow('+rowCount+');\">Delete</a> </div> </div>'; $('#rowLink".$y."').append(recRow); } function removeRow(removeNum) { $('#rowLink".$z."' + removeNum).remove(); } </script> "; }
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
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-rows-dynamically-using-jquery.htm
tam gosc ma tez kilka linijek
ok to sprobujmy z czyms takim - co tu nachrzanilem?
for ($y = 0; $y < $countLinks; $y++) { http://www.php.net/echo " <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".$y."\" value=\"".$c -> main[$x] -> http://www.php.net/link[$y] -> title."\" required /> </div> <div class=\"col-sm-2\"> <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$y."\" value=\"".$c -> main[$x] -> http://www.php.net/link[$y] -> page."\" required /> </div> <div class=\"col-sm-1\"> <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> </div> <div class=\"col-sm-1\"> <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> </div> </div> "; // Skrypt dodający i usuwający link $z = $y + 1; http://www.php.net/echo " <script> $(function() { var thisRow = $('#rowLink".$y."'); var i = ".$z."; $('#addRow".$y."').live('click', function() { $('<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); i++; return false; }); $('#removeRow".$y."').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); i--; } return false; }); }); </script> "; }
// Skrypt dodający i usuwający link $z = $y + 1; echo " <http://december.com/html/4/element/script.html> $(function() { var thisRow = $('#rowLink".$y."'); var i = '".$y."'; $('#addRow".$y."').click(function() { $('<http://december.com/html/4/element/div.html class=\"col-sm-8\"><http://december.com/html/4/element/input.html class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle'+ i +'\" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class=\"col-sm-2\"><http://december.com/html/4/element/input.html class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage'+ i +'\" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class=\"col-sm-1\"><http://december.com/html/4/element/a.html href=\"#\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow'+ i +'\"><http://december.com/html/4/element/span.html class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/a.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class=\"col-sm-1\"><http://december.com/html/4/element/a.html href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow'+ i +'\"><http://december.com/html/4/element/span.html class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/a.html></http://december.com/html/4/element/div.html>').appendTo(thisRow); i++; return false; }); $('#removeRow".$y."').click(function() { if( i > 2 ) { $(this).parents('div').remove(); i--; } return false; }); }); </http://december.com/html/4/element/script.html> ";
http://www.php.net/echo " <script> $('.btn-add').click(function() { var thisRow = $('#rowLink".$y."'); var i = '".$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 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); i++; return false; }); </script> ";
...ale kliekniete raz...
to petla nadrzedna i to co nas interesuje:
for ($x = 0; $x < $countMains; $x++) { $lpx = $x + 1; $countLinks = http://www.php.net/count($c -> main[$x] -> http://www.php.net/link); http://www.php.net/echo " <div class=\"row rozdzial\" id=\"rowRozdzial".$x."\" style=\"margin-bottom: 5px;\"> <div class=\"col-sm-8\"> <div class=\"form-group\"> <label>Rozdział ".$lpx." - tytuł</label> <input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."\" value=\"".$c -> main[$x] -> title."\" required /> </div> </div> <div class=\"col-sm-2\"> <div class=\"form-group\"> <label>Rozdział ".$lpx." - strona</label> <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."\" value=\"".$c -> main[$x] -> page."\" required /> </div> </div> <div class=\"col-sm-1\"> <div class=\"form-group\"> <label>Usuń rozdział</label> <a href=\"./index.php?page=edit&id=".$getID."&c=".$getCustomerName."&f=del&fn=".$catalog[$i] -> http://www.php.net/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> </div> </div> <div class=\"col-sm-1\"> <div class=\"form-group\"> <label>Dodaj rozdział</label> <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> </div> </div> </div> "; for ($y = 0; $y < $countLinks; $y++) { http://www.php.net/echo " <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".$y."\" value=\"".$c -> main[$x] -> http://www.php.net/link[$y] -> title."\" required /> </div> <div class=\"col-sm-2\"> <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$y."\" value=\"".$c -> main[$x] -> http://www.php.net/link[$y] -> page."\" required /> </div> <div class=\"col-sm-1\"> <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> </div> <div class=\"col-sm-1\"> <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> </div> </div> "; // Skrypt dodający link $z = $y + 1; http://www.php.net/echo " <script> $('#addRow".$y."').click(function() { var thisRow = $('#rowLink".$y."'); var i = '".$z."'; $('<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); return false; }); </script> "; }
to bylo w miedzyczasie dla testu - caly czas jest
$('#addRow".$y."').click(function()
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.
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)
for ($y = 0; $y < $countLinks; $y++) { $z = $y."-".http://www.php.net/rand(); http://www.php.net/echo " <div class=\"row\" style=\"margin-top: 2px;\" id=\"rowLink".$z."\"> <div class=\"col-sm-8\"> <input class=\"form-control text-center\" type=\"text\" name=\"mainTitle".$x."-linkTitle".$y."\" value=\"".$c -> main[$x] -> http://www.php.net/link[$y] -> title."\" required /> </div> <div class=\"col-sm-2\"> <input class=\"form-control text-center\" type=\"text\" name=\"mainPage".$x."-linkPage".$y."\" value=\"".$c -> main[$x] -> http://www.php.net/link[$y] -> page."\" required /> </div> <div class=\"col-sm-1\"> <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> </div> <div class=\"col-sm-1\"> <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> </div> </div> "; // Skrypt dodający link http://www.php.net/echo " <script> var i = '".$y."'; $('#addRow".$z."').click(function() { var thisRow = $('#rowLink".$z."'); $('<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); i++; return false; }); </script> ";
Czy chodzi Ci o te linie pod script? Jeśli tak, to po co tyle tego wkleiłeś?
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?
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.
czyli od poczatku a ma byc w tylu:
?
<a href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" data-cat=\"".$i."\" data-main=\"".$x."\" data-link=\"".$y."\" onlicki=\"addRow();\">
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
<http://december.com/html/4/element/script.html> function addRow(this) { var catalogNumber = this.getAttribute('data-cat'); var mainNumber = this.getAttribute('data-main'); var linkNumer = this.getAttribute('data-link'); var i = linkNumber + 1; var thisRow = $('#rowLink'+i); $('<http://december.com/html/4/element/div.html class=\"col-sm-8\"><http://december.com/html/4/element/input.html class=\"form-control text-center\" type=\"text\" name=\"linkTitle['+ i +']\" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class=\"col-sm-2\"><http://december.com/html/4/element/input.html class=\"form-control text-center\" type=\"text\" name=\"linkPage['+ i +']\" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class=\"col-sm-1\"><http://december.com/html/4/element/a.html href=\"#\" class=\"btn btn-md text-center btn-delete\" type=\"button\" style=\"width: 100%;\" id=\"removeRow'+ i +'\"><http://december.com/html/4/element/span.html class=\"fa fa-remove icon-md\" title=\"Usuń ten link\"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/a.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class=\"col-sm-1\"><http://december.com/html/4/element/a.html href=\"#\" class=\"btn btn-md text-center btn-add\" style=\"width: 100%;\" id=\"addRow'+ i +'\"><http://december.com/html/4/element/span.html class=\"fa fa-plus icon-md\" title=\"Dodaj link\"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/a.html></http://december.com/html/4/element/div.html>').appendTo(thisRow); return false; }; </http://december.com/html/4/element/script.html>
<http://december.com/html/4/element/div.html class = "linki"> <?php for ($y = 0; $y < $countLinks; $y++): ?> <http://december.com/html/4/element/div.html class="row"> <http://december.com/html/4/element/div.html class="col-sm-8"> <http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" value="<?php echo $c -> main[$x] -> link[$y] -> title; ?>" required /> </http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="col-sm-2"> <http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" value="<?php echo $c -> main[$x] -> link[$y] -> page; ?>" required /> </http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="col-sm-1"> <http://december.com/html/4/element/a.html href="#" class="btn btn-md text-center btn-delete" type="button" style="width: 100%;"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń ten link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/a.html> </http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="col-sm-1"> <http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html> </http://december.com/html/4/element/div.html> </http://december.com/html/4/element/div.html> <?php endfor ?> </http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/script.html> $(document).ready(function() { function addRow(row) { var catNumber = row.getAttribute('data-row-cat'); var mainNumber = row.getAttribute('data-row-main'); var linkNumer = row.getAttribute('data-row-link'); var i = linkNumber++; var objTo = $('#cat' + catNumber + 'main' + mainNumber); var div = document.createElement("div"); div.setAttribute("class", "row" + i); div.innerHTML = '<http://december.com/html/4/element/div.html class="row"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" value="" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" value="" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html class="btn btn-md text-center btn-delete" type="button" style="width: 100%;"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń ten link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>'; objTo.appendChild(div); return false; } }); </http://december.com/html/4/element/script.html>
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;
<http://december.com/html/4/element/script.html> function addRow(row) { var catNumber = row.data('rowCat'); var mainNumber = row.data('rowMain'); var linkNumer = row.data('rowLink'); var i = linkNumber++; var newRow = $('#cat' + catNumber + 'main' + mainNumber); $('<http://december.com/html/4/element/div.html class="row"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" value="" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" value="" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html class="btn btn-md text-center btn-delete" type="button" style="width: 100%;"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń ten link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>').appendTo(newRow); $i++; return false; } </http://december.com/html/4/element/script.html>
<http://december.com/html/4/element/a.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/a.html>
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
return addRow(this) - zrobiony
.data() dodany
onclick - zrobione
czego nie doczytalem
linkNumber is not defined
dobra przerobilem sobie html zeby jedna para buttonow byla w petli:
<http://december.com/html/4/element/div.html id="<?php echo 'cat'.$i.'main'.$x; ?>"> <?php for ($y = 0; $y < $countLinks; $y++): ?> <?php if ($y < 1): ?> <http://december.com/html/4/element/div.html class="row"> <http://december.com/html/4/element/div.html class="col-sm-8"> <http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" value="<?php echo $c -> main[$x] -> link[$y] -> title; ?>" required /> </http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="col-sm-2"> <http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" value="<?php echo $c -> main[$x] -> link[$y] -> page; ?>" required /> </http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="col-sm-1"> <http://december.com/html/4/element/a.html href="#" class="btn btn-md text-center btn-delete" type="button" style="width: 100%; height: 100%;"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń ten link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/a.html> </http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="col-sm-1"> <http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html> </http://december.com/html/4/element/div.html> </http://december.com/html/4/element/div.html> <?php else: ?> <http://december.com/html/4/element/div.html class="row"> <http://december.com/html/4/element/div.html class="col-sm-8"> <http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" value="<?php echo $c -> main[$x] -> link[$y] -> title; ?>" required /> </http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="col-sm-2"> <http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" value="<?php echo $c -> main[$x] -> link[$y] -> page; ?>" required /> </http://december.com/html/4/element/div.html> </http://december.com/html/4/element/div.html> <?php endif ?> <?php endfor ?> </http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/script.html> function addRow(row) { var catNumber = $(row).data('rowCat'); var mainNumber = $(row).data('rowMain'); var linkNumber = $(row).data('rowLink'); var i = linkNumber++; var newRow = $('#cat' + catNumber + 'main' + mainNumber); $('<http://december.com/html/4/element/div.html class="row" style="margin-top: 2px;"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" value="" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>').appendTo(newRow); i++; return false; } </http://december.com/html/4/element/script.html>
Juz ci chyba kiedys pisalem, ze rowy to mozesz kopac a nie usuwac
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
function removeRow(row) { var catNumber = $(row).data('rowCat'); var mainNumber = $(row).data('rowMain'); var linkNumber = $(row).data('rowLink'); $('#cat' + catNumber + 'main' + mainNumber).remove(); return false; }
https://stackoverflow.com/questions/18874298/jquery-remove-all-elements-except-for-first-one
ok zadzialalo tak
// Skrypt usuwający link function removeRow(row) { var catNumber = $(row).data('rowCat'); var mainNumber = $(row).data('rowMain'); var linkNumber = $(row).data('rowLink'); $('#cat' + catNumber + 'main' + mainNumber).find('.row:last-child').remove(); return false; }
function removeRow(row) { var catNumber = $(row).data('rowCat'); var mainNumber = $(row).data('rowMain'); if ($('#cat' + catNumber + 'main' + mainNumber).not('.row:first-child')){ $('#cat' + catNumber + 'main' + mainNumber).find('.row:last-child').remove();} return false; }
function removeRow(row) { var catNumber = $(row).data('rowCat'); var mainNumber = $(row).data('rowMain'); $('#cat' + catNumber + 'main' + mainNumber).find('.row:last-child').not('.row:first-child').remove(); return false; }
// Skrypt dodający rozdział var n = 1; function addMain(row) { var catNumber = $(row).data('rowCat'); var mainNumber = $(row).data('rowCount'); var x = mainNumber + n; var newMain = $('#cat' + catNumber); $('<http://december.com/html/4/element/div.html class="row rozdzial" style="margin-bottom: 5px;"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Tytuł rozdziału</http://december.com/html/4/element/label.html><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="mainTitle[]" required /></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Strona rozdziału</http://december.com/html/4/element/label.html><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="mainPage[]" required /></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Usuń rozdział</http://december.com/html/4/element/label.html><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń rozdział"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Dodaj rozdział</http://december.com/html/4/element/label.html><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj rozdział"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html id="cat' + catNumber + 'main' + x + '"><http://december.com/html/4/element/div.html class="row"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>').appendTo(newMain); n++; return false; }
var n = 0; function addMain(row) { var catNumber = $(row).data('rowCat'); var rowCount = $(row).data('rowCount'); var mainNumber = rowCount + n; var newMain = $('#cat' + catNumber); $('<http://december.com/html/4/element/div.html class="row rozdzial" style="margin-bottom: 5px;"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Tytuł rozdziału</http://december.com/html/4/element/label.html><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="mainTitle[]" required /></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Strona rozdziału</http://december.com/html/4/element/label.html><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="mainPage[]" required /></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Usuń rozdział</http://december.com/html/4/element/label.html><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń rozdział"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Dodaj rozdział</http://december.com/html/4/element/label.html><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj rozdział"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html id="cat' + catNumber + 'main' + mainNumber + '"><http://december.com/html/4/element/div.html class="row"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>').appendTo(newMain); n++; return false; }
Napisz może parseInt lub parseFloat.
nie dzialaja
jak to zrobic?
var n = 1; function addMain(row) { var catNumber = $(row).data('rowCat'); var rowCount = $(row).data('rowCount'); var mainNumber = rowCount + n; var newMain = $('#cat' + catNumber); $('<http://december.com/html/4/element/div.html class="row rozdzial" style="margin-bottom: 5px;"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Tytuł rozdziału</http://december.com/html/4/element/label.html><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="mainTitle[]" required /></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Strona rozdziału</http://december.com/html/4/element/label.html><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="mainPage[]" required /></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Usuń rozdział</http://december.com/html/4/element/label.html><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń rozdział"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Dodaj rozdział</http://december.com/html/4/element/label.html><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj rozdział"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html id="cat' + catNumber + 'main' + mainNumber + '"><http://december.com/html/4/element/div.html class="row"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>').appendTo(newMain); n++; return false; }
Nie jestem pewien, ale może to pójdzie:
wtedy dostaje tak:
pierwszy generowany ma id "cat1Main0"
drugi: cat1Main2
trzeci Cat1MainNaN
var c = 0; function addMain(row) { var catNumber = $(row).data('rowCat'); var rowCount = $(row).data('rowCount'); var n = c; var mainNumber = rowCount + n; var newMain = $('#cat' + catNumber); $('<http://december.com/html/4/element/div.html class="row rozdzial" style="margin-bottom: 5px;"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Tytuł rozdziału</http://december.com/html/4/element/label.html><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="mainTitle[]" required /></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Strona rozdziału</http://december.com/html/4/element/label.html><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="mainPage[]" required /></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Usuń rozdział</http://december.com/html/4/element/label.html><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń rozdział"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/div.html class="form-group"><http://december.com/html/4/element/label.html>Dodaj rozdział</http://december.com/html/4/element/label.html><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj rozdział"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html id="cat' + catNumber + 'main' + mainNumber + '"><http://december.com/html/4/element/div.html class="row"><http://december.com/html/4/element/div.html class="col-sm-8"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkTitle[]" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-2"><http://december.com/html/4/element/input.html class="form-control text-center" type="text" name="linkPage[]" required /></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-remove icon-md" title="Usuń link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="col-sm-1"><http://december.com/html/4/element/button.html 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);"><http://december.com/html/4/element/span.html class="fa fa-plus icon-md" title="Dodaj link"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/button.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>').appendTo(newMain); c++; return false; }
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)