I have write a code and getting the values via jQuery and Ajax using the following code, the data comes fine but i could not populate the rows in my table. the looping is not work.
This is my table code in html
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Hospital Details</th>
<th>Requested Product</th>
<th>Units</th>
<th>Patient Details</th>
<th>Interval</th>
<th>Requester</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
This is my ajax script
<script>
$.get("./../incomingRequestList.php", function(data, status){
var obj = jQuery.parseJSON(data);
for($i=0; $i<obj.length; $i++){
$response += "<tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
}
$('#result').html($response);
});
</script>
How can i overcome this issue. I am unable to find out why its wrong.
The correct way to do it is:
<script>
$.get("./../incomingRequestList.php", function(data, status){
var obj = jQuery.parseJSON(data);
var response = '';
for(i=0; i<obj.length; i++){
response += "<tr><td>"+obj.number+"</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
}
$('#result').html(response);
});
</script>
Related
I am using two fields from the table. I can get first-row value, then I added second-row value but can't get second-row value. I need if I add multiple rows, I can get all value using JSON .can you please solve these issues.
HTML:
<button class="add">Add</button>
<table class="orders-detail table table-striped table-bordered row-border hover" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button class="send">Send</button>
Script:
$("document").ready(function(){
$(".add").click(function(){
var td_add="<tr><td><input type='text' id='name' class='name'></td><td><input type='text' id='age'></td></tr>";
$("tbody").append(td_add);
});
$(".send").click(function(){
var name=document.getElementById("name").value;
var age=document.getElementById("age").value;
var obj={
name:name,
age:age
};
alert(JSON.stringify(obj));
});
});
Output: i can get single row value.
{"name":"aravind","age":"42"}
i have fixed your code please check it.
$("document").ready(function() {
$(".add").click(function() {
var td_add = "<tr><td><input type='text' name='aa' id='name' class='name'></td><td><input type='text' name='bb' id='age'></td></tr>";
$("tbody").append(td_add);
});
$(".send").click(function() {
var asa = [];
$("input[name*='aa']").each(function(key, item) {
if (!asa[key]) asa[key] = {};
asa[key].calvalue = item.value;
});
$("input[name*='bb']").each(function(key, item) {
if (!asa[key]) asa[key] = {};
asa[key].calvalue2 = item.value;
});
alert(JSON.stringify(asa));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="add">Add</button>
<table class="orders-detail table table-striped table-bordered row-border hover" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button class="send">Send</button>
Reason:
You will always get the value of the first row because on dynamically adding rows, you are keeping same id and name for all input elements.
Solution:
Use class instead of id to get the element's value in a loop.
e.g
var names = document.getElementsByClassName("name");
for(var i = 0; i < names.length; i++)
{
names[i].value
}
Or, use this one, creating an array of objects in the form of
dat = [
{
"name": "Charlie Brown",
"age": "13"
},
{
"name": "Peppermint Patty",
"age": "11"
}
]
var tr_add="<tr><td><input type='text' name='name'></td><td><input type='text' name='age'></td><td><select name='gender'><option>female</option><option>male</option></select></td><th><input type='text' name='shoesize'></th></tr>";
$(function(){
$(".add").click(function(){ $("tbody").append(tr_add); });
$(".send").click(function(){
var dat=$("#myform").serializeArray().reduce(function(a,v){
if (v.name=='name') a.push({name:v.value}); // add new object to array
else a[a.length-1][v.name]=v.value; // add attribute to existing object
return a;
},[])
console.log(dat); });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="add">Add</button><form id="myform">
<table class="orders-detail table table-striped table-bordered row-border hover" width="100%">
<thead><tr><th>Name</th><th>Age</th><th> gender</th><th>shoe size</th></tr></thead>
<tbody></tbody>
</table></form>
<button class="send">Send</button>
The data can be extended without having to change anything in the script. It will collect all the data according to the name attribute of the input element.
The only "fixed" point in this script is that the first input field must be the one with name="name". This will trigger the creation of a new object in the dat-array.
Here I am trying to get result in jsp page using ajax but i am getting improper result.
Problem: My ajax response is displayed first instead of my table headings. That means it should show table headings and then table content but not happening.
my jsp page displaying result
My Ajax code:
<script>
$(document).ready(function(){
$(function(){
$('#form1').submit(function(e){
e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(msg) {
console.log(msg);
$('#LogsReceived').append(msg);
},
error: function (error) {
console.log(error);
}
});
});
});
});
</script>
Here is my html code:
<div class="result" >
<p>
<table>
<div id="LogsReceived">
<tr>
<th>Index</th>
<th>Type</th>
<th>Severity</th>
<th>Source Host</th>
<th>Source</th>
<th>Program</th>
<th>Priority</th>
<th>Message</th>
<th>User</th>
<th>Facility</th>
<th>Event Time</th>
</tr>
</div>
</table>
</p></div>
Your HTML structure is invalid. You can't have a div as a direct child of table and as a parent of tr. What you're looking for there is thead or tbody, not div. It's being corrected by the browser, relocating the div to before the table. (Because it's invalid, the browser can do anything it wants: Put the div before, put it after, treat it as though it were a tbody, ...) Putting a table in a p is similarly invalid. You can see the rearrangement with the dev tools of your browser: Just right-click the table headers and choose "Inspect element" (or similar):
I recommend reviewing the various rules for what elements can go where in the spec.
Probably, you want both thead and tbody:
<table>
<thead>
<tr>
<th>Index</th>
<th>Type</th>
<th>Severity</th>
<th>Source Host</th>
<th>Source</th>
<th>Program</th>
<th>Priority</th>
<th>Message</th>
<th>User</th>
<th>Facility</th>
<th>Event Time</th>
</tr>
</thead>
<tbody id="LogsReceived">
</tbody>
</table>
I'm building a laravel application where I want to show if there is any update data in database after two seconds.So in this scenario I have given the table a 'id' and then I have laod the table after certain time interval. But the problem is after every javascript call it creates an empty row in table even if the table retrieve the value also. How do I avoid the problem..any suggestion please?
<div class="container">
<h3> List Of Courses </h3></br>
<table class="table table-striped table-bordered dataTable" id="example">
<thead>
<tr>
<td>Serial No</td>
<td>Title</td>
<td>Description</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php $i=1; ?>
#foreach($items as $row)
<tr>
<td>{{$i}}</td>
<td class="title" data-id1="{{$row->id}}" contenteditable>{{$row->title}}</td>
<td class="description" data-id2="{{$row->id}}" contenteditable>{{$row->description}}</td>
<td>
<button type="button" onclick="deleteItem({{ $row->id }})" class="btn btn-danger">Delete</button>
</td>
</tr>
<?php $i++; ?>
#endforeach
</tbody>
</table>
</div>
Here is the javascript I have to use to load the table after 3 seconds:
<script type="text/javascript">
setInterval(function() {
$("#example").load("list #example");
}, 30000);
</script>
You need to give load a callback and check if you returned any data.
Without knowing the return data structure my best guess would be
$("#example").load("list #example", function (data) {
// hopefully you are returning json. if not, return json. It's the artisan way :D
let parsed = JSON.parse(data);
if (parsed) {
// build html and inject in dom
}
});
See this is how I actually solved the problem,
I put the table inside a new div and I called the jquery .load() on that div.
Like this :
<div class="reloadTable">
<table class="table table-striped table-bordered dataTable" id="example">
// table data
</table>
</div>
javaScript :
<script type="text/javascript">
setInterval(function() {
$(".reloadTable").load("list #example");
}, 3000);
</script>
I have some HTML that looks as follows:
<table id="resultsTable" class="table table-bordered table-responsive table-hover table-condensed sortable">
<thead>
<tr>
<th>Company Name</th>
<th>Tours Offered</th>
<th>Average Rating</th>
<th>Total Reviews</th>
</tr>
</thead>
<tbody class="searchable">
#foreach (var item in Model.AccommodationList)
{
<tr>
<td class="accommodationName">
#Html.ActionLink(item.AccommodationName, "ViewHomePage", "AccommodationHomepage", new {accommodationId = item.AccommodationId}, null)
</td>
<td>
#Html.DisplayFor(modelItem => item.FormattedAddress)
</td>
<td>
<Deleted for brevity>
</td>
<td>
#Html.DisplayFor(modelItem => item.TotalReviews)
</td>
<td class="latitudeCell" style="display: none;">
#Html.DisplayFor(modelItem => item.Latitude)
</td>
<td class="longitudeCell" style="display: none;">
#Html.DisplayFor(modelItem => item.Longitude)
</td>
</tr>
}
</tbody>
</table>
I am trying to get the value of the accommodation name, latitude and longitude in each row with the following jQuery:
$('#resultsTable tbody tr').each(function () {
var latitude = $(this).find(".latitudeCell").html();
var longitude = $(this).find(".longitudeCell").html();
var accommodationName = $(this).find(".accommodationName").html();
});
}
However I must be doing something incorrectly because I'm not able to get any values.
Use javascript table.rows function and textContent property to get the inner text of the cell like you can do something like below:
for(var i = 1, row; row = table.rows[i]; i++)
{
var col1 = row.cells[0].textContent;
var col2 = row.cells[1].textContent;
} var col3 = row.cells[2].textContent;
Don't use innerText it is much slower than textContent and also doesn't work in firefox.
I wrote up a fiddle and modified some of your code so I could put text in your cells, I am wondering if this will help you? If not could you write up a small fiddle and I can provide some more assistance.
https://jsfiddle.net/y3llowjack3t/8cL94hgq/
$('#resultsTable tbody tr').each(function () {
var latitude = $(this).find(".latitudeCell").html();
var longitude = $(this).find(".longitudeCell").html();
var accommodationName = $(this).find(".accommodationName").html();
alert(latitude);
});
You are getting the data correctly but, you don't seem to do anything with the values you obtain from the table. And, after .each(), you will not have access to even the values from the last row since you're using local variables. You can create an array that has all the data.
Give this a try:
var locations = $('#resultsTable tbody tr').map(function() {
var location = {};
location.latitude = $(this).find(".latitudeCell").html();
location.longitude = $(this).find(".longitudeCell").html();
location.accommodationName = $(this).find(".accommodationName").html();
return location;
}).get();
console.log( locations );
//OUTPUT: [{"latitude": "<val>","longitude": "<val>", "accommodationName": "<val>"},{.....},....]
Your code works for me:
example
In the code you paste you put a } more, try to check if there's some issues with brakets.
Here is a working example. In your example, I did not see how you were calling your function. I enclosed your function in $().ready() so that it is called when the DOM is ready. You will want to call your function any time the tan;e content changes.
$().ready(function() {
$('div#cellValues').empty();
$('div#cellValues').append('<ul></ul>');
$('#resultsTable tbody tr').each(function(index) {
var latitude = $(this).find('.latitudeCell').html();
var longitude = $(this).find(".longitudeCell").html();
var accommodationName = $(this).find(".accommodationName").html();
$('div#cellValues ul').append('<li>' + accommodationName + ': [' + latitude + ',' + longitude + ']</li>');
});
});
#cellValues {
border: 1px solid red;
}
#cellValues::before {
content: "Cell Values:";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cellValues"></div>
<table id="resultsTable" class="table table-bordered table-responsive table-hover table-condensed sortable">
<thead>
<tr>
<th>Company Name</th>
<th>Tours Offered</th>
<th>Average Rating</th>
<th>Total Reviews</th>
</tr>
</thead>
<tbody class="searchable">
<tr>
<td class="accommodationName">accomidationName1</td>
<td>FormattedAddress1</td>
<td></td>
<td>TotalReviews1</td>
<td class="latitudeCell" style="display: none;">Latitude1</td>
<td class="longitudeCell" style="display: none;">Longitude1</td>
</tr>
<tr>
<td class="accommodationName">accomidationName2</td>
<td>FormattedAddress2</td>
<td></td>
<td>TotalReviews2</td>
<td class="latitudeCell" style="display: none;">Latitude2</td>
<td class="longitudeCell" style="display: none;">Longitude2</td>
</tr>
<tr>
<td class="accommodationName">accomidationName3</td>
<td>FormattedAddress3</td>
<td></td>
<td>TotalReviews3</td>
<td class="latitudeCell" style="display: none;">Latitude3</td>
<td class="longitudeCell" style="display: none;">Longitude3</td>
</tr>
</tbody>
</table>
<table class="table table-hover">
<thead>
<tr><th> Block</th>
<th>Size</th></tr>
</thead>
<tbody id="poolTable" class="tbody">
<tr>
<td>78</td>
<td>18</td>
</tr>
<tr>
<td>52</td>
<td>21</td>
</tr>
<tr>
<td>54</td>
<td>19</td>
</tr>
</tbody>
</table>
Hi, I want to filter the html table data by using jquery,
can anyone try to resolve this please!!
Please try bellow JavaScript for to get content of each td
$("#filter").keyup(function(){
var filter = $(this).val();
$("#poolTable > tr").each(function(e){
cells = this.cells;
for(i=0; i< cells.length; i++){
alert(cells[i].innerHTML);
}
});
})
function filter(){
var text = $('#search').val();
$('#poolTable tr').show();
if (text != "") {
$('#poolTable tr td.number').each(function() {
if ($(this).text().indexOf(text) >= 0) {
$(this).parent().show();
return true;
} else {
$(this).parent().hide();
}
});
This works. Here number is the class name of td. It only filters the single column.
You can try this
https://sunnywalker.github.io/jQuery.FilterTable/
It is a jQuery plugin that will allow you to filter your table.