Hide table rows with expired content - javascript

Say I use a table to display scheduled content, and I want rows to disappear after their date has passed.
Row 1 has Table title
Row 2 has Date A
Row 3 has Scheduled content A1
Row 4 has Scheduled content A2
Row 5 has Date B
Row 6 has Scheduled content B1
Row 7 has Scheduled content B2
Row 5 has Date C
Row 6 has Scheduled content C1
Row 7 has Scheduled content C2
etc.
After Date A has passed, I want rows 2-4 to disappear/be hidden.
I do this website on a volunteer basis, and there is nobody else available to help. I delete the expired rows on a daily basis, but I'm going on vacation and will be unplugged for two weeks.
I don't have any example code, I'm a rookie. If you mean my html code, it's just a simple table.
Sorry for not responding sooner, Jakub (https://stackoverflow.com/users/158014/jakub). Spent 12+ hours in hospital ER with my daughter right after my last edit yesterday. I will come back and fix the post to conform to Stackoverflow standards ASAP.

You can use jQuery library to hide certain parts of the website on certain dates. It should help on this case while you are off.
First load jQuery, adding to the head section of your site:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then your table in the body section:
Then, near the end of the body tag, you create a rule for hiding content based on a date:
<script type="text/javascript">
var now = new Date();
var futuretime1 = new Date("April 10, 2013");
if(now > futuretime1)
{
$("#div").hide();
}
</script>
This will hide #div when date passes "futuretime1". You can also use jQuery selectors for selecting the appropriate table row.
Hope this helps.

Related

Google Sheets - insert row increments formula cell

I've created a results page for a board game we play. We enter the results on the Last Game sheet. I then click Save Results which inserts rows and copies the result data accordingly into three sheets, Game Totals, Player 1 and Player 2.
The Last Game sheet has number of wins, averages and such which all use formulas, e.g.
=COUNTIF('Game Totals'!D2:D164, "SUSAN")
D1 is a header row. The latest results are copied into the inserted row, D2.
My problem is while I want D164 to increment to D165 in the formula above I want D2 to remain as D2, but it increments to D3.
I read up a little on using $D$2 but that doesn't stop it from incrementing to D3.
Any help most gratefully appreciated
Cheers
Johnny.
Assuming that cell 'Game Totals'!D1 does not equal Susan and does not move when you insert rows, you can start the range reference from that cell:
=countif('Game Totals'!D1:D164, "SUSAN")

Date Changing Interval

Not much coding experience, but hoping the community can help. I'd like to have a simple HTML headline read the following:
"Meals are available for pickup on Sunday,February 23 and Monday, February 24."
The crux is I need this to change every Thursday at 1 p.m. so that the dates change to the dates of the FOLLOWING Sunday & Monday.
--
We are a meal prep service with new menus every week. Order cut off is every Thursday # 1 p.m. I've automated the site's meal menu to rotate at this time. With this dynamic headline, I hope to avoid customer confusion so that if someone orders on Thursday # 2 p.m., they know their meals aren't going to be available until the following weekend.
Hope that makes sense. Thanks in advance for the help!
You can do this quite easily using the php time functions
Example:
<?php
$monday_date = strtotime('next monday');
$sunday_date = strtotime('next sunday');
?>
<!-- Some content -->
<div class="header">Meals are available for pickup on Sunday,February $sunday_date and Monday, February $monday_date</div>
<!-- Some more content -->
The above example wont rotate at 1pm but will show the date of the closest sunday/monday. I leave it as an exercise to the reader to work out how to adapt it for timings (hint: the time library can detect the current time)

Qualtrics display logic interferes with javascript .hide()

I have a side-by-side question in Qualtrics with 30 rows. Each of the first 20 rows has display logic such that they only appear when something is entered in text boxes in prior questions. Each of the last 10 rows has display logic such that at least 10 rows show up in the entire question, i.e. row 21 only shows up if none of the first 20 are displayed, row 22 shows up if only one of the first 20 are displayed... row 30 shows up if 9 of the first rows are displayed, and none of them appear if at least 10 of the first rows are displayed.
The first column of the question is a checkbox, and I'm using the following Javascript to hide the checkboxes for the last 10 rows:
Qualtrics.SurveyEngine.addOnload(function()
{
var qid = this.questionId;
var p = $(qid);
p.down('label[for="QR~'+qid+'#1~21~1"]').hide();
p.down('label[for="QR~'+qid+'#1~22~1"]').hide();
p.down('label[for="QR~'+qid+'#1~23~1"]').hide();
p.down('label[for="QR~'+qid+'#1~24~1"]').hide();
p.down('label[for="QR~'+qid+'#1~25~1"]').hide();
p.down('label[for="QR~'+qid+'#1~26~1"]').hide();
p.down('label[for="QR~'+qid+'#1~27~1"]').hide();
p.down('label[for="QR~'+qid+'#1~28~1"]').hide();
p.down('label[for="QR~'+qid+'#1~29~1"]').hide();
p.down('label[for="QR~'+qid+'#1~30~1"]').hide();
});
It works fine if none of the previous rows are displayed:
But bombs if even one of the previous rows is displayed:
I poked around with Inspect Element on the preview to see if the tags changed somehow, but couldn't find anything unexpected as far as changing IDs. When checking the element for the checkbox on row 23 when none of the first 20 rows appear:
<input id="QR~QID4#1~23~1" name="QR~QID4#1~23~1" value="Selected"
data-runtime-checked="runtime.Children.1.Choices.23.Answers.1.Selected"
aria-labelledby="question1QID4 question1QID4-answer1QID4 choice23QID4"
class="QWatchTimer" type="checkbox">
<label for="QR~QID4#1~23~1" class="q-checkbox" data-runtime-class
-q-checked="runtime.Children.1.Choices.23.Answers.1.Selected"
style="display: none;"></label>
As expected, the label code is grayed out. When one of the first 20 rows appears, it's much the same, but style="display: none;" does not appear at the end:
<input id="QR~QID4#1~23~1" name="QR~QID4#1~23~1" value="Selected"
data-runtime-checked="runtime.Children.1.Choices.23.Answers.1.Selected"
aria-labelledby="question1QID4 question1QID4-answer1QID4 choice23QID4"
class="QWatchTimer" type="checkbox">
<label for="QR~QID4#1~23~1" class="q-checkbox" data-runtime-class
-q-checked="runtime.Children.1.Choices.23.Answers.1.Selected"></label>
I'm at a loss for how activation of display logic would interfere with the Javascript.
After a few hours of percolating, I remembered that if a display logic hides an item with Javascript, that script won't run. I hadn't realized that it's not just on a line-by line basis - looks like if one element controlled by one line of code gets hidden, the whole block of code gets invalidated.
I was able to solve it with a loop that dynamically considered only the rows that would be displayed:
Qualtrics.SurveyEngine.addOnload(function()
{
//Remove checkboxes for last ten options
var qid = this.questionId;
var p = $(qid);
var count = Qualtrics.SurveyEngine.getEmbeddedData('count');
var min = 21+count;
for (var i = min; i < 31; i++) {
p.down('label[for="QR~'+qid+'#1~'+i+'~1"]').hide();
}
});
At least in my case, the count variable was used to determine how many of the last 10 rows to display. Once I built that into the parameters for the loop, nothing would be invalidated by the display logic. (Check here for the process on that if interested.)
Lesson learned: I should've been using a loop to begin with - modifying the parameters is an easy step after that.

timeago.js with datatable and PHP

I am displaying data of dates in my datatable using timeago.js along with the use of PHP. The problem is some data specifically dates in my datatables are missing when I click on the next page of my datatable. I don't know how to fix this, please help.
This is my Datatable-Table on its first page
Date_Joined Username
8 minutes ago john
10 minutes ago jake
20 minutes ago jay
And this is the next page of my datatable showing no date
Date_Joined Username
may
june
april
and if i click on my datatable to view 10, 25, 50, 100 pages
Date_Joined Username
8 minutes ago john
10 minutes ago jake
20 minutes ago jay
may
june
april
Please I really need your help.
Add this code inside your tag. It should work when you click the next page.
inside $("") add the table id and add _paginate next to it
$("#simpledatatable_paginate").click(function(){
jQuery("abbr.timeago").timeago();
});
While the above code works only for the pagination. This code here will allow you to solve your problem. Replace the above code with this code:
$("#simpledatatable").on('draw.dt', function(){
jQuery("abbr.timeago").timeago();
});
add this code before you iniatilize your datatable.

get previous or next cell value of table in jquery [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
How i get appointment time (From time,To time) in jquery
see jsfiddle
i am selecting time slot by dragging on time slot cell.
after selecting time slot i enter name in textbox then patient appointment is allotted for that time slot.
i have to insert patient name like(abc),start time like(8:00AM 0) and end time like(8:00AM 30) in database.
how can i get these three values in jquery.
In my opinion, there is a lot of work to make the timetable look great and give a good user experience on various browsers.
Maybe you could use the jQuery full calendar ( http://arshaw.com/fullcalendar/) and customize it to fit your needs.
Here is a demo for creating time events on a single day:
http://arshaw.com/js/fullcalendar-1.5.3/demos/selectable.html
With some slight html modifications such as adding a class to the time cells and some data attributes, you can take advantage of jQuery.data() and use classes to simplify locating cells
<td class="csstablelisttd time" data-hour="9" data-minute="45"> 45 </td>
When a "slot" has been booked, add a class to it that identifies it is booked. Storing the name of the patient to the time cell as data allows you to then do something like:
$('button').click(function() {
var msg = 'No Bookings',
$booked = $('.booked');
if ($booked.length) {
msg = [];
$booked.each(function() {
var data = $(this).data()
msg.push(data.hour + ':' + data.minute + ' - ' + data.patient)
})
msg = msg.join('\n');
}
alert(msg)
})
Here is a much simplifed, but working version using click event on the time cell. Your mouse selection method didn;t seem to work and a click is more user friendly. This won't complete your whole app, but should give you some ideas going forward
http://jsfiddle.net/vrW2n/27/
Use the new HTML5 time element (documentation). Then it is easy to fetch the time with jQuery.
Here is a complete example on how to fetch the first selected cell, and the last selected cell. Do the selection after the user has clicked the update button.
<!doctype html>
<html>
<head>
<script
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js">
</script>
<script
src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js">
</script>
<script>
$(function () {
var start = $("td.csstdhighlight:first > time").attr("datetime");
var end = $("td.csstdhighlight:last > time").attr("datetime");
});
</script>
</head>
<body>
<table border="1">
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:00:00">00</time>
</td></tr>
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:15:00">15</time>
</td></tr>
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:30:00">30</time>
</td></tr>
<tr><td><time datetime="2000-01-01 08:45:00">45</time></td></tr>
</table>
</body>
</html>
Note that if you want to support Internet Explorer 8 or below you need to make sure that IE treats the new HTML5 time element as supposed to. The easiest option is to include the Modernizr library as in the sample above, or if you want the details you can read the blog post How to get HTML5 working in IE and Firefox 2.

Categories

Resources