I've inline create of row in table in my index view.when user click on add row button it pre-append new editable row to the table .
at the end of the row there is button for save the data of the new row.when user click on save I disable the textboxes and checkboxes and
remove the button of create, what I need is instead add to this row the button of edit and delete, which is default for all table rows, how should I do that?
Here is the code for disable the row fields:
//Hide the create button
$('#btnsubmit').remove();
//Change the name property to disabled
$('input').attr('readonly', true);
$('#name').css("border", "none");
Here is the defult button for all the rows(if i press on create and refresh the page I will see the button also in this new saved row but I want to
add them when the row is added and the page was not refreshed...
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
This is how I add the new row with the create button when user click on create new row
var html = '<tr><td>#Html.TextBox("name")</td><td>#Html.CheckBox("checkBox1")</td><td>#Html.CheckBox("checkBox2")</td><td>#Html.CheckBox("checkBox3")</td><td><input id="btnsubmit" type="submit" value="Create" class="btn btn-default" /></td><td></tr>';
function addRow() {
if ($('#btnsubmit').length == 0) {
//Append new row to the table
jQuery(html).prependTo('#data-table');
UPDATE
this is the example of the table which for every row there is edit/delete button
UPDATE 2
I try to add the following but the button is not added when click on create
$('#btnsubmit').click(function () {
$.post("/Roles/Create", { name : $("name").val() }, function(NewID){
var oTD = $("#btnsubmit").parent();
oTD.append("<a href='/Roles/Edit/"+ NewID +"'>Edit</a>");
oTD.append("<a href='/Roles/Delete/"+ NewID +"'>Delete</a>");
});
You will have to return the ID in response of ajax call and add append anchor with the returned ID
function SaveData()
{
$.post("/[Controllar]/Savedata", { firstname : $("txtFirst").val(), lastname : $("txtLast").val() }, function(NewID){
var oTD = $("#btnsubmit").parent();
oTD.append("<a href='/[ControllarName]/Edit/"+ NewID +"'>Edit</a>");
oTD.append("<a href='/[ControllarName]/Detail/"+ NewID +"'>Detail</a>");
oTD.append("<a href='/[ControllarName]/Delete/"+ NewID +"'>Delete</a>");
//Hide the create button
$('#btnsubmit').remove();
//Change the name property to disabled
$('input').attr('readonly', true);
$('#name').css("border", "none");
});
}
Related
I have a table (Datatable) filled with records, I do not need to showing Edit button in each row, I want the user to select row and then press edit button (below the tabel) to open a bootstrap modal filled with selected row data.
Can I do that and How ?
I'm trying to pass the selected row ID to Bootstrap Modal, Let say I have an variable with selected record ID, and the record ID number was 25:
$id= 25;
and here is the edit button:
<button data-toggle="modal" data-target="#EditRecordModal<?php echo $id;?>" type='button' class='btn btn-primary btn-sm'>Edit</button>
The Modal Id will be:
<div id="EditRecordModal<?php echo $id;?>" class="modal fade">
Not working :(
You can enable multi select option in Datatable and use data attr to get the values and make another Datatable
Something like this
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
More detail here
or can try even this example
Clearing child div inside parent div, there are many answers like :
$(".ChildDiv").html("");
$('.ChildDiv > div').remove();
$(".ChildDiv").html("");
$("#ParentDiv").html("");
$(".ChildDiv div").remove();
$(".ChildDiv div").empty();
$('.ChildDiv ').find('div').remove();
Probably I have listed all possible way to remove the div's, but even after using all these, I still not able to clear all the div's inside Parent Div. let me explain what I am doing and what I need.
Scenario :
I have two container-1, one of the container has input search box, where I can search for entering employee name and select few employees Ex. 5 and can use "Add" button to move those employees to the other container-2 which is 'div'.
Now I click on report button event and get the information of those 5 people in different aspx, now if i go back to the page where i have to search for another 3 employees and when I again click on the "Add" button, it should add only 3 employees instead it is adding last searched 5 + 3 employees!!.
So i am trying to clear the 5 employees inside that div after i click on "Report" button , when i use alert() it says it has 0 element, but when I add it for the second time, it appends the data again, which i dont need. here is the code :
Points to remember :
1. ParentDiv is the container-2
2. ChildDiv is the child div inside ParentDiv(which is dynamically appended when we select 5 employees on "Add" button click"
Here is the code:
HTML :
<table id="topTable">
<tr>
<td id="leftpane">
<h4>Search for Employee by Name or Profile:</h4>
<input type="text" id="EmployeeSearchBox" class="search-box" aria-multiselectable="true" />
<select id="EmployeeList" size="20" multiple></select>
</td>
<td id="centerpane">
<div> <input type="button" value="Add >>" class="AddButton" id="buttonAdd" /></div>
<div> <input type="button" value="Add All >>" class="AddButton" id="buttonAddAll" /></div>
</td>
<td id="rightpane">
<h4>Selected Employees:</h4>
<div id="ParentDiv"></div>
</td>
</tr>
</table>
Run Report button event
<input class="data" type="submit" name="cmdSubmit" value="Run Report" onclick="return FormValidate();"
onserverclick="RunReport" runat="server" id="Submit1" />
Add Button Click :
which moves the employees from container-1 to container-2.
$(document).on('click', '#buttonAdd', function (e) {
$('#EmployeeList :selected').each(function (i, selected) {
myHash[$(selected).val()] = $(selected).text();
});
var myNode = $("#ParentDiv")[0];
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
for (var emp_id in myHash) {
var emp = $("#ParentDiv").append("<div class= ChildDiv id=" + emp_id + ">" + myHash[emp_id] + " <span class='close'>×</Span> </div>");
}
$('#EmployeeSearchBox').val("").trigger('input');
});
On click of "Report" button it should clear all the elements from ParentDiv/ChildDiv which is what I did, but still it is not clearing it, how can I resolve/remove these elements once "Report" button event clicked.
Here is a sample of "Report" button event :
function FormValidate() {//Part of my other code
$(".ChildDiv").html("");
$('.ChildDiv > div').remove();
$(".ChildDiv").html("");
$("#ParentDiv").html("");
$(".ChildDiv div").remove();
$(".ChildDiv div").empty();
$('.ChildDiv ').find('div').remove();
}
None of them is working, i feel there is an issue with the "Add" button event, where it is storing the data.
NOTE :
I don't want to clear the array of employee list, since I want to select multiple employees again again Ex. I can select 2 employees starts with the letter "M" and I can search the 2 employees of letter "L" and add those 2 employees, the container should hold 4 employees before "Report" button click.
Let me know if I am clear enough.
Console Log
Finally I could able to fix the issue, i was facing, I am posting the answer, now it is working as I need.
$(document).on('click', '#buttonAdd', function (e) {
var div_count = $('#ParentDiv').find('div').length;
if (div_count === 0) {
myHash = []; // Clearing the hash, so that it can add fresh employees, if count == 0 in container- 2.
$('#EmployeeList :selected').each(function (i, selected) {
myHash[$(selected).val()] = $(selected).text();
});
}
else { // If there are existing employees in container-2 then append few more.
$('#EmployeeList :selected').each(function (i, selected) {
myHash[$(selected).val()] = $(selected).text();
});
}
var myNode = $("#ParentDiv")[0];
console.log(myNode);
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
for (var emp_id in myHash) {
var emp = $("#ParentDiv").append("<div class= ChildDiv id=" + emp_id + ">" + myHash[emp_id] + " <span class='close'>×</Span> </div>");
}
$('#EmployeeSearchBox').val("").trigger('input');
});
What I did
Since I should be able to append multiple employees by searching, that is handled in 'else' part, if I generated the "Report" then, I am clearing the Container-2.
When I come back to page to search few more employees, by this time Container-2 will not be having any employees, so
var div_count = $('#ParentDiv').find('div').length;
if (div_count === 0) {
myHash = [];
//....
}
will clear the array which allow me to add fresh employees, hence it solved my problem :)
Thanks all for the support.
Edited to adjust on comments:
You need to clear the myHash variable. Otherwise employees will be added again from there.
I have a table(1) with checkbox against each row. When i click a checkbox its value is shown in another table(2). In table(2) each row has a remove option. If i click remove, the row will be removed. In the same way if i uncheck the checkbox in table(1), the corresponding row in table(2) should be removed.So how should i remove a row on uncheck.I have placed this part of code in else block.
$(document).ready(function(){
$('.isSelected').click(function() {
var pdtname = $(this).attr('data-productname');
if ( $('.isSelected:checked').length > 0) {
$("#result").show();
var table = $('<table></table>').addClass('tfoo');
var row = $('<tr></tr>').addClass('rfoo').text(pdtname);
var link = $('<a href="javascript:void(0);">/a>').addClass('lfoo').text('Remove');
row.append(link);
table.append(row);
$('#result').append(table);
$("#result").on('click','.lfoo',function(){
$(this).parent().parent().remove();
});
} else {
$('.isSelected[data-productname="pdtname"]').on('click','.lfoo',function(){
$(this).parent().parent().remove();
});
}
});
});
HTML
<div id="result" ></div>
<td><form method='post' action='<c:url value="compareproducts.html"/>' >
<input class="isSelected" type="checkbox" name='id' value='${product.id}'
data-productname="${product.productName}" >
</form>
As per our conversation in the chat. A quick solution would be to add a data-productname to the table so when you uncheck a checkbox, it removes the table with the same data-productname (notice that for this to work, the productname must be unique).
You can see an example on this jsfiddle: http://jsfiddle.net/4g8nL9t5/1/
I have the following table inside my asp.net mvc view:-
#foreach (var item in Model) {
<tr id="#item.TMSServerID">
<td>
#Html.ActionLink("Edit", "Edit","Server", new { id=item.TMSServerID },null) |
#if (!item.IsAlreadyAssigned()){
#Ajax.ActionLink("Delete",
"Delete", "Server",
new { id = item.TMSServerID },
new AjaxOptions
{ Confirm = "Are You sure You want to delete (" + item.Technology.Tag.ToString() + ")",
HttpMethod = "Post",
OnSuccess = "deletionconfirmation",
OnFailure = "deletionerror"
})}
</td>
<td>
#Html.ActionLink(item.Technology.Tag,"Details","Server",new { id = item.TMSServerID},null)
</td>
<td class="hidden-phone" >
#item.status
</td>
The table allow edit,delete single item at a time. But now I want to do the following:-
Add a checkbox beside each row.
Add a Ajax delete button to delete selected items
Add a Transfer ajax button, which allow editing the selected items status.
So I am trying to achieve the following:-
How can I pass the item id + item timestamp field , using ajax button , as I need to check if the selected items has been modified by another user?
How I can remove the selected row from the html table incase the delete operation successed ?
Thanks
add a check box on each first cell of the table with ModelID as the value of each checkbox.
inside your foreach, include this:
<td>
<input type="checkbox" name="TMSServerID" value="1" />
</td>
add this into tha parameter of your controller: Int32[] idList, something like this:
public void CheckForIds(Int32[] idList)
{
//Manipulate idList
}
and in your button event, call the controller method.
You might want to take a look at this for your reference:
http://byatool.com/mvc/asp-net-mvc-how-to-handle-multiple-checkboxes-with-viewsactions-jquery-too/
I am trying to add a delete button to a datagrid (using backgrid.js http://backgridjs.com/)
I have a select row
var grid = new Backgrid.Grid({
columns: [{
// name is a required parameter, but you don't really want one on a select all column
name: "id",
// Backgrid.Extension.SelectRowCell lets you select individual rows
cell: "select-row",
}].concat(columns),
collection: contacts
});
a button:
<button id= "button" type="button">Delete</button>
and:
$('#button').click(function () {
});
but how do i get the selected row id ? and send it to the server, to delete data from DB?
There's an entry on the documentation describing Grid#getSelectedModels.