Can't get sibling element text with jQuery - ajax

I have the following markup:
<table>
<tr>
<td>2 <i class="increase_quantity hidden-print icon-plus-sign"></i> <i class="decrease_quantity hidden-print icon-minus-sign"></i></td>
<td class="price_setup">0.0</td>
</tr>
</table>
jQuery
$(document).on('click', '.increase_quantity', function() {
alert('Setup Price: ' + $(this).closest('td').siblings('td.price_setup').text());
return false;
});
The problem is that the result is blank. I was actually trying to parseFloat but kept getting NaN so took that out for just now.
Update
The tr is being appended to the table via an ajax request
// ajax callback
// append result of ajax request
$('#line_items tbody:last').append(data);
Fiddle: http://jsfiddle.net/f49V8/11/ (which works)
Ajax response is valid HTML containing the markup from above.
Edit - Complete Code
I've been through this with a fine tooth comb and honestly can't see anything wrong so going to post the complete relevant code in the hope of someone spotting something.
Rails
class PriceListItemController < ApplicationController
def get_info
if params[:id] != ''
product = PriceListItem.find_by_id(params[:id])
total = product.price_setup + (product.price_rental * product.contract_length)
next_item = params[:no_items].to_i + 1
output = '<tr><td>' + next_item.to_s + '</td><td>' + product.product_type + '</td><td>' + product.description + '</td><td>1 <i class="increase_quantity hidden-print icon-plus-sign"></i></td><td class="price_setup">' + product.price_setup.to_s + '</td><td class="price_rental">' + product.price_rental.to_s + '</td><td class="contract_length">' + product.contract_length.to_s + ' months</td><td class="total">' + total.to_s + '</td></tr>'
render :text => output
end
end
end
HTML
<div class="row-fluid">
<table id="line_items" class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Item</th>
<th>Description</th>
<th>Quantity</th>
<th>Setup Cost</th>
<th>Rental Cost</th>
<th>Contract Term</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr id="blank">
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
jQuery
var no_items = 0;
$('#add_product').click(function() {
$.ajax({
url: '/price_list_item/get_info',
data: { id: $('#products_list').val(), no_items: no_items },
dataType: 'html',
type: "GET",
cache: false,
success: function(data) {
no_items++;
// append result of ajax request
$('#line_items tbody:last').append(data);
// remove blank row
$('#blank').remove();
var sub_total = 0;
var vat;
// update totals
$('.total').each(function(i) {
sub_total += parseFloat($(this).text());
});
vat = sub_total * 0.2;
total = vat + sub_total;
$('#sub_total').text('£' + sub_total);
$('#vat').text('£' + vat);
$('#total').text('£' + total);
},
error: function(){
alert('An error occurred, please refresh the page and try again');
}
});
});
$(document).on('click', '.increase_quantity', function() {
var quantity = parseInt($(this).parent().text());
var new_quantity = quantity + 1;
if (new_quantity > 1) {
$(this).closest('td').html(new_quantity + ' <i class="increase_quantity hidden-print icon-plus-sign"></i> <i class="decrease_quantity hidden-print icon-minus-sign"></i>');
// readjust total for this line item
var setup_cost = parseFloat($(this).closest('td').siblings('td.price_setup').text());
var rental_cost = parseFloat($(this).closest('td').siblings('td.price_rental').text());
var contract_length = parseInt($(this).closest('td').siblings('td.contract_length').text());
alert(setup_cost);
var total = setup_cost + (rental_cost * contract_length);
$(this).parent().parent().children('.total').text(total);
// update totals
$('.total').each(function(i) {
sub_total += parseFloat($(this).text());
});
vat = sub_total * 0.2;
total = vat + sub_total;
$('#sub_total').text('£' + sub_total);
$('#vat').text('£' + vat);
$('#total').text('£' + total);
}
return false;
});

<script>
jQuery(document).ready(function()
{
jQuery(".increase_quantity").click(function()
{
alert('Setup Price: ' + $(this).parent('td').siblings('td.price_setup').html());
});
});
</script>
<table>
<tr>
<td>2
<i class="increase_quantity hidden-print icon-plus-sign">12</i>
<i class="decrease_quantity hidden-print icon-minus-sign"></i>12</td>
<td class="price_setup">10.0</td>
</tr>
</table>

Related

jquery dynamic created th and tr from ajax call response

I want to create table head dynamic and table rows dynamic also, I don't where I am doing wrong.
I'm using Laravel for the data population of Data tables.
This is my response. I have two response, one for table heads and other table rows.
{"draw":0,"recordsTotal":14,"recordsFiltered":4,"data":[{"leaveTypeId":20,"leaveName":"Annual Leave"},{"leaveTypeId":7,"leaveName":"Hajj leave"},{"leaveTypeId":19,"leaveName":"TOIL"},{"leaveTypeId":11,"leaveName":"Unpaid leave"},{"leaveTypeId":2,"leaveName":"Sick Leave"},{"leaveTypeId":5,"leaveName":"Paternity leave"},{"leaveTypeId":6,"leaveName":"Maternity leave"}
,"emp":[{"id":327,"empName":"Abbas "},{"id":162,"empName":"Abdo"},{"id":407,"empName":"Abdo"},{"id":411,"empName":"Abdo"},{"id":219,"empName":"Abdu"},{"id":334,"empName":"Abdul Hakeem "},{"id":330,"empName":"Abdul Kareem "},{"id":412,"empName":"Abdulaleem"},{"id":246,"empName":"Abdulaziz"},{"id":301,"empName":"Abdulfatah"},{"id":100,"empName":"Abdulgani"},{"id":364,"empName":"Abduljaleel "},{"id":95,"empName":"Abdulkareem"},{"id":287,"empName":"Abdulkareem"},{"id":413,"empName":"Abdulkarim"},{"id":711,"empName":"Abdulkhaliq"},{"id":15,"empName":"Abdullah"},{"id":19,"empName":"Abdullah "},{"id":69,"empName":"Abdullah"},{"id":70,"empName":"Abdullah"},{"id":71,"empName":"Abdullah"},{"id":96,"empName":"Abdullah "},{"id":97,"empName":"Abdullah "},{"id":200,"empName":"Abdullah "},{"id":243,"empName":"Abdullah"},{"id":244,"empName":"Abdullah"},{"id":249,"empName":"Abdullah"},{"id":258,"empName":"Abdullah"},{"id":455,"empName":"Abdullah "},{"id":546,"empName":"Abdullah "},{"id":591,"empName":"Abdullah "},{"id":708,"empName":"Abdullah"},{"id":542,"empName":"Abdulmalik"}}
at balde page, I'm using like this.
<table id="LeaveSummaryGrid" class="table table-bordered table-striped">
<thead>
</thead>
<tbody>
</tbody>
</table>
And my ajax call like this.
$.ajax({
type: "get",
url: url_search,
//dataType:"json",
//data: data,
success: function (response)
{
var count = 1;
var trHTML = '';
$.each(response.data, function (key,value) {
trHTML +=
'<tr><th> EmpName' +
'</th><th colspan="3">' + value.leaveName +
'</th></tr>' +
'<tr><th>' +
'</th><th>Ent.' +
'</th><th>Ava.' +
'</th><th>Bal.' +
'</th></tr>'
;
count++;
/*header.append(
$('<th colspan="3"> jh </th></tr><tr><th>Ent.</th><th>Ava.</th><th>Bal.</th>')
);*/
});
$('#LeaveSummaryGrid thead').append(trHTML);
}
});
But this populating into rows.
I want the desired result like below shown in image.
enter image description here
EmpName
Annual Leave
Sick Leave
TOIL Leave
Maternity Leave
Paternity Leave
Each Leave type has sub table head i.e. Entitle, Availed, Balance
<table id="LeaveSummaryGrid" class="table table-bordered table-striped">
<thead id="thead">
</thead>
<tbody>
</tbody>
</table>
$.ajax({
type: "get",
url: url_search,
//dataType:"json",
//data: data,
success: function (response)
{
$.each(response.data, function (key,value) {
$('#thead').append("<tr><th> EmpName'+ value.leaveName +'</th></tr>" //and so on ...);
/*header.append(
$('<th colspan="3"> jh </th></tr><tr><th>Ent.</th><th>Ava.</th><th>Bal.</th>')
);*/
});
I resolve by myself and work well.
JS would be
$.ajax({
type: "get",
url: url_search,
//dataType:"json",
//data: data,
success: function (response)
{
var count = 1;
var trHTML = '';
var thLeave ='';
var thSub ='';
$.each(response.data, function (key,value) {
thLeave+= '<th colspan="3">'+value.leaveName+'</th>';
thSub+= '<th>Ent.</th>' +
'<th>Ava.</th>' +
'<th>Bal.</th>';
});
var table = `
<table id="LeaveSummaryGrid" class="table table-bordered table-striped">
<tr>
<th rowspan="2">EmpName</th>`+
thLeave+
`</tr>
<tr>`+
thSub+
`</tr>
</table>
`;
$('#Table').append(table);
}
});
AND HTML would be
<div class="table-responsive" id="Table">
</div>
so it created.
enter image description here

How to replace current table after ajax success

i want to repalce the current table after the success of ajax call and show new table.
this is my existing table:
<div class="container">
<h2 class="well col-lg-4">Booking History</h2>
<table id="tab" class="table table-bordered danger table-hover" style="color:orangered">
<thead>
<tr>
<th>S.N</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Booking Date</th>
<th>Booked On</th>
<th>Vehile Number</th>
<th>Parking Slot no.</th>
</tr>
</thead>
<tbody>
#{ int i = 1;}
#foreach (var item in Model)
{
<tr>
<td>#i</td>
<td>#item.firstName</td>
<td>#item.lastName</td>
<td>#item.email</td>
<td>#DateTime.Parse(item.bookingDate).ToString("dd MMM yyyy")</td>
<td>#DateTime.Parse(item.bookedOn).ToString("dd MMM yyyy")</td>
<td>#item.vehicleNo</td>
<td>#item.parkingSlot_id</td>
</tr>
i++;
}
</tbody>
</table>
<div class="text-center">
#Html.PagedListPager(Model, page => Url.Action("SearchBooking", new { page, fromDate = ViewBag.fromD,toDate= ViewBag.toD }))
</div>
</div>
This is my script:
<script>
$(document).ready(function () {
$('#searchByEmail').on('click', function () {
var emailData = $('#emailValue').val();
$.ajax({
type: "POST",
url: "/Admin/SearchByEmail",
dataType: "JSON",
data: { email: emailData },
success: function (result) {
if (result != 0) {
JSON.stringify(result);
var tr;
tr = $('<tr/>');
tr.append("<th>First Name </th>");
tr.append("<th>Last Name </th>");
tr.append("<th>Email</th>");
tr.append("<th>License No.</th>");
tr.append("<th>Booking Date</th>");
tr.append("<th>Booked On</th>");
tr.append("<th>Vehicle No.</th>");
tr.append("<th>Parking Slot No.</th>");
$('table').append(tr);
for (var i in result) {
tr = $('<tr/>');
tr.append("<td>" + result[i].firstName + "</td>");
tr.append("<td>" + result[i].lastName + "</td>");
tr.append("<td>" + result[i].email + "</td>");
tr.append("<td>" + result[i].licenseNo + "</td>");
tr.append("<td>" + result[i].bookingDate.slice(0, -12) + "</td>");
tr.append("<td>" + result[i].bookedOn.slice(0, -12) + "</td>");
tr.append("<td>" + result[i].vehicleNo + "</td>");
tr.append("<td>" + result[i].parkingSlot_id + "</td>");
$('table').append(tr);
}
}
},
error: function () {
alert('failure');
}
})
$('#emailValue').val('');
})
});
</script>
try this
use $("#tab").html('') before you append table
Like,
$("#tab").html('');
$("#tab").append(NewTable);

data getting lost after any operation on data-table while loading rows using ajax

I am fetching dataTable rows using Ajax from my controller in CodeIgniter.
I have fetched it successfully, but the problem is rows get lost while doing any operation on dataTable like sorting, searching.
But after refreshing a page it came back.
Here is my Ajax Script:
$('#dataTable_choose').DataTable({
responsive: true
});
$('body').on('click', '.getJobApplication', function(e) {
//alert();
var noteId = $(this).data('noteId');
var note_id = { id : noteId }
$.ajax({
type: 'POST',
async: true,
dataType: 'Json',
url: get_table_rows,
data: note_id,
success: function (response) {
if(response.length > 0){
for (i = 0; i < response.length; i++) {
innerhtml += "<tr>" +
"<td>"+response[i].column1+"</td>" +
"<td>"+response[i].column2+"</td>" +
"<td>"+response[i].column3+"</td>" +
"<td>"+response[i].column4+"</td>" +
"<td><span class='label label-info'>"+column5+"</span></td>" +
"<td>"+
"<button type='button' class='btn btn-success waves-effect waves-light' data-secid="+response[i].id2+" " +
" data-fiid = "+response[i].id+" >Choose</button>" +
"</td>" +
"</tr>";
$('#table_body').html(innerhtml);
}
} else {
console.log('error');
}
},
error: function (msg)
{
console.log('error');
}
});
});
Here is the Table HTML Code:
<table id="dataTable_choose" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Job Title</th>
<th>Qualification</th>
<th>Qualification Major</th>
<th>Candidate Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
After changing your DataTable's content with ajax, you need to clear the DataTable and redraw it. Below is a code that works for me (tried to add your ID's, please verify that they are correct and implement right in your code):
success: function (response) {
//DRAW YOUR innerhtml HERE, as you already do
$("#dataTable_choose").dataTable().fnClearTable(); //clear the table
$('#dataTable_choose').dataTable().fnDestroy(); //destroy the datatable
$('#table_body').html(innerhtml); //add your new data
$('#dataTable_choose').DataTable({ //redraw with new data
//YOUR OPTIONS HERE
});
});

Duplicated List of DropdownList when ajax update?

I have a Ajax Jquery function:
function UpdateValue() {
$(document.body).on("change",".quantity", function () {
var ProID = $(this).attr("data");
var Quantity = $(this).val();
$.ajax({
type: "GET", url: "/Cart/UpdateValue",
data: { ProID: ProID, quantity: Quantity },
success: function (data) {
$("#cartbox").html(data);
}
}
);
$.ajaxSetup({
cache: false
});
});
}
call UpdateValue in Cart Controller:
public PartialViewResult UpdateValue(Cart cart,int ProID, int quantity)
{
List<SelectListItem> items = new List<SelectListItem>();
for (int i = 1; i <= 10; i++)
{
items.Add(new SelectListItem { Text = i.ToString(),
Value = i.ToString() });
}
ViewBag.Items = items;
Product product = repository.Products.FirstOrDefault(p => p.ProductID
== ProID);
if (product != null)
{
cart.UpdateItem(product, quantity);
}
CartIndexViewModel ptview = new CartIndexViewModel { Cart = cart,
ReturnUrl = "/" };
return PartialView(ptview);
}
When the ajax function success, it returns UpdateValue View. But the Dropdown List always changes the same in each row. How can i pass the selected value from the Index View after ajax update?
Here is my UpdateValue View Code:
<table id="cartbox">
<thead>
<tr>
<th>Tên hàng</th>
<th>Số lượng</th>
<th>Đơn giá</th>
<th colspan="2" style="width:70px">Thành tiền</th>
</tr>
</thead>
<tbody>
#foreach (var line in Model.Cart.Lines)
{
<tr>
<td>#line.Product.Name
</td>
<td>#Html.DropDownList("Quantity", new SelectList(ViewBag.Items as System.Collections.IList, "Value", "Text", line.Quantity), new { data = line.Product.ProductID, #class = "quantity" })</td>
<td style="color:#3A9504;margin-left:3px">#string.Format("{0:00,0 VNĐ}", line.Product.Price)</td>
<td>#string.Format("{0:00,0 VNĐ}", (line.Quantity * line.Product.Price))</td>
<td align="center" style="width:10px"><img src="#Url.Content("~/Content/Images/delete.png")" style="padding-right:10px" /></td>
</tr>
}
</tbody>
<tfoot>
<tr style="border-top-style:solid;border-top-color:#DFDFDF;border-top-width:1px;">
<td colspan="3" align="right" style="border-right-color:#808080;border-right-style:solid;border-right-width:1px;text-align:right"><b>Tổng tiền:</b></td>
<td style="text-align: center"><b>#string.Format("{0:00,0 VNĐ}", Model.Cart.ComputeTotalValue())</b></td>
<td></td>
</tr>
</tfoot>
</table>
If I understand you correctly then your problem is that after updating the data in the dropdown list you lose the selection in that dropdown list?
If so then you would need to add this to your success handler in JavaScript:
success: function (data) {
$("#cartbox").html(data);
$("#cartbox").find(".quantity").val(Quantity);
}

JavaScript to get user input from editable table cell and send to server via json

I created a table with five columns dynamically. Two (the second and third column) of the five columns should be editable on the fly. Each time when user click on one the editable table cell, JavaScript should catch the user input and send the data to the server in json format. I have problem catch the user input and send to the server. Please help. This is my sample code -
<!DOCTYPE html>
<html>
<head>
<title>Editable table</title>
<style type="text/css" title="currentStyle">
#import "css/table.css";
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
Data table<br />
</div>
<div class="editab">
<table border="1">
<thead>
<tr>
<th>Contract Number</th>
<th>Current Status</th>
<th>Sale Balance Amount</th>
<th>Interest Rate</th>
<th>Discount</th>
</tr>
</thead>
<tbody>
<tr>
<td>00123</td>
<td onClick="editTableCell(this)">A30</td>
<td onClick="editTableCell(this)">$1,500.00</td>
<td>3.99 %</td>
<td>140</td>
</tr>
<tr>
<td>00234</td>
<td onClick="editTableCell(this)">B20</td>
<td onClick="editTableCell(this)">$2,500.00</td>
<td>3.99 %</td>
<td>160</td>
</tr>
<tr>
<td>00345</td>
<td onClick="editTableCell(this)">C40</td>
<td onClick="editTableCell(this)">$3,500.00</td>
<td>3.99 %</td>
<td>180</td>
</tr>
<tr>
<td>00456</td>
<td onClick="editTableCell(this)">A20</td>
<td onClick="editTableCell(this)">$4,500.00</td>
<td>3.99 %</td>
<td>200</td>
</tr>
<tr>
<td>00567</td>
<td onClick="editTableCell(this)">B30</td>
<td onClick="editTableCell(this)">$5,500.00</td>
<td>3.99 %</td>
<td>225</td>
</tr>
<tr>
<td>00678</td>
<td onClick="editTableCell(this)">C10</td>
<td onClick="editTableCell(this)">$6,500.00</td>
<td>3.99 %</td>
<td>250</td>
</tr>
<tr>
<td>00789</td>
<td onClick="editTableCell(this)">A30</td>
<td onClick="editTableCell(this)">$7,500.00</td>
<td>3.99 %</td>
<td>300</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var SelectState = false;
var SelectedElement = null;
var TextInput = null;
var CellText = null;
var txt = "test";
var idcount = 0;
function editTableCell( e ){
if ( SelectState == false ){
SelectedElement = e;
CellText = e.innerHTML;
e.innerHTML = "";
var objInput = document.createElement("input");
objInput.type = 'text';
objInput.value = CellText;
objInput.id = "txt" + idcount++;
objInput.onkeypress = editTextBox;
objInput.size = 15;
TextInput = objInput;
e.appendChild(objInput);
SelectState = true;
} else if (e != SelectedElement) {
SelectedElement.innerHTML = CellText;
SelectState = false;
}
}
function editTextBox( e ){
if (navigator.appName == "Microsoft Internet Explorer"){
e = window.event;
key = e.keyCode;
}
else if (navigator.appName == "Netscape"){
key = e.which;
}
if ( key == 13 ){
SelectedElement.innerHTML = TextInput.value;
SelectState = false;
}
else if ( key == 27 ){
SelectedElement.innerHTML = CellText;
SelectState = false;
}
}
/* var attrName = "":
var attrValue = "";
if ($('#test1')
{
attrName= "editField01";
attrValue = $(#test1).val();
}
if ($('#test2')
{
attrName= "editField02";
attrValue = $(#test2).val();
}
if ($('#test3')
{
attrName= "editField03";
attrValue = $(#test3).val();
}
var values = '{"' + attrName + '":' + attrValue + '}';
$.ajax({
url: serverUrl + "/abc/contract/" + poolId,
async: false,
type: "PUT",
data: JSON.stringify(values),
dataType: 'json',
processData: false,
contentType: 'application/json',
success: showResponse(json) {
// TODO: What info is returned in the data structure?
showResponse;
},
error: function(err) {
alert("Failed to update the attribute");
htmlErrorDialog(err.responseText);
}
});*/
function showResponse(json) {
if(json.success){
// handle successful response here
alert("user input from column sent successfully!");
} else {
// handle unsuccessful response here
alert("user input fail to send. Please try again");
}
}
</script>
</body>
</html>
You're not actually passing the json data to showResponse:
success: showResponse(json) {
// TODO: What info is returned in the data structure?
showResponse;
},
Pass it along as so, and make sure that json is an actual object and that you don't need to parse it first:
success: function(json) {
// check that json is an actual object via an alert
// alert(json);
showResponse(json);
},
EDIT: Okay after a lot of working around, I have a simple test case for making the fields editable. Please note it uses jquery, and comments are inline:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!-- Date: 2011-05-10 -->
</head>
<body>
<form>
<table border="1">
<thead>
<tr>
<th>Contract Number</th>
<th>Current Status</th>
<th>Sale Balance Amount</th>
<th>Interest Rate</th>
<th>Discount</th>
</tr>
</thead>
<tbody>
<tr>
<!-- The "identifier" class makes it so we have an id
to pass to our ajax script so we know what to change -->
<td class="identifier">00123</td>
<td class="editable">A30</td>
<td class="editable">$1,500.00</td>
<td>3.99 %</td>
<td>140</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
// bind our event handler to all td elements with class editable
$('td.editable').bind('click', function() {
// Only create an editable input if one doesn't exist
if(!$(this).has('input').length) {
// Get the text from the cell containing the value
var value = $(this).html();
// Create a new input element with the value of the cell text
var input = $('<input/>', {
'type':'text',
'value':value,
// Give it an onchange handler so when the data is changed
// It will do the ajax call
change: function() {
var new_value = $(this).val();
// This finds the sibling td element with class identifier so we have
// an id to pass to the ajax call
var cell = $(this).parent();
// Get the position of the td cell...
var cell_index = $(this).parent().parent().children().index(cell);
// .. to find its corresponding header
var identifier = $('thead th:eq('+cell_index+')').html();
//ajax post with id and new value
$(this).replaceWith(new_value);
}
});
// Empty out the cell contents...
$(this).empty();
// ... and replace it with the input field that has the value populated
$(this).append(input);
}
});
</script>
</body>

Resources