mikawebHi,
I'm trying to add a simple add/remove function in my Plugin settings page and it's killing me. I checked without WP and my code is working perfectly fine.
I have a table with (dynamic) rows. I can add as many rows as I want or remove them. My issue is when I'm trying to save the data in the database because the new rows added with jQuery are empty.
On my screen I can add/remove the rows perfectly but during the send process, those new rows don't exist. When I remove a row from the database and save the table, everything is fine. The only problem is to save the new rows.
My JS code:
var admin;
(function ($) {
admin = {
init: function () {
$(".remove_position").live('click', function() {
$(this).closest('tr').remove();
});
$("#add_position").live("click", function() {
if ($('#positions-table tbody tr:last').length > 0)
var getNumber = parseInt($('#positions-table tbody tr:last').attr('id').replace('position-', ''), 10);
else
var getNumber = 0;
var addNumber = getNumber + 1;
$('#positions-table > tbody:first').append('<tr id="position-' + addNumber + '"><td><input type="text" name="positions[' + addNumber + '][id]" value="1" size="4" /></td><td><input type="text" name="positions[' + addNumber + '][name]" value="" /></td><td><input type="text" name="positions[' + addNumber + '][order]" value="0" size="4" /></td><td><select name="positions[' + addNumber + '][show]"><option value="no">No</option><option value="yes" selected="selected">Yes</option></select></td><td><input type="button" name="remove_position" value="Remove" class="button remove_position" /></td></tr>');
});
}
};
$(document).ready(function() {
admin.init();
})
})(jQuery);My HTML code:
<table id="positions-table" class="widefat">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Order</th>
<th>Show</th>
<th><a href="#add_position" id="add_position">New Position</a></th>
</tr>
</thead>
<tbody>
<tr id="position-17">
<td><input type="text" name="positions[17][id]" value="1" size="4" /></td>
<td><input type="text" name="positions[17][name]" value="Gardien de But" /></td>
<td><input type="text" name="positions[17][order]" value="0" size="4" /></td>
<td>
<select name="positions[17][show]">
<option value="no">No</option>
<option value="yes" selected="selected">Yes</option>
</select>
</td>
<td><input type="button" name="remove_position" value="Remove" class="button remove_position" /></td>
</tr>
</tbody>
</table>I'm 100% sure that the problem is from WP or my code doesn't fit WP settings but without WP, everything perfect.
Thanks for your help. I can easily imagine that the issue is on my JS code OR WP is not accepting the append() values...
