We Keep Coding

Materialize Datepicker Only Update if Done button clicked

I am using the materializecss Datepicker (https://materializecss.com/pickers.html), and this seems like it should be really straightforward so I'm losing my mind a bit over it. Put simply, I'm trying to trigger an event only if the "Ok" button is clicked, but cannot identify that in the onClose() function provided. If I try to listen for the specific button click, I lose all that comes with the onClose() function (which nicely packages up all the info I need on that event).
Is there any way, with the onClose() function, that I can identify which button caused that onClose() to fire?
I'm admittedly a novice when it comes to javascript and jquery, so any help is appreciated.
HTML
<input type="text" class="datepicker" value="8/4/2018" job="533">
Javascript Code to initialize the datepicker
$(document).ready(function(){
$('.datepicker').datepicker({
"format": "m/d/yyyy",
onClose() {
// only do something if this was fired from the "Done" button
}
})
});
Datepicker modal created
<div class="modal datepicker-modal" id="modal-a5a43c91-2426-5565-c216-1d8ccd0cfc1d" tabindex="0">
<div class="modal-content datepicker-container">
<div class="datepicker-date-display">
<span class="year-text">
</span>
<span class="date-text">
</span>
</div>
<div class="datepicker-calendar-container">
<div class="datepicker-calendar">
</div>
<div class="datepicker-footer">
<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button">
</button>
<div class="confirmation-btns">
<button class="btn-flat datepicker-cancel waves-effect" type="button">
Cancel
</button>
<button class="btn-flat datepicker-done waves-effect" type="button">
Ok
</button>
</div>
</div>
</div>
</div>
</div>

This code below can help you get the right button you want to do some stuff with it. Add 2 listeners to the done and cancel buttons of that opened modal right in onOpen(), and remove listeners onClose().
This will work for you.
<script>
$(document).ready(function() {
function Cancel() {
if(!this.hasEvent) {
this.hasEvent = true;
console.log('Clicked on cancel btn:', this.cancelBtn);
}
}
function Done() {
if(!this.hasEvent) {
this.hasEvent = true;
console.log('Clicked on done btn:', this.doneBtn);
}
}
$('.datepicker').datepicker({
"format": "m/d/yyyy",
onOpen: function(e) {
var that = this;
that.hasEvent = false;
this.cancelBtn.addEventListener('click', Cancel.bind(that))
this.doneBtn.addEventListener('click', Done.bind(that))
},
onClose: function(e) {
var that = this;
this.cancelBtn.removeEventListener('click', Cancel.bind(that))
this.doneBtn.removeEventListener('click', Done.bind(that))
}
})
});
</script>

First you can initialize the Datepicker just by using vanillaJS, then if you check materialize.css file then you'll find the class name of Ok button, that is, .datepicker-done. You can attach addEventListener to this button and call any function you want.
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelector('.datepicker');
var instance = M.Datepicker.init(elems);
var doneBtn = document.querySelector('.datepicker-done');
doneBtn.addEventListener('click', callThis); //Attaching a 'click' event to done button
function callThis() {
console.log('Done Button clicked only!'); //Checking the done button click
console.log(elems.getAttribute('job')); //To get the job attribute value
}
});

All of the responses were extremely helpful in figuring this out, thank you to those who contributed!
I don't know if this is the most elegant solution, but it is working for me. I kept the jquery call to initialize all of the datepickers on the page, then added the event listeners with a forEach loop. To get the values I wanted, I had to do that crazy looking series of .parent() calls, but it consistently gets me the right information. Hopefully this helps someone dealing with the same issue in the future (or it can help someone else provide a more effective answer!).
$(document).ready(function(){
$('.datepicker').datepicker({
"format": "m/d/yyyy",
})
});
document.addEventListener('DOMContentLoaded', function () {
var doneBtn = document.querySelectorAll('.datepicker-done');
doneBtn.forEach(function(elem) {
elem.addEventListener('click', callThis)
});
});
function callThis() {
var update = $(this).parent().parent().parent().parent().parent().siblings('input');
// do the thing I want with that input value
};

Remove Div on link click

I am doing a code in which I want to delete a div when its inner link("Delete") is clicked. I know this question might be repeating and I have tried so many methods but not working. I dont know what's the problem.
Here is my HTML Rendering Code:
<div id="ViewRows">
<br>
<div class="ViewRow"> NOS: FA Comment: finance
<a class="deleteViewRow" href="#">Delete</a>
<br>
</div>
<div class="ViewRow">
NOS: TPA Comment: Assistance
<a class="deleteViewRow" href="#">Delete</a>
<br>
</div>
</div>
Here is my javascript Code for removal of that div.
$("a.deleteViewRow").live("click", function () {
$(this).parents("div.ViewRow:first").remove();
return false;
});
I also tried following javascript:
$("#ViewRows").on("click", "a.deleteViewRow", function () {
$(this).closest("div.ViewRow").andSelf().remove();
return false;
});
I have tried same code on another page. It is working but when I applied the same logic in another page. It's not working. I know you all are right but I dont know whats problem. In firebug it's not even going into the function.

This should work:
$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
// prevent browser from following link
e.preventDefault();
// ".andSelf()" can be skipped - once the parent div is removed, the link gets removed as well
$(this).closest("div.ViewRow").remove();
});

this simple yet efficient code works fine: http://jsfiddle.net/L2CsH/
$("#ViewRows").on("click", "a.deleteViewRow", function () {
$(this).parent().remove();
});

you need to prevent default action of link. event.preventDefault()
$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
e.preventDefault();
$(this).closest("div.ViewRow").remove(); //.andSelf() is not needed here.
//return false;
});
Demo : Remove Div JSFiddle

How to execute .click() code when previous click binding finishes

I am trying to use a Twitter Bootstrap button group with data-toggle="buttons-radio" in my site. Bootstrap markup as follows.
<div class="btn-group program-status" data-toggle="buttons-radio">
<button class="btn">All</button>
<button class="btn">Active</button>
<button class="btn">Planning</button>
<button class="btn">End of Life</button>
<button class="btn">Cancelled</button>
</div>
I need to redirect to the same page with query depending on the pressed button. I tried to use following jQuery code to achieve this.
<script>
var sParamStr = '';
function addToParamStr(str) {
sParamStr += str;
}
function redirectToUpdatedLocation() {
$('.program-status > .btn.active').each(function () {
addToParamStr( '?status=' + $(this).text());
});
console.log(sParamStr);
window.location.href = "program" + sParamStr;
}
$document.ready(function () {
$('.program-status > .btn').on('click', function (e) {
redirectToUpdatedLocation();
});
});
</script>
But the browser always redirects to {site}/program without the query string. By commenting out window.location.href = "program" + sParamStr; line, I managed to observe that second click onwards, sParamStr getting appended properly.
It seems that, my code tries to read the text of the pressed button before, .button('toggle') method form bootstrap.js finished. Code worked as intended when I changed function as follows.
$document.ready(function () {
$( '.program-status > .btn').on('click', function (e) {
$(this).addClass('active');
redirectToUpdatedLocation();
});
});
While this method works for me right now, I would like to know the proper way to achieve this. i.e How to execute my code after previous click binding finishes?
UPDATE:
I found this link in the Twitter Bootstrap forum. Seems it is a known issue.
https://github.com/twitter/bootstrap/issues/2380

I'm not sure what Bootstrap's .toggle is doing exactly, but it seems like it does some sort of animation that completes with the setting of the active class. You can try enqueing your code instead:
$( '.program-status > .btn').on('click', function (e){
$(this).queue(function (next) {
redirectToUpdatedLocation();
next();
});
});
For example, click the div as it is being toggled: http://jsfiddle.net/9HwYy/
It also seems a bit silly to me to update every href instead of just the one you clicked on since you are changing the window location anyway.

try
$('.program-status > .btn.active').each(function(i,v){
v = $(v);
addToParamStr( '?status=' + v.text());
});
since im not sure "this" is working in your case.

ReferenceError in js console -SCRIPT5009: 'channel_click' is undefined

I'm getting a "SCRIPT5009: 'channel_click' is undefined" error in IE9 within the js console. The code works in chrome & firefox but it suddenly stopped while clicking the link to initiate the js sequences in IE9.
I have been trying to figure this out with no success but what I have done was timed a series of events to occur which:
1) onclick - toggle div to hide
2) wait 1500
3) open print command
- User closes the window to return to page
4) wait 3500 toggle div to show again
The reason why I do this is I don't want the print preview to pick up these series of divs when the user decides to print the page.
Javacript:
<script>
//WAITS UNTIL EXCESS IS HIDDEN THEN FIRES PRINT COMMAND
function channel_click(){
// anon wrapper function, 2 second delay
setTimeout( function () {
window.print();return false;
} , 1500 );
}
</script>
<script>
//HIDES EXCESS IN PREP FOR FIRING PRINT COMMAND PREVIOUS FUNCTION EXECUTES IN BETWEEN FOLLOWING FUNCTIONS
$(".hideshow").click(function () {
$("#header,#footer").toggle("slow");
setTimeout( function () {
$("#header,#footer").toggle("slow");
} , 3500 );
$('.modal-backdrop').hide();
});
</script>
HTML:
Print Preview
<div id="header">
<div class="pull-left">
<h1>Edt Mode</h1>
<h6 style="padding-bottom: 30px;">Some informational text here</h6>
</div>
<div>
<div class="pull-left">
<h1>PRINT ME!</h1>
<h6 style="padding-bottom: 30px;">PRINT ME - PRINT ME - PRINT ME</h6>
</div>
<div id="footer">
<div class="pull-left">
<h1>Edt Mode</h1>
<h6 style="padding-bottom: 30px;">Some informational text here</h6>
</div>
<div class="model-backdrop">wow this is some more text</div>

Do you load you javascript file before you try to use it in the html?
If you do that that's not the problem but if you don't try to link to the .js file at the end of your html file.
If you don't want this to be nessecary you have to wrap your channel_click within a window.onload or if you use jQuery
$(document).ready(function() {
function channel_click() {
....
}
})

try removing onclick from your anchor tag:
Print Preview
JS:
<script type="text/javascript">
function channel_click(){
// anon wrapper function, 2 second delay
setTimeout( function () {
window.print();return false;
} , 1500 );
}
$(document).ready(function() { //add this
$(".hideshow").click(function (e) {
e.preventDefault();
$("#header,#footer").toggle("slow");
channel_click(); //call print
setTimeout( function () {
$("#header,#footer").toggle("slow");
} , 3500 );
$('.modal-backdrop').hide();
});
});

here it is working as u expected
http://jsbin.com/imimom/2

Out of that your html is not well-formed, I don't see something wrong there. Maybe you can provide us with the complete markup?

Jquery UI dialog does not disappear

I am using jquery-ui tabs and dialog functionality.
Each tab has a button on the page which opens a dialog. This works for one of the tabs. However if I go the second tab, the button does not work there. When I come back to the first tab, the dialog does show up but the problem is I notice as I make switches back and forth to the first tab, it keeps on inserting new div's while the old div's have display:none set on them.
I am doing this using JSP. This is how the reusable jsp looks like:
<script>
$(function() {
var formData = null;
$.ajax({
url : "addFormGenerator.html",
success : function(data) {
formData = data;
$("#addFormDialog").html(data);
$("#addFormDialog").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Add" : function() {
$(this).dialog("close");
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
}
});
}
});
$("#addButton").button().click(function() {
$("#addFormDialog").html(formData);
$("#addFormDialog").dialog("open");
});
});
</script>
<button id="addButton">Click here to Add New</button>
<div id="addFormDialog" title="Add New"></div>
This jsp fragment is included in other jsp pages as well.
I was assuming as I switch between tabs the old button will be garbage collected.
Can you help me understand the problem and fix it?

You need not render the following part from your jsp's response
<div class="addFormDialog" title="Add New"></div>
$("#addButton").button().click(function() {
$("#addFormDialog").html(formData);
$("#addFormDialog").dialog("open");
});
Just have the following, ideally with class names and not duplicate id's
<button class="addButton">Click here to Add New</button>
UPDATE:
I still don't think you need unique id's -
<div id="tabs-container">
<!-- tabs here -- >
<-- let's say this is tab#1 -->
<button class="addButton">Click here to Add New</button>
<div class="addFormDialog" title="Add New"></div>
<!-- tab1 -->
</div>
$('#tabs-container').on('click' , '.addButton', function(){
var dialogContent = $(this).siblings('.addFormDialog');
//now call .dialog({..}); or whatever you need
});
This way you're binding just one click handler that listens to any click that bubbles up from a .addButton and then searches for its sibling .addFormDialog. (I hope I'm not sounding too confusing)