How to Cancel one job as per month in Javascript - javascript

How to Cancel a one job as per month in javascript.when i click on cancel button i want to get the popup also mention with message "you cancel 1 job as per month and yes or no" please help me.. i am very stuck in that code.

I'm not sure if you are using a database or not, but to get things going you need to attach a change or click event on the checkbox. An example of a change event is below:
document.addEventListener('DOMContentLoaded', function() {
let checkboxEl = document.getElementsByName("theJob")[0]; // a lot of different ways to select the dom element
let spanEl = document.querySelector(".js_strikeThrough");
let checkAttr = checkboxEl.getAttribute('data-cancel');
checkboxEl.addEventListener("change", function(event) {
if(checkAttr) {
checkAttr = !checkAttr;
spanEl.classList.add("strikeThrough");
} else {
spanEl.classList.remove("strikeThrough");
checkAttr = !checkAttr;
}
}, false);
}, false);
.strikeThrough{
text-decoration: line-through;
}
<form>
<input type="checkbox" data-cancel="false" name="theJob" value="Clean"><span class="js_strikeThrough">Wash Car</span>
</form>
Where the checkAttr value is being changed in the above snippet, is where you would need to call your database methods to update the value in the database and add popup messages. Not sure what db you are using.

Related

jQuery: A button that checks all checkboxes in its own DIV and unchecks all the others

I have a dynamically generated form with groups of checkboxes representing categories of companies. These eventually get plotted on a dynamic chart (not shown here). Each group of companies is in a div, and each div has a button called Only that should check all the checkboxes in its own category (div) and uncheck all the other checkboxes on the page.
Here's a Fiddle with all the code: https://jsfiddle.net/c2kn78a9/
The Only buttons have this code in them:
// Uncheck all checkboxes outside this div
$(this).closest("div").not(this).find('input[type=checkbox]').prop('checked', false).change();
// Check all checkboxes in this div
$(this).closest("div").find('input[type=checkbox]').prop('checked', true).change();
But it's not working. Any idea how to fix this?
Here's the code for the entire page.
<!-- This button is different than the other buttons -->
<button class="button-text" id="customize-button">Open User Settings</button>
<!-- Placeholder for dynamic form -->
<div id="company-selection-form"></div>
<script type="text/javascript">
function toMachineString(humanString) {
var machineString = humanString.replace(/\s+/g, '-').toLowerCase();
machineString = machineString.replace('&','');
return machineString;
}
// Setup the form
var categories = new Map([
['Tech Giants',['Alphabet','Amazon','Apple','Facebook','Microsoft']],
['Handset Manufacturers',['Apple','Samsung','Motorola','Sony']],
['Semiconductors', ['AMD','Intel','Nvidia']]
// ... more ...
]);
// Build company selection form inputs
let companySelectionHTML = '';
for (let category of categories) {
categoryName = category[0];
categoryList = category[1];
// Setup a div to differentiate each category of companies.
// Will be used for turning on/off categories en masse
companySelectionHTML += `<div id="${toMachineString(categoryName)}">\n`;
// Category heading
companySelectionHTML += `<h4>${categoryName}</h4>\n`;
// Only button
companySelectionHTML += `<button class="only" id="btn-only-${toMachineString(categoryName)}">Only</button>\n`;
categoryList.forEach(companyName => {
companySelectionHTML += `
<label class="checkbox-label">
<input id="x-${toMachineString(companyName)}" class="checkbox" type="checkbox" name="company" value="${companyName}" checked>
<label for="x-${toMachineString(companyName)}">${companyName}</label>
</label>`;
});
companySelectionHTML += '</div>\n</div>\n</div>\n';
}
// Append to DOM
const companySelectionId = document.getElementById('company-selection-form');
companySelectionId.insertAdjacentHTML('beforeend', companySelectionHTML);
// Make the ONLY buttons check all the checkboxes in their div and uncheck everything else
$(document).ready(function() {
$(document).on("click", ".only", function() {
// Uncheck all checkboxes outside this div
$(this).closest("div").not(this).find('input[type=checkbox]').prop('checked', false).change();
// Check all checkboxes in this div
$(this).closest("div").find('input[type=checkbox]').prop('checked', true).change();
});
});
</script>
Thanks!
Your .not(this) is trying to filter out the button element from the single closest div. You need to get all div's on the page and remove the closest div to "this" button.
From your JSFiddle like this:
var temp = $(this).closest("div");
$("div").not(temp).find('input[type=checkbox]').prop('checked', false).change();
OR (to avoid a new variable)
$("div").not($(this).closest("div")).find('input[type=checkbox]').prop('checked', false).change();
Matt G's solution works fine, it deselects all the checkboxes on the page.
I'd suggest to further refine it by first narrowing the selection to only your #company-selection-form
`$("#company-selection-form")
.find("div")
.not($(this)
.closest("div"))
.find('input[type=checkbox]')
.prop('checked', false)
.change();`
Nevertheless, allow me to suggest that you're maybe wasting your time learning this stuff. This programming paradigm is too problematic and anachronistic. It's slow, gets out of hand very quickly, and never brings anything but suffering. Even the slightest update to the UI can force you to revisit (after months sometimes), debug, and rewrite your code. It's never testable, no one would even bother to test this rigorously.
I mean, if your employer holds a gun to your head every day and you have to choose either to do it this way or die, you'd soon choose to die over this ordeal.

How to compare two full year dates

The idea in my example is to allow user to select only the year in to input already selected in from input (have the same year in from and to date input).
The issue here is that it works fine when we use the date picker but, when we hit manually the date into 'to' input, it compare juste the first number of the year ***8/04/14, I want to wait until the user finish the full date example 2018/04/14 then I alert OK. I the actual code, if I take the example : from = 2018/04/14, to = 2018/05/29, So it compare 2018/04/14 with from = 8/05/29, it alert ok in the 8 of 2018 and not in the complete year.
$("#from").on("change", function() {
year();
var from = $("#from").val();
if (from) {
var maxYear = new Date(from).getFullYear();
$("#to").attr("max", maxYear+"-12-31");
$("#to").attr("min", maxYear+"-01-01");
}
});
$("#to").on("change", function(){
year();
});
function year() {
var from = $("#from").val();
var to = $("#to").val();
if(from && to && new Date(from).getFullYear() != new Date(to).getFullYear()) {
$("#to").val("");
alert("OK");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="from">from</div>
<input id="from" type="date">
<div class="to">to</div>
<input id="to" type="date">
Try using
$("#to").on("blur", function(){
year();
});
That should active the check only after the input loses focus.
Change event is triggered when input change, if you want catch user event, or key event you should try to declare all "change code" as stand alone functions and add another eventListener.
Maybe with blur or key down will work as you want but lot of event exist : https://www.w3schools.com/jsref/dom_obj_event.asp

Execute function on second click in jquery

I have a calendar button that on click opens up a date picker and places the date into an input text box. What I want to happen, is have a second text box auto-fill with the date 30 days into the future. What I am having trouble with is getting this to work with jquery.
HTML:
<tr>
<td align = "center">Entry Date From: <input id="ENTRYDATEFROM" name="ENTRYDATEFROM" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc"></td>
<td align = "center">Entry Date To: <input id="ENTRYDATETO" name="ENTRYDATETO" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc2"></td>
</tr>
JQUERY:
$(document).ready(function() {
$("#entrySrc").click(function(){
gAnytime.fPopCalendar(document.myform.ENTRYDATEFROM);
});
$("#entrySrc2").click(function(){
gAnytime.fPopCalendar(document.myform.ENTRYDATETO);
});
//Tried this but had no success
//$(document).on("change", "#entrySrc", populate);
});
function populate(){
var q = $("#ENTRYDATEFROM");
var dateTo = new Date(q.val());
var newDate = new Date(dateTo.setDate(dateTo.getDate() + 30));
var formatted = padNumber(newDate.getUTCMonth() + 1) + '-' + padNumber(newDate.getUTCDate()) + '-' + newDate.getUTCFullYear();
$("#ENTRYDATETO").val(formatted);
}
function padNumber(number) {
var string = '' + number;
string = string.length < 2 ? '0' + string : string;
return string;
}
This is what my GUI looks like before anything is clicked:
This is what happens when I click the #entrySrc calendar button located to the right of the input text box
I can then click on any date that I wish within that calendar box. This will populate the input text box to the left of it.
How can I execute my populate function on/against that second click located within the calendar box?
There may be a very simple solution to this: simply fire the populate() method when #entrySrc changes.
$(document).on("change", "#entrySrc", populate);
or one of these alternatives:
$("#entrySrc").on("change", populate);
$("#entrySrc").change(populate);
note you're passing populate, not populate().
Based on the very poor documentation here: http://calendarxp.net/tutorials/flat/tutorials/PluginsSDK.htm I would guess you need to do the following:
Open your plugins.js file, which is apparently where to hook into a load of global functions (this control is sooooooo old).
Put your code into the fOnChange template (which I gather will be a nearly empty function):
///////////// Calendar Onchange Handler ////////////////////////////
// It's triggered whenever the calendar gets changed to y(ear),m(onth),d(ay)
// d = 0 means the calendar is about to switch to the month of (y,m);
// d > 0 means a specific date [y,m,d] is about to be selected.
// e is a reference to the triggering event object
// Return a true value will cancel the change action.
// NOTE: DO NOT define this handler unless you really need to use it.
////////////////////////////////////////////////////////////////////
function fOnChange(y,m,d,e) {
.... put your code here ....
return false; // return true to cancel the change.
}
What you put in there should be something of practical use. I would suggest generating a custom event like this:
function fOnChange(y,m,d,e) {
var $e = $(e.target); // (or e.originalTarget or whatever you can find with a debugger!)
$e.trigger("calchange");
return false; // return true to cancel the change.
}
This will require that jQuery is included before their js file.
In your code, listen for it like this for all calendars:
$(document).on('calchange', populate);

JS expand onClick multiple events

Please check this page first : Solarking - About Us
Check first 2 boxes which has a READ MORE button. On clicking them, they expand a paragraph.
Now I want it to be like when I click on it, it should expand the text and change the button value to "CLOSE" from "READ MORE". And on again clicking on "CLOSE", it should change value to "READ MORE".
I searched for long time to see how to fire multiple events on onClick, but I saw that some said to use a ; in them, some said make a new function and put 2 functions in it.
Now I tried to make a new function with 2 functions inside it (one to expand the paragraph, other to change value of button, but I failed. (I am new to JS).
Help please. Thank you in advance!
Code I have on the page :
button code:
<p style="text-align: right;"><input id="button12" style="background-color: #eca200; color: #ffffff;" onclick="return toggleMe('para1')" type="button" value="Read more" /></p>
Script :
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
I think the easiest way to do this would be to set a boolean variable. In other words, let's say that it starts off with the dclaration at the beginning of the page.
var hasbeenclicked = false;
Then, after the first click
hasbeenclicked = true;
After a second click
hasbeenclicked = false;
When the function is called, it checks the variable and operates accordingly. The following is not real JS....
if hasbeenclicked = true {
do some stuff;
}
else {
do some other stuff;
}
That is a simple way to accomplish what you are trying to do.
Additional info:
Use two DIV tags with separate ID's. One for the paragraph and one for the "label". Use getelementbyID to alter each one appropriately.
I noticed you are using jQuery.
You could use a toggle method.
Alter the html link. Add a class of expander and use the data attribute to identify the paragraph id
<p style="text-align: right;">
<input id="button12" data-toggle="para1" class="expander" style="background-color: #eca200; color: #ffffff;" type="button" value="Read more" />
</p>
The JS
$(".expander").click(function() {
var self = $(this);
$("#" + self.data('toggle')).slideToggle(500, function () {
if ($("#" + self.data('toggle')).is(':visible')) { // paragraph is open
self.val("Close");
} else { // paragraph is closed
self.val("Read More");
}
});
});

Expand only one row in javascript code

hey guys having trouble figuring out how to make it so that i can make it only open one table at once, once you open another the other should close any help here?
function showRow(cctab){
if (document.getElementById(cctab)) {
document.getElementById(cctab).style.display = '';
}
}
function hideRow(row1){
if (document.getElementById(cctab)) {
document.getElementById(cctab).style.display = 'none';
}
}
function toggleRow(cctab){
if (document.getElementById(cctab)) {
if (document.getElementById(cctab).style.display == 'none') {
showRow(cctab)
} else {
hideRow(cctab)
}
}
}
Now I want to make it so that only one table "cctab" opens after I suggest the onClick="javascript:toggleRow(cctab);" anyhelp?
Well you could save a reference to the previously shown item and hide it when another is shown:
var currentTab;
function showRow(cctab){
if (document.getElementById(cctab))
document.getElementById(cctab).style.display = '';
if (currentTab && currentTab != cctab)
hideRow(currentTab);
currentTab = cctab;
}
Note that doing inline event handler attributes is so 1999, but assuming you're sticking with it for whatever reason you don't need the javascript: in onClick="javascript:toggleRow(cctab);". (Just say onClick="toggleRow(cctab);")
First you need to store the old row somewhere.
What you've got is a system where you're using <element onclick="..."> to pass the id of the current element into the controller that shows or hides the row.
But if you look at that, what you're missing is a way of telling what the last open row was.
So what your code will need is a central object, or variables which store the old element and the new element.
How you do this is up to you, but if you did something like this:
var table_rows = { current : null /* or set a default */, previous : null };
function rowController (cctab) {
var newRow = document.getElementById(cctab);
if (newRow === table_rows.current) { toggleRow(newRow); }
else {
table_rows.previous = table_rows.current;
table_rows.current = newRow;
showRow(table_rows.current);
hideRow(table_rows.previous);
}
}
Note:
This deals with elements directly, so you don't have to do getById in your functions;
that's handled one time, and then that element is passed around and saved and checked against.
It assumes that the click is happening on the row itself, and not on anything inside of the row;
that's a separate issue that your code has.
Unless it's obvious and easy to click on the row, and not the cells inside of the row, it's difficult to tell how you want users to be able to open and close rows.
What I mean is if only the table-row has an onclick, and somebody clicks on a table-column, then then onclick isn't going to fire.

Categories