JQuery new row in table
Ik wil een nieuwe rij toevoegen in mijn table dmv JQuery. Dit lukt me, zo lang ik HTML, gewone tekst en variabelen gebruik.
Nu wil ik tussen die html tags ook nog een stuk javascript plaatsen dat zorgt voor een klein soort applicatie. Dit is niet meer dan een afbeelding waar je op kunt klikken waarbij er dan een klein kalendertje tevoorschijn komt. Als je hier een datum uit kiest, wordt die automatisch ingevuld in een input veld.
Mijn code ziet er zo uit: (Bij lijn 7 alles op 1 lijn, anders deed JS moeilijk omdat '' niet gesloten werd...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function addRow(){
var id = parseInt(document.getElementById("nextid").value);
var newid = id+1;
var rowid = parseInt(document.getElementById("numrows").value);
var nextrow = rowid+1;
var newrow = '<tr id="' + nextrow + '"><td><input type="text" name="activity_' + newid + '" value="" maxlength="50" style="width:95%;"></td><td><input type="text" name="startdate_' + newid + '" id="startdate_' + newid + '" value="" style="width:70px; text-align:center;"/></td><td><sc' + 'ript language="JavaScript">new tcal ({/* form name */\'formname\': \'calendar\', /* input name */ \'controlname\': \'startdate_' + newid + '\' }); </scr' + 'ipt></td><td><input type="text" name="startuur_' + newid + '" value="" style="width:50px; text-align:center;"></td><td><input type="text" name="enddate_' + newid + '" id="enddate_' + newid + '" value="" style="width:70px; text-align:center;"/></td><td><sc' + 'ript language="JavaScript">new tcal ({/* form name*/ \'formname\': \'calendar\',/* input name*/ \'controlname\': \'enddate_' + newid + '\'});</scr' + 'ipt></td><td><input type="text" name="einduur_' + newid + '" value="" style="width:45px; text-align:center;"></td><td align="center"><input type="checkbox" name="visible_' + newid + '" CHECKED></td><td align="center"><img src="http://www.jes-weekend.be/images/b_info.png" width="15" height="15" onmouseover="return Tip(\'Deze activiteit werd nog niet gewijzigd.\', TITLE, \'Informatie over deze activiteit\', WIDTH, 335)" onmouseout="UnTip();"></td></tr>';
$('#' + rowid).after(newrow);
}
var id = parseInt(document.getElementById("nextid").value);
var newid = id+1;
var rowid = parseInt(document.getElementById("numrows").value);
var nextrow = rowid+1;
var newrow = '<tr id="' + nextrow + '"><td><input type="text" name="activity_' + newid + '" value="" maxlength="50" style="width:95%;"></td><td><input type="text" name="startdate_' + newid + '" id="startdate_' + newid + '" value="" style="width:70px; text-align:center;"/></td><td><sc' + 'ript language="JavaScript">new tcal ({/* form name */\'formname\': \'calendar\', /* input name */ \'controlname\': \'startdate_' + newid + '\' }); </scr' + 'ipt></td><td><input type="text" name="startuur_' + newid + '" value="" style="width:50px; text-align:center;"></td><td><input type="text" name="enddate_' + newid + '" id="enddate_' + newid + '" value="" style="width:70px; text-align:center;"/></td><td><sc' + 'ript language="JavaScript">new tcal ({/* form name*/ \'formname\': \'calendar\',/* input name*/ \'controlname\': \'enddate_' + newid + '\'});</scr' + 'ipt></td><td><input type="text" name="einduur_' + newid + '" value="" style="width:45px; text-align:center;"></td><td align="center"><input type="checkbox" name="visible_' + newid + '" CHECKED></td><td align="center"><img src="http://www.jes-weekend.be/images/b_info.png" width="15" height="15" onmouseover="return Tip(\'Deze activiteit werd nog niet gewijzigd.\', TITLE, \'Informatie over deze activiteit\', WIDTH, 335)" onmouseout="UnTip();"></td></tr>';
$('#' + rowid).after(newrow);
}
Het probleem: Als de functie aangeroepen wordt, wordt die rij niet toegevoegd, maar krijg ik een blanco pagina. Als ik in de foutconsole kijk wat er fout liep, staat er dat tcal() niet gevonden werd. Maar die functie werkt anders wel op die pagina. Enkel nu, wanneer ik die rij wil toevoegen, werkt dat niet...
Hoe los ik dit op?
Gewijzigd op 13/09/2011 15:28:17 door Ruben Vanhoeyveld
Is er een rede dat je de helft wel Jquery gebruikt en de anderen helft niet ?
Voorbeeld: var id = .... kan ook met jquery.
var rowid zelfde verhaal.
Gebruik je de document ready van jquery ? zo ja staat die functie tcal() er buiten of binnen ?
De reden is dat het half gekopieerd is van een online source, half zelf aangepast. Intussen had ik alles wel al naar JQuery omgezet...
De functie staat binnen document ready van JQuery.
De tcal wordt gewoon in het begin van het document toegevoegd:
<script type="text/javascript" src="http://www.domain.com/calendar/calendar_nl.js"></script>
Toevoeging op 13/09/2011 15:54:39:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
$(document).ready(function() {
$("#addrow").click(function() {
var newid = parseInt($("#nextid").val());
var rowid = parseInt($("#numrows").val());
var nextrow = rowid+1;
alert(newid);
alert(nextrow);
var newrow = '<tr id="' + nextrow + '">';
newrow += '<td><input type="text" name="activity_' + newid + '" value="" maxlength="50" style="width:95%;"></td>';
newrow += '<td><input type="text" name="startdate_' + newid + '" id="startdate_' + newid + '" value="" style="width:70px; text-align:center;"/></td>';
newrow += '<td><sc' + 'ript language="JavaScript">new tcal ({/* form name */\'formname\': \'calendar\', /* input name */ \'controlname\': \'startdate_' + newid + '\' }); </scr' + 'ipt></td>';
newrow += '<td><input type="text" name="startuur_' + newid + '" value="" style="width:50px; text-align:center;"></td>';
newrow += '<td><input type="text" name="enddate_' + newid + '" id="enddate_' + newid + '" value="" style="width:70px; text-align:center;"/></td>';
newrow += '<td><sc' + 'ript language="JavaScript">new tcal ({/* form name*/ \'formname\': \'calendar\',/* input name*/ \'controlname\': \'enddate_' + newid + '\'});</scr' + 'ipt></td>';
newrow += '<td><input type="text" name="einduur_' + newid + '" value="" style="width:45px; text-align:center;"></td>';
newrow += '<td align="center"><input type="checkbox" name="visible_' + newid + '" CHECKED></td>';
newrow += '<td align="center"><img src="http://www.jes-weekend.be/images/b_info.png" width="15" height="15" onmouseover="return Tip(\'Deze activiteit werd nog niet gewijzigd.\', TITLE, \'Informatie over deze activiteit\', WIDTH, 335)" onmouseout="UnTip();"></td></tr>';
alert(newrow);
$('#' + rowid).after(newrow);
});
});
</script>
$(document).ready(function() {
$("#addrow").click(function() {
var newid = parseInt($("#nextid").val());
var rowid = parseInt($("#numrows").val());
var nextrow = rowid+1;
alert(newid);
alert(nextrow);
var newrow = '<tr id="' + nextrow + '">';
newrow += '<td><input type="text" name="activity_' + newid + '" value="" maxlength="50" style="width:95%;"></td>';
newrow += '<td><input type="text" name="startdate_' + newid + '" id="startdate_' + newid + '" value="" style="width:70px; text-align:center;"/></td>';
newrow += '<td><sc' + 'ript language="JavaScript">new tcal ({/* form name */\'formname\': \'calendar\', /* input name */ \'controlname\': \'startdate_' + newid + '\' }); </scr' + 'ipt></td>';
newrow += '<td><input type="text" name="startuur_' + newid + '" value="" style="width:50px; text-align:center;"></td>';
newrow += '<td><input type="text" name="enddate_' + newid + '" id="enddate_' + newid + '" value="" style="width:70px; text-align:center;"/></td>';
newrow += '<td><sc' + 'ript language="JavaScript">new tcal ({/* form name*/ \'formname\': \'calendar\',/* input name*/ \'controlname\': \'enddate_' + newid + '\'});</scr' + 'ipt></td>';
newrow += '<td><input type="text" name="einduur_' + newid + '" value="" style="width:45px; text-align:center;"></td>';
newrow += '<td align="center"><input type="checkbox" name="visible_' + newid + '" CHECKED></td>';
newrow += '<td align="center"><img src="http://www.jes-weekend.be/images/b_info.png" width="15" height="15" onmouseover="return Tip(\'Deze activiteit werd nog niet gewijzigd.\', TITLE, \'Informatie over deze activiteit\', WIDTH, 335)" onmouseout="UnTip();"></td></tr>';
alert(newrow);
$('#' + rowid).after(newrow);
});
});
</script>
Zo ziet dat deel er nu uit...
Toevoeging op 13/09/2011 15:55:18:
Ohja, de alert()'s zijn om te testen.. :)
Toevoeging op 13/09/2011 19:10:41:
Iemand???
Toevoeging op 14/09/2011 00:11:00:
Ok, het is me gelukt na veel prutsen met dat Javascript object..
Nu een ander probleem...
Ik heb een hele reeks nieuwe velden via JQuery op mijn pagina gebracht. Als ik het formulier verzend, worden die nieuwe velden niet gezien door PHP. Hoe lost ik dit op?
Toevoeging op 14/09/2011 13:09:26:
Ik ben te weten gekomen dat ik ook op volgende manier kan werken:
Code (php)
1
<input type="text" name="name[]" value="">
Met de vierkante haakjes []. Die krijg ik in PHP dan in een soort array op volgende manier:
Maar dit werkt enkel voor de fields die al op de pagina stonden. De fields die ik toevoegde met jQuery kan ik niet validaten met PHP. Hoe los ik dat op?
Gewijzigd op 13/09/2011 16:07:14 door Ruben Vanhoeyveld
Bepaalde jQuery functies schrijven inhoud permanent naar een pagina, andere doen dat alleen voor het uiterlijk.
met de functie .after() had ik problemen
met de functie .append() werd er permanent geschreven. Zo lukte het wel.