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
Related
I have problem getting the value of the replace new table row, I will let you show the codes for the replacing new table row.
The is the Table B, Where this code use for replacing new table row to the Table A
$('#edit_chainingBuild').on('click','tr.clickable-row',function(e){
$('table#edit_chainingBuild tr').removeClass('selected');
$(this).addClass('selected');
var find_each_id_will_update = $(this).find('.data-attribute-chain-id').attr('data-attribute-chain-id');
$('.id_to_update_chain').val(find_each_id_will_update);
var find_each_id_condiments = $(this).find('.data-attribute-chain-id').attr('data-attribute-condiments-section-id');
$.ajax({
url:'/get_each_id_section_condiments',
type:'get',
data:{find_each_id_condiments:find_each_id_condiments},
success:function(response){
var get_each_section = response[0].condiments_table;
$.each(get_each_section, function (index, el) {
var stringify = jQuery.parseJSON(JSON.stringify(el));
var cat_condi_screen_name = stringify['cat_condi_screen_name'];
var cat_condi_price = stringify['cat_condi_price'];
var cat_condi_image = stringify['cat_condi_image'];
var condiment_section_name = stringify['condiment_section_name'];
var image = '<img src=/storage/' + cat_condi_image + ' class="responsive-img" style="width:100px;">';
// $('#edit_chainingBuild').append("<tr class='clickable-row'><td>" + Qty + "</td><td class='clickable-row-condiments'>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td></tr>");
$('table#edit_table_chaining_condiments').append("<tr class='edit_condimentsClicked' style='font-size:14px; border:none;'><td>"+condiment_section_name +"</td><td class='edit_condimentsScreenNameClicked'>" + cat_condi_screen_name + "</td><td class='edit_condimentsScreenPriced'>" + cat_condi_price + "</td><td>"+image+"</td></tr>");
});
$("table#edit_table_chaining_condiments tr").click(function(e){
var tableBhtml = $(this).closest('tr').html();
var condiments_name = $(this).closest("tr").find(".edit_condimentsScreenNameClicked").text();
var condimentsScreenPriced = $(this).closest("tr").find(".edit_condimentsScreenPriced").text();
// var input = '<input type="number" id="qty" name="qty" class="form-control changeQuantity" value="1" min="1">';
var id_to_edit_build = $('.id_to_update_chain').val();
$("#edit_chainingBuild tr.selected").html('');
var id_to_edit_builders = $('.id_to_update_chain').val();
$("#edit_chainingBuild tr.selected").replaceWith("<tr data-attribute-chain-id=" + id_to_edit_build + " class='clickable-row'><td class='new_condiments_name'>"+condiments_name+"</td><td>"+condimentsScreenPriced+"</td><td style='display:none;' data-attribute-chain-id="+id_to_edit_builders +" class='data-attribute-chain-id'>"+id_to_edit_builders+"</td></tr>");
$('#EditcondimentsBuilderModal').modal('hide');
});
},
error:function(response){
console.log(response);
}
});
$('#EditcondimentsBuilderModal').modal('show');
});
Looking forward if the table row already replace, I want to get the value of the class of new_condiments_name. So I create a variable to find the class of new_condiments_name. It look like this.
var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
So now when I try alert the variable new_condiments_name using the click function it shows null only.
$('.edit_build_success_insert').click(function(){
var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
alert(new_condiments_name);
});
My Html Table:
<div class="modal-body">
<div class="container">
<div class="header" style="text-align: center;">
<br>
<h3 style="color:#007BFF;">Build Your Chain Button</h3>
<label>This button will be served as customers menu.</label><br>
<i class="fab fa-creative-commons-remix" style="font-size:70px;"></i>
<br><br>
<input type="hidden" value="" class="edit_hidden_noun_id" name="">
<table class="table table-hover" id="edit_chainingBuild">
<thead>
<tr style="font-size: 15px;">
<!-- <th scope="col">Qty</th> -->
<th scope="col">Condiments</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody style="font-size:14px;">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="edit_build_success_insert btn btn-primary">Build Done</button>
</div>
I have here the image to proof that the value that i get always null.
$('table .edit_build_success_insert').click(function(){
var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
alert(new_condiments_name);
});
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!
It's been a long time since I coded so I am facing troubles.
I am using VS2015 .NET c# webForms Application. I have a simple form where the user need to fill a dynamic table and after hitting submit the values are passed to code behind for some calculation then stored in DB.
I used the HTML table in the link http://talkerscode.com/webtricks/add-edit-and-delete-rows-from-table-dynamically-using-javascript.php
the output:
I cant use Gridview becuase it postsback and connects to DB directly. I dont want to store the input of the table immediately.
I am stuck at retrieving the data from HTML table.
Can I get some hints or suggest to me any other better way to do if any.
If you want I can provide the code.
Thanks
UPDATE:
my code
form.aspx
<form runat="server">
//elements here
<div class="table-responsive" id="div_invlv">
<!------TABLE ---->
<table id="data_table" class="table" >
<tr>
<th></th>
<th> </th>
<th>Name</th>
<th>Position</th>
<th>Company</th>
<th></th>
</tr>
<tr>
<td>
<select class="form-control" id="type_of_person">
<option>Internal</option>
<option>External</option>
</select> </td>
<td><input type="text" class="form-control" id="new_name" /></td>
<td><input type="text" class="form-control" id="new_position" /></td>
<td><input type="text" class="form-control" id="new_company" /></td>
<td><input type="button" class="btn btn-small btn-template-main add" onclick="add_row();" value="Add Row" /></td>
</tr>
</table>
</form>
Table.js
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var drop = document.getElementById("type_of_person");
var new_type = drop.options[drop.selectedIndex].innerHTML;
var new_name=document.getElementById("new_name").value;
var new_country=document.getElementById("new_position").value;
var new_company=document.getElementById("new_company").value;
var table = document.getElementById("data_table");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='id_row" + table_len + "'><asp:Label Name='id" + table_len + "' runat='server' > " + table_len + "</asp:Label></td> <td id='Type_row" + table_len + "'><asp:Label ID='type" + table_len + "' runat='server' > " + new_type + "</asp:Label></td><td id='name_row" + table_len + "'> <asp:Label ID='name'"+table_len+" runat='server' >" + new_name + "</asp:Label></td><td id='position_row" + table_len + "'>" + new_country + "</asp:Label></td><td id='company_row" + table_len + "'><asp:Label ID='company'"+table_len+" runat='server' >" + new_company + "</asp:Label></td><td > <input type='button' value='Delete' class='btn btn-small btn-template-main delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_name").value="";
document.getElementById("new_position").value = "";
document.getElementById("new_company").value = "";
}
C#
string typeTable = Request.Form["type" + 1];
Label10.Text = typeTable ;
The rows are generated during the run and I am trying to retrieve the value of one cell in the first row for testing but its not working.
The link provided by #legends
https://www.aspsnippets.com/Articles/Dynamically-Add-Rows-to-GridView-using-JavaScript-on-Button-Click-in-ASPNet.aspx
works great and solved most of my issue.
Thanks
you can use this function to fill your datagrid dyamically
public void fillgrid(string qry, GridView dg){
try
{
sql.cmd = new SqlCommand("qry", sql.cn);
sql.cn.Open();
DataSet ds = new DataSet();
SqlDataAdapter sda = new SqlDataAdapter(sql.cmd);
sda.Fill(ds);
dg.DataSource = ds;
dg.DataBind();
sql.cn.Close();
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}
or you can use a placeholder control to create a dyamic html table
I have a table built dynamically in my view, I populated a table with values from a jquery popup modal dialog. What i am trying to accomplish is getting each cell in the row and assigning it to variable, at which point I am going to post the data to the database via an ajax call
I am fairly new to JS and jnquery and following many examples, I cant seem to figure out to assign the cell values to the variable, I have included the code below.
Here is the html for the table
<div class="row">
<div class="col-md-12">
<table id="myTest" class="table table-responsive">
<thead>
<tr>
<th>Sku Number</th>
<th>Product Name</th>
<th style="width:300px">Description</th>
<th>Quantity</th>
<th>Border</th>
<th>Ink Color</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="padding:10px 0; text-align: right; ">
<input id="submit" type="button" value="Save Order" class="btn btn-warning" style="padding: 10px 20px; margin-right: 15px;" />
</div>
</div>
Here is the JS for populating the table
function addItem() {
var remove = $('<input type="button" id="remove" value="remove" style="width:80px" class="btn btn-danger" />');
var td = $("<td></td>");
td.append(remove);
var valid = true;
allFields.removeClass("ui-state-error");
if (valid) {
$("#myTest tbody").append(
"<tr>" +
"<td>" + skuNumber.val() + "</td>" +
"<td>" + productName.val() + "</td>" +
"<td>" + description.val() + "</td>" +
"<td>" + quantity.val() + "</td>" +
"<td>" + border.val() + "</td>" +
"<td>" + inkColor.val() + "</td>" +
"</tr>");
dialog.dialog("close");
$("#myTest > tbody tr:last").append(td);
//console.log(td);
}
return valid;
}
And when you hit the submit button I want to create a list of objects that contains each row in the table, and this is where I am having problems.
$("#submit").click(function () {
var isAllValid = true;
var list = [];
$("#myTest tbody tr td")
.each(function(index, ele) {
var orderItem = {
SkuNumber: skuNumber.val(),
ProductName: productName.val(),
Description: description.val(),
Quantity: quantity.val(),
Border: border.val(),
InkColor: inkColor.val()
};
list.push(orderItem);
console.log(orderItem);
});
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