I have a button -
<a onclick="function edit_row()"></a>
When I click the button it invokes the function edit_row and opens a new row in a table which I can edit.
The problem is that every time I click the button, it opens a new row. I want to stop that. I want it to just open one row which holds the row id.
Script code:
function edit_row(process_id, row_id, item_id, quantity, price, total) {
$(".edit_row").remove();
$(".add_row").remove();
var row = '<tr class="bg-success"> <
td > <?php echo $lang['e_edit_items'];?>: < /td> <
td > '+ item_id +' < /td>';
row += '<td><?php echo $lang['
quantity '];?></td>';
row += '<td><input type="text" class="form-control" id="quant1" value="' + quantity + '"></td><td><?php echo $lang['
The - price '];?></td>';
row += '<td><input type="text" id="price1" class="form-control" value="' + price + '"></td>';
row += '<td><a class="btn btn-success btn-block"onclick="save_edit(' + process_id + ',' + row_id + ',' + item_id + ',' + quantity + ',' + total + ')"><?php echo $lang['
Save_edit '];?></a></td></tr>';
$("#" + row_id).after(row);
return false;
}
You can remove click event handler of clickable element like this example.
$("#button1").click(function(){
$("table").append("<tr><td>New-1</td><td>New-2</td><td>New-3</td></tr>");
$(this).unbind("click");
});
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Add row
<table>
<tr>
<td>Column-1</td>
<td>Column-2</td>
<td>Column-3</td>
</tr>
<tr>
<td>Column-1</td>
<td>Column-2</td>
<td>Column-3</td>
</tr>
</table>
But there is many way to do this work. For example you can add disabled attribute to clickable element, if it is button, You can add data-* attribute or class to element or use variable to do this. See example of other way in jsfiddle
Related
I am trying to implement Footable on my website, but I encounter a problem whereby every time I added a new set of values into my footable, the table does not auto paginate it. which mean
even though I have set it to have a limit of 10
data-paging-size="10"
Every time I append into my table, it does not auto redraw and paginate. It will keep on adding to my current page and the size will keep increasing
<table id="myTable" class="table footable filter-dropdown-no bid-list-table " data-paging-size="10" data-sorting="true" data-filtering="true">
<thead>
<tr>
<th data-breakpoints="xs sm">Photo</th>
<th>Facebook Name/ID</th>
<th >Qty</th>
<th data-breakpoints="xs sm">Comment</th>
<th data-breakpoints="xs sm">Comment Time</th>
<th data-breakpoints="xs">Action</th>
</tr>
</thead>
<tbody >
````
</tbody>
</table>
Here is my javascript
function localStorageLiveUpdate(value){
$('.bid-item-customer-id-' + value.id).remove();
$('.footable-empty').remove();
var html = '<tr class="bid-item bid-item-' + value.id;
html += ' bid-item-customer-id-' + value.id + '" data-id="' + value.id + '" data-customer-id=" ' + value.customer_id + '">';
html += '<td data-fb-user-id="' + value.fb_user_id + '" style="display: table-cell;"></td>';
html += '<td style="display: table-cell;">' + value.from.name + '<p>(' + value.from.id + ')</p></td>';
html += '<td style="display: table-cell;"><form method="post" class="form-bid-item-action" action="{{ config('app.url') }}/admin/bid/' + value.id + '/action">';
html += '<input type="hidden" name="_token" value="' + value.csrf + '"><div class="input-group">';
html += '</div></form></td><td style="display: table-cell;">' + value.message + '</td><td style="display: table-cell;">' + timeCreated + '</td><td style="display: table-cell;">';
html += '<form method="post" class="form-bid-delete-action" action="{{ config('app.url') }}/admin/bid/' + value.id + '/delete/action">';
html += '<input type="hidden" name="_method" value="delete"><input type="hidden" name="_token" value="' + value.csrf + '">';
html += '</form></td></tr>';
$('.bid-list-table tbody').append(html);
}
Thanks for spending your time to help.
Your table size keep increase because every time you call the function "localStorageLiveUpdate" you are appending data and adding new line
// Add this line before appending new element
$('.bid-list-table tbody tr').remove();
$('.bid-list-table tbody').append(html);
Apologies if the title doesn't describe the following problem correctly.
Essentially I have the following in my cshtml file:
<tbody>
#for (int i = 0; i < Model.ProgrammeScores.Count; i++)
{
<tr>
<td>
<input type="hidden" asp-for="#Model.ProgrammeScores[i].Id" />
<input type="text" asp-for="#Model.ProgrammeScores[i].FileDate" name="#Model.ProgrammeScores[i].FileDate" class="datepicker form-control" aria-describedby="calendar-addon" />
</td>
<td>
<select asp-for="#Model.ProgrammeScores[i].ScoreId" name="#Model.ProgrammeScores[i].ScoreIds" asp-items="#Model.Scores" id="ScoreIds" class="select-picker create-select"></select>
</td>
<td>
<textarea class="form-control" rows="2" asp-for="#Model.ProgrammeScores[i].Comments"></textarea>
</td>
<td>
</td>
</tr>
}
</tbody>
#Model.Scores is a IList<SelectListItem>
Then, I have a button which adds a new row to the table with empty values, which I want to be editable and therefore allow me to add a new Score to the Programme inline in the actual table.
The Javascript function that adds a row to the table is as follows (I am aware that I am incorrectly trying to use Razor code here - This is where I need help)
function addScorecard() {
var rowCount = parseInt($('#numOfScores').val());
var scoreTable = $('#programme-score-table');
var row = $([
'<tr>',
'<td>',
'<input type="hidden" asp-for="#Model.ProgrammeScores[' + rowCount + '].Id" />',
'<input type="text" asp-for="#Model.ProgrammeScores[' + rowCount + '].FileDate" name="#Model.ProgrammeScores[' + rowCount + '].FileDate" class="datepicker form-control" aria-describedby="calendar-addon" />',
'</td>',
'<td>',
'<select asp-for="#Model.ProgrammeScores[' + rowCount + '].ScoreId" name="#Model.ProgrammeScores[' + rowCount + '].ScoreIds" asp-items="#Model.Scores" id="ScoreIds" class="select-picker create-select"></select>',
'</td> ',
'<td>',
'<textarea class="form-control" rows="2" asp-for="#Model.ProgrammeScores[' + rowCount + '].Comments"></textarea>',
'</td> ',
'<td>',
'</td>',
'</tr>'
].join("\n"));
scoreTable.append(row);
}
So, my overall question is - what is the correct way to implement this functionality so that whenever I add a new row to the table, the cells are correctly linked to their fields on the Model, for example the Select is correctly mapped to #Model.ProgrammeScores[i].ScoreId, and also the asp-items which come from #Model.Scores are correctly set as the options in the select dropdown list.
I have already began attempting to pass #Model.Scores from the cshtml through to the js using <script> var scores = '#Html.Raw(Json.Serialize(Model.Scores))'; </script> but I was still not able to get asp-items working for the dropdown.
Many thanks!
I am trying to bind column dynamically in a table using jQuery .but click event is not working while trying to click 'btnASizeR' and 'btnWdDelete' button event is not working .Any idea would be appreciated.
$(function() {
var i = 0;
$('#btnASizeR').click(function() {
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var i = $("#WireDimTbl tbody>tr").length + 1;
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' name='SizeMin' value='2.00' />";
var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' name='SizeMax' value='3.00' />";
var ToleranceMin = "<input type='text' ID='TolMin" + i + "' name='TolMin' value='1' />";
var ToleranceMax = "<input type='text' ID='TolMax" + i + "' name='TolMax' value='1' />";
var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
$("#WireDimTbl tbody").append(markup);
});
$('#btnWdDelete').click(function() {
$("#WireDimTbl tbody>tr:last").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class='text-left'><strong>Wire Dimensions</strong></td>
</tr>
<tr>
<td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
<td>
<input type="button" id="btnASizeR" value="AddSizeRange" />
<input type="button" id="btnWdDelete" value="Delete" />
<table id="WireDimTbl" class="table table-bordered">
<thead>
<tr>
<th class="text-center">Size Range Min (mm)</th>
<th class="text-center">Size Range Max (mm)</th>
<th class="text-center">Tolerance (-)mm</th>
<th class="text-center">Tolerance (+) mm</th>
</tr>
</thead>
<tbody></tbody>
</table>
</td>
</tr>
You mentioned that you are loading the table dynamically. Do you mean that when the page first loads the table is missing and its added later?
If that is the case, are you sure the code is called that binds the click events? The above example binds the events on page_load however, if the buttons are not yet available on the page it won't be able to bind it. JQuery will not automatically bind future elements.
Try settings a console.log($('#btnASizeR')); before binding the click event to make sure that JQuery can actually find the button.
Start with: I am very new to Front End dev (it got added to my java backend work:)). I have a modal that opens on a page with a table with two rows - each with 2 inputs and a select box. If you click a button....it should add another row with the same elements. They use to do it this way: have a table footer that was hidden with the elements in (starting with row: <tr>), then when you click the button it calls the table body and .append the footer. Then call the attr on the three elements and change the id and name. For some reason if the footer is unhidden...the dropdown works, but the copied version doesn't. We investigated the names, the values, etc. The values are in the rendered html...the dropdown just doesn't open.
So now what I am trying to do...which I feel might be cleaner. Is create a variable with the html...and append that everytime the button is clicked. But the select element has a tag that was written...so I don't know if this is the problem, but everytime I try and add it to the mix....There are errors about unexpected token(<). If I take the one line that starts <dfm:catombobox> away - it works... Anyone have ideas to help me add the "catombobox" which is the select with the tag? PS: If I take the quotes away and just copy that line to the original table...it works??
var newRow = '<tr>'+
'<td nowrap="nowrap"><strong>R</strong> <input class="amount input-small" style="margin-top: 8px;margin-bottom: 0;" type="text"/></td>'+
'<td nowrap="nowrap" style="padding-top: 7px;">'+
'<dfm:catombobox cssClass="input-medium" id="CategoryId_Test" name="CategoryName_Test" showEmptyCategory="true" showGroups="true" value=""/>'+
'</td>'+
'<td><input class="input-medium" style="margin-top: 8px;margin-bottom: 0;" type="text"/></td>'+
'<td><a class="remove" href="#"><i class="icon-remove"></i></a></td>'+
'</tr>';
$("#mytable tbody").append(newRow);
try using select instead of dfm:catombobox
check here its working fine
adding new rows to table
var newRow = '<tr>' +
'<td nowrap="nowrap"><strong>R</strong> <input class="amount input-small" style="margin-top: 8px;margin-bottom: 0;" type="text"/></td>' +
'<td nowrap="nowrap" style="padding-top: 7px;">' +
'<dfm:catombobox cssClass="input-medium" id="CategoryId_Test" name="CategoryName_Test" showEmptyCategory="true" showGroups="true" value=""/>' +
'</td>' +
'<td><input class="input-medium" style="margin-top: 8px;margin-bottom: 0;" type="text"/></td>' +
'<td><a class="remove" href="#"><i class="icon-remove"></i></a></td>' +
'</tr>';
$("#btn").on('click',function(){
$("#mytable tbody").append(newRow);
})
I've a live insert form which is supposed to append to a table the value if it's actually inserted in the database.
So, I have this javascript/jquery function:
else{
var data = 'action=insert&porcab=' + porcAbandoned + '&porcan=' + porcAnswered;
data = data + '&secab=' + secAbandoned + '&secan=' + secAnswered + '&name=' + name;
$.ajax({
type: "POST",
url: "manager.php",
async: false,
data: data,
cache: false,
success: function(response){
var result = Number(response);
var row = '<tr id="'+result+'"><td class="edit porcAbandoned '+result+'>'+name+'</td>';
row = row + '<td style="text-align: center;" class="edit porcAbandoned '+result+'>'+porcAbandoned+' %</td>';
row = row + '<td style="text-align: center;" class="edit secAbandoned '+result+'>'+secAbandoned+'</td>';
row = row + '<td style="text-align: center;" class="edit porcAnswered '+result+'>'+porcAnswered+' %</td>';
row = row + '<td style="text-align: center;" class="edit secAnswered '+result+'>'+secAnswered+'</td>';
row = row + '<td style="text-align: center;">-</td>';
row = row + '<td style="text-align: center;"><a class="delete" href="#"><img src="assets/delete.png" /></a></td></tr>';
$('#clients > tbody:last').append(row);
}
});
}
The previous IF is just the validation. If it doesn't validate doesn't perform the AJAX call.
I've tried to alert the row and the data stored is correct but it doesn't show any data in the table but the score and the image...
The response returned is the ID of the table inserted so it could be deleted.
What's wrong with that?
You didn't close the class attribute, f.ex:
row = row + '<td style="text-align: center;" class="edit porcAbandoned '+result+'>'+porcAbandoned+' %</td>';
is:
row = row + '<td style="text-align: center;" class="edit porcAbandoned '+result+'">'+porcAbandoned+' %</td>';
________________________________________________________________________________/\
What about this test jsfiddle. This works and adds a row. However, the used variables must be handed to the functions using the "context" property, see here: jQuery.ajax