So I'm trying to create a table, where the table rows being divs that I've constructed from data that I get from my database.
I've seem to run into a issue.. I got this piece of javascript that starts running as soon as the page is ready, and it runs over and over again each 10 seconds. The purpose of this script is to update the partial view using ajax so that I don't have to refresh the browser to see changes in the table.
<script type="text/javascript">
$(document).ready(function () {
setInterval(CheckAvailability, 10000);
setTimeout
});
function CheckAvailability() {
$.ajax({
type: "POST",
url: "/Dashboard/CheckChange",
contentType: "application/json; charset=utf-8",
dataType: "json",
mimeType: "text/html",
success: function (response) {
if (response) {
$('#itemsss').load("/Dashboard/ReturnItems");
console.log("Updated!");
}
else {
console.log("Failed!");
}
}
});
};
</script>
This returns true every single time because it's something I've set explicitly.
It does load(); the content that this action returns though.
public IActionResult ReturnItems()
{
Items = new List<EbayProduct>();
using (var ctx = new UserContext())
{
Items = ctx.Users.Include(x => x.Items).Where(x => x.Username == "Admin").FirstOrDefault().Items;
}
return PartialView("_Item", Items);
//return null;
}
This is where I load the PartialView
<div id="itemsss">
<table id="foo-filtering" class="table table-bordered table-hover toggle-circle" data-page-size="7">
<thead>
</thead>
<tr>
<td>
<partial name="_Item" />
</td>
</tr>
<tfoot>
<tr>
<td colspan="5">
<div class="ft-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
And this is what the actual PartialView looks like
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<div class="container-1">
<div class="box-img">
<img src="#item.ProductImage" />
</div>
<div class="body">
<h3>#item.ItemName</h3>
<p>#item.SubTitle</p>
</div>
<div class="box-button">
<p>#item.SKU</p>
</div>
<div class="box-button">
<p class="mt-3 mr-2">$#item.Price</p>
<button class="btn btn-primary">Export</button>
</div>
</div>
</td>
</tr>
}
</tbody>
And here is where the issue occurs.. When I first load the page, it all works fine, it looks great and it works perfectly, but as soon as it does the first refresh.. Or .load();.. It suddenly stops working correctly, and by that I mean that it doesn't load any <tr> elements.
This is what the DOM looks like when I first load the page and it hasn't refreshed yet, each td contains the div with the class container-1 so it works just fine
And here is what it looks like after the first refresh and every single refresh after that
The jQuery call $('#itemsss').load("/Dashboard/ReturnItems") replaces existing content of the container with new elements - jQuery documentation states it as
.load() sets the HTML contents of the matched elements to the returned data.
Replacing the innerHTML of #itemsss wipes out the table element. Because <tbody>, <tr> and <td> tags are invalid outside a table, the parser ignores them, leaving #itemsss containing <div> elements only, as shown in the second picture.
If successful AJAX calls are intended to update the whole table the server could send complete HTML for the table, which could then be used to replace the content of #itemss, as shown in the post. Since picture 1 shows multiple tbody elements I assume this is not the case.
I tried appending tbody html to the table under different conditions: with or without a header and with or without existing table sections. Warning I am not a jQuery programmer - if useful, integrate and modify as best suited:
"use strict";
function appendTableBody( bodyHTML) {
let previous = $("#foo-filtering > tbody").last();
if( !previous.length) {
previous = $("#foo-table > thead").last();
}
if( previous.length) {
previous.after( bodyHTML);
}
else {
$("#foo-filtering").prepend( bodyHTML)
}
}
appendTableBody("<tbody><tr><td>appended section<\/td><\/tr><\/tbody>", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- body-html -->
<table id="foo-filtering">
<thead>
<tr><th>Table Header</th></tr>
</thead>
<tbody>
<tr><td>Table section 1</td></tr>
</tbody>
<tbody>
<tr><td>Table section 2</td></tr>
</tbody>
<tfoot>
<tr><th>table footer</th></tr>
</tfoot>
</table>
I didn't try to replace an existing tbody element, but assume it would involve selecting the element and calling the .html() method.
Related
I have a table in a razor page in which I'm looping through an IENumenrable collection (vwAssignedTaskProgress) and adding rows based on conditions. One or more of the contains 'recent' to indicate it is a row that has been recently added. I want to briefly highlight these rows to indicate they are new rows.
My problem is twofold. I'm using jquery (although I'm happy with any solution) and I can't get the jquery selector to fire on rows generated inside my loop. It works fine on content outside my # block of code.
And secondly, I can't seem to get .effect to work in Jquery (trying outside the # block). Research tells me that it's part of jquery UI which is both incorporated into jquery and deprecated.
Using jquery 3.5.1
<table class="table text-center" id="tblTasks4">
<tbody>
#foreach (var tsk in Model.vwAssignedTaskProgress){
#if ((#tsk._ChildUserId == #student.ChildUserId) && (#tsk.stStatus < 2))
{
<tr >
<th scope="row">
#tsk.Description
</th>
#if(#tsk.Created > DateTime.Now.AddMinutes(-1))
{
<td >
recent
</td>
}
</tr>
}
}
</tbody>
</table>
script block, within a form and body tag.
<script>
$('#tblTasks4 td').filter(
function(t){
if($(this).text() =="recent") {
$(this).closest('tr').effect("highlight", {}, 3000);
return;
}
});
</script>
First of all jQuery UI is not included in jQuery. You have it add it to your project separately.
Then I would add a recent class to the recent tds and hightlight them using:
$('.recent').parent().effect("highlight", {}, 3000);
Example:
<table class="table text-center" id="tblTasks4">
<tbody>
#foreach (var tsk in Model.vwAssignedTaskProgress)
{
#if ((#tsk._ChildUserId == #student.ChildUserId) && (#tsk.stStatus < 2))
{
<tr>
<th scope="row">
#tsk.Description
</th>
#if (#tsk.Created > DateTime.Now.AddMinutes(-1))
{
<td class="recent">
recent
</td>
}
</tr>
}
}
</tbody>
</table>
#section Scripts {
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
<script>
$('.recent').parent().effect("highlight", {}, 3000);
</script>
}
I am trying to do a drop-down table row beneath another one in a semi auto-generated table. I searched for a bit and learned that you could not animate table elements directly. I tried wrapping my table in a div and the animation worked.
My problem now is that I don't really know how to proceed to make my table with that div while looping on a specific part. It just messes up the table, some way or another.
<body>
<table>
<tbody>
<tr>
// HEAD OF TABLE //
</tr>
{{FOREACH}}
<tr>
// ALWAYS VISIBLE TR //
</tr>
<tr class="hidden hideable{{$i.id}}">
//CONTENTS//
</tr>
{{/FOREACH}}
</tbody>
</table>
$(document).ready(function() {
$(".btn").click(function(e){
e.preventDefault();
var tar = $('.hideable'+$(this).attr('attrib_target'));
tar.slideToggle('slow');
// tar.toggle();
});
});
Where should I open and close the div to have something functional?
EDIT: What I need is basically:
Table header (fixed)
Table Row with basic information (fixed)
Table Row hidden with more info (togglable)
The problem I have is the loop because I need to wrap the hidden table row inside a div AND a table (otherwise, the div is just ejected from the table because of their property). the loop keeps messing with my different attemps at doing it right to be able to animate the hidden part.
Thanks.
Any part of table elements, be it <tr> or <tbody> do not hide the overflowing content if the set height is less than the actual height of the contents. That's why the animations don't work with table elements. I would advise to wrapping your content inside a <div> and using slideToggle to animate.
Please check the code below:
$(document).ready(function() {
$(".btn").click(function(e) {
e.preventDefault();
var tar = $('.hideable' + $(this).attr('data-target'));
tar.slideToggle('slow');
// tar.toggle();
});
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
// HEAD OF TABLE //
</th>
</tr>
</thead>
<tbody>
<!-- {{FOREACH}} -->
<!-- FOREACH ITERATION 1 -->
<tr>
<td>
// ALWAYS VISIBLE TR //
<button type="button" class="btn" data-target="1">Show</button>
</td>
</tr>
<tr>
<td>
<div class="hidden hideable1">
//CONTENTS//
</div>
</td>
</tr>
<!-- END: FOREACH ITERATION 1 -->
<!-- FOREACH ITERATION 2 -->
<tr>
<td>
// ALWAYS VISIBLE TR //
<button type="button" class="btn" data-target="2">Show</button>
</td>
</tr>
<tr class="">
<td>
<div class="hidden hideable2">
//CONTENTS//
</div>
</td>
</tr>
<!-- END: FOREACH ITERATION 2 -->
<!-- {{/FOREACH}} -->
</tbody>
</table>
I've got a modal box that pops up popups when the plus icon is clicked in a table. After the page is loaded five rows are displayed in the table and clicking the plus sign opens the modal box. (Works perfectly).
But now we are changing the content of the table by an AJAX call. Once the TR's are replaced by new ones, the plus signs aren't working any more.
I'm aware of the fact that the event-handler
Table:
<table class="table table-hover" id="carsTable">
<thead>
<tr>
<th>Car Title</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr id="car-1836">
<td>ferrari f50</td>
<td><i class="glyph-icon icon-plus-circle">+</i></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Product Title</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
The Jquery Part that handles the AJAX (and works, replaced the table according to the JSON respons).
$.post("../../../scripts/getCars.php", {s: carSearch}, function (data) {
$("tr[id='carLoader']").remove();
$.each(data, function (index) {
if ($('#selectedCar-' + data[index].externalProductId + '').length == 0) {
$('#carsTable')
.append('<tr id="car-'+ data[index].id+'"><td>' + data[index].title + '</td><td><i class="glyph-icon icon-plus-circle"></i></td></tr>');
}
});
}, "json");
Now the event Handler, works after document is ready, but stops working once the AJAX call has replaced the data.
$('#carsTable').on('click', '.black-modal-80', function () {
console.log('Click detected; modal will be displayed');
});
What's wrong with the binding?
When you append something to the window, the element doesn't exist until you run the jQuery. That means the element the click event points to doesn't exist when the click event is defined. So you can use the body as a selector like this.
$('body').on('click', '.black-modal-80', function () {
console.log('Click detected; modal will be displayed');
});
Hope this helped!
I have created two tables on my page. I want that when a user clicks on a table row, the data of that row is copied to another table.
<div class="processor">
<table id="proctable">
<tr class="header">
<th>Description</th>
<th>Price</th>
</tr>
<tr class="hover">
<td><span id="4770K">Intel Core i7 4770K 4TH GEN. 3.5GHZ 8MB CACHE MAX TURBO FREQUENCY 3.9GHZ</span></td>
<td>$320</td>
</tr>
<tr class="hover">
<td><span id="4771">Intel Core i7 4771 4TH GEN. 3.5GHZ 8MB CACHE MAX TURBO FREQUENCY 3.9GHZ</span></td>
<td>$290</td>
</tr>
<tr class="hover">
<td><span id="4770">Intel Core i7 4770 4TH GEN. 3.4GHZ 8MB CACHE MAX TURBO FREQUENCY 3.9GHZ</span></td>
<td>$280</td>
</tr>
<tr class="hover">
<td><span id="4771">Intel Core i5 4670K 4TH GEN. 3.4GHZ 6MB CACHE MAX TURBO FREQUENCY 3.8GHZ</span></td>
<td>$240</td>
</tr>
</table>
<div id="aside">
<table id="comptable">
<tr class="header">
<th>Product</th>
<th>Price</th>
</tr>
</table>
</div>
I have searched for any help I may find but could not get any specific answer.
Here is the link to the code on jsfiddle
http://jsfiddle.net/jibranjb/LzgNd/#&togetherjs=fcgCI5QRn8
I am fairly new to Javascript and jQuery so please consider that.
Not sure what you wanted exactly. But if you want to store the data you can store it using arrays. ( you can use any data structure, I am using them as they are simple)
Check the below code, I am using items array, to store the selected row. On clicking the Add to List button, the selected tr will be added to the array and it will be display in the respective table.
var items = [];
$(".addBtn").on("click", function() {
var newTr = $(this).closest("tr").clone();
items.push(newTr);
newTr.appendTo( $("#comptable") );
});
I have added the Add to List button, the updated html markup would be;
<td>
<input class="addBtn" type="button" value="Add to List">
</td>
Updated Fiddle Demo
add this script ( using Jquery)
$('#proctable tr.hover').unbind('click').click(function(){
$(this).clone().appendTo('#comptable');
return false;
})
http://jsfiddle.net/4qFgX/3/
I will suggest this:
$('#proctable tr.hover').click(function () {
var x = $(this)[0].outerHTML
$('#comptable').append(x);
});
Something like this ?
$(function() { // when dom is ready
$('#proctable tr.hover a').on('click', function(e) { // when you click on a link
var row = $(this).parents('tr').eq(0); // you get the direct parent of the current clicked element
$('#comptable').append(row); // you append this parent row in the other table
e.preventDefault(); // your prevent the default link action
});
});
http://jsfiddle.net/LzgNd/1/
I have a dropdown and when i choose an option it will load an appropriate table from the server and display it using jQuery, along with the table i also send a tiny jQuery script like,
<table id="dataFileTableHeader">
<thead>
<tr>
<th><strong>Export Type</strong></th>
<th><strong>Company</strong></th>
<th><strong>File Name</strong></th>
<th><strong>Date Modified</strong></th>
<th><strong>Total Records</strong></th>
<th><strong>File Size</strong></th>
<th><strong>Owner</strong></th>
</tr>
</thead>
</table>
<script>
$(function(){
var i = 0;
$('#dataFileTableHeader th').each(function(index) {
alert("hello " + (++i));
});
});
</script>
when this is loaded i am expecting alert to show up 7 times but nothing happens am i missing something?
DEMO
You have a space after your id
(<table id="dataFileTableHeader "> instead of <table id="dataFileTableHeader">
So this one is correct
<table id="dataFileTableHeader">
<thead>
<tr>
<th><strong>Export Type</strong></th>
<th><strong>Company</strong></th>
<th><strong>File Name</strong></th>
<th><strong>Date Modified</strong></th>
<th><strong>Total Records</strong></th>
<th><strong>File Size</strong></th>
<th><strong>Owner</strong></th>
</tr>
</thead>
</table>
<script>
$(function(){
var i = 0;
$('#dataFileTableHeader th').each(function(index) {
alert("hello " + (++i));
});
});
</script>
You can also just use the index in the alert to grab the number. You don't need "i"
If your content is dynamically loaded, the script is probably being run before the content gets there. Have this code after your "success" parameters in your ajax function (hard to say without seeing that code). Make sense?