We Keep Coding

Trying to grab the week input value from weekly calendar

Found this plugin for a weekly calendar:
https://www.jqueryscript.net/demo/Week-Picker-Bootstrap-4/
I am trying to retrieve the week value from an INPUT within a DIV id called "weekpicker1".
For the time being, I'm just trying to print it in the console.
I have tried the following:
<script type="text/javascript">
var weekpicker = $("#weekpicker1").weekpicker();
$(weekpicker).on('blur', function()
{
console.log('hello');
});
</script>
The input doesn't have an ID. I can't figure out how to access it. As you can see, I tried to use the "blur" handler. "Click" doesn't work either.
What can I do to grab the value of the INPUT within the DIV called "weekpicker1"?

This exact use case is documented on the plugin's Github repository.
$(function() {
var weekpicker = $("#weekpicker1").weekpicker();
console.log(weekpicker.getWeek());
console.log(weekpicker.getYear());
var inputField = weekpicker.find("input");
inputField.datetimepicker().on("dp.change", function() {
console.log(weekpicker.getWeek());
console.log(weekpicker.getYear());
})
});

Make bootstrap timepicker popup on input click

I am tried to create a timepicker
using this here
then I implemented its js and css in my project.
but when I click it the popup didn't appear
I just have this code and can't add anew control to the glyphicons
TextBox control = new TextBox { ID = _TimeFieldID + item.BlueprintFieldId, CausesValidation = true, EnableViewState = true, CssClass = "form-control timepicker margin-top-none metadatacontrol", Width = new Unit(ctrWidth + "%") };
and fire it in javascript with
$(".timepicker").timepicker();
how can I make it appears popup in textbox click?
How can ovride the js to get timepicker fire on a click in the input field?
any help?
EDIT:
Here is my new javascript calling
$(".timepicker").timepicker();
$('.timepicker').click(function () {
$('.bootstrap-timepicker-widget.dropdown-menu').show();
});
Now I can show the timepicker popup , but it looks very wide
I try this
$('.bootstrap-timepicker-widget.dropdown-menu').css("display", "inline-block");
This code displays the popup. Now, the pop-up window width needs to be set the same as width of the input.

use this javascript
$('.timepicker').focus(function (){
$('.timepicker').timepicker('showWidget');
});
or
$('.timepicker').click(function (){
$('.timepicker').timepicker('showWidget');
});
after your code
$(".timepicker").timepicker();

How to use a data attribute from a target div as view param in a PrimeFaces ContextMenu outcome

I'm trying to do the following:
From a simple collection of elements...
Add a PrimeFaces ContextMenu...
Have the first menu option forward to a new page...
Pass a data attribute from the selected element as a view
param.
It all seems pretty straightforward, until I come to the last step, and I can't seem to find a way to get this to work.
e.g.
<div class="group" data-group="GRP1">
...
</div>
<div class="group" data-group="GRP2">
...
</div>
<div class="group" data-group="GRP3">
...
</div>
<p:contextMenu targetFilter="div.group">
<p:menuitem value="Edit" outcome="group.xhtml?group=GRP???"/>
</p:contextMenu>
The divs are generated HTML and I don't really have much control over those, so probably need to do something with Javascript on the client side.
I've tried to get hold of the group from the Javascript side, but I can't see how to bind a function to the beforeShow handler. I can see that if I can register the correct event handler then the PF code will pass me the event (from which I can get the target element and the data attribute):
// from PF menu.js
if(this.cfg.beforeShow) {
var retVal = this.cfg.beforeShow.call(this, e);
if(retVal === false) {
return;
}
}
But I'm not sure how to access this - if I just use inline event registration then I can only pass Javascript code not a reference to my function:
function doBeforeShow(menu, event) {
var group = event.target.dataset['group'];
}
<p:contextMenu targetFilter="div.group" beforeShow="/* this is just executed JS not a bound function */">
Anyway, even if I could get the group from the JS side, I'm not really sure what I'd do with it... probably store it somewhere and attach another handler to the p:menuitem so when it was selected it could modify the outcome before calling it?
So I'm stuck! Anyone have any ideas on how I can get this to work?
Thanks,

Got this working, though not sure it is the best way...
Required a patch to PrimeFaces to store the jQuery event on the menu widget:
--- src/main/resources/META-INF/resources/primefaces/menu/menu.js (revision 12491)
+++ src/main/resources/META-INF/resources/primefaces/menu/menu.js (working copy)
## -1109,6 +1109,9 ##
top = top - height;
}
+ // save the event which activated this menu
+ this.jqEvent = e;
+
if(this.cfg.beforeShow) {
var retVal = this.cfg.beforeShow.call(this, e);
if(retVal === false) {
Then added "widgetVar" to the contextMenu to name the menu widget and some client-side javascript to update the link before it is activated:
<p:contextMenu targetFilter="div.group" widgetVar="ctxMenu">
<p:menuitem value="Edit" onclick="fixGroupLink(PF('ctxMenu'), this);"
outcome="group.xhtml?group=GRP???"/>
</p:contextMenu>
function fixGroupLink(menu, menuitem) {
var grp = menu.jqEvent.target.dataset.group;
menuitem.href = menuitem.href.replace(/group=.*$/, "group=" + grp);
}
So this works, and I'll mark it as accepted for now, but happy for anyone to chip in with a better solution if they have one - especially one which does not include customising the PrimeFaces library...

Reading a local file a _second_ time using the html5 file reader API

I am currently working on some small helper utility. The approach is an in-page web app which is typically loaded from the local file system. That all works. Inside that app I need to be able to load and process local files (storing and reloading a profile). That works so far, but I have a problem left where I would like to ask for help:
I am using the filereader.js wrapper around the html5 file reader API. Things work so far, I am able to select, read and process a file in-page. Great! I even can process several files one after another. However there is one problem where I don't know how to start debugging it: I can not read a specific file a second time. I can select it, sure, but it is not read, thus not processed. It looks like there are no events generated at all by the file reader API. This might be connected to either caching or the prior usage of the file not having been terminated by me correctly, I have no idea.
Here is the relevant code:
My FileReader JS function:
function FileReader( selector, options ) {
var options = $.extend({
clicked: function(){},
payload: function(){},
selected: function(){}
}, options||{} );
var widget = convert( selector );
var selector = widget.find( 'input:file');
function clicked( event ) {
event.stopPropagation();
// highlight button as user feedback
highlight();
// raise the file selection dialog
selector.click();
// signal action to element
options.clicked();
}
function convert( selector ) {
var widget = $( selector );
// create new content for widget
var hotspot = $( '<a class="hotspot">' + widget.html() + '</a>' ).bind( 'click', clicked );
var selector = $( '<input type="file" style="display:none;" />' );
// replace initial content of widget
widget.empty().append( $('<form />').append(selector).append(hotspot) );
widget.find( 'input:file' ).fileReaderJS( { accept: false,
readAsDefault: 'BinaryString',
on: { load: selected } } );
return widget;
}
function highlight() {
// flash button by changing the background color for 100 msecs
widget.css( 'background-color', 'whitesmoke' );
setTimeout( function(){ widget.css( 'background-color', 'transparent' ); }, 100 );
}
function selected( event, file ) {
// process payload
options.payload( event.target.result );
// signal event to controlling element
options.selected();
}
return {}
} // FileReader
This method is called with '#wProfileImport' as value of the argument selector, which actually works and converts the markup below
<span id="wProfileImport" class="control button">
<img src="assets/img/profile-import.png">
</span>
such that it contains a (hidden) file input tag which is used to fire the file selection dialog (which works fine):
<span id="wProfileImport" class="control button">
<form>
<input type="file" style="display:none">
</form>
<a class="hotspot">
<img src="assets/img/profile-import.png">
</a>
</span>
Now when clicking the image the file selector is fired, I can select a local file and its content is handed over to the options.payload callback. As said all fine and working also for more than a single file one after another. The only problem that remains: being able to read in the same file again. No event is fired, no content read, nothing.
So my question is: what do I have to do the process a file a second time, if it is selected by the user?

This has to do with how the onchange event works in JavaScript.
If you have a text input and you type a word, let's say "bird". You unfocus the field, this will cause the onchange event to trigger. If you then go back into the field and change the word, then without unfocussing change it back to "bird" and then unfocus the onchange event will not fire because the value didn't change.
Other events like onkeydown and onfocus will fire however.
See if you can find another event that you can use. Maybe onclick or onfocus. I do fear that these fire too early.
A workaround to to destroy the input once you read the file and render a new one in it's place. This way if the user selects the same file it will count as an onchange again.
Another possibility is to not use the onchange event but do the process once you press a submit button. You can get a reference to the file with:
var file = document.getElementById("#the_file_input").files[0];

At first time loading Give id (same as date ) of Image which is add before each date in fullcalendar

I am using 'Arshaw's Fullcalendar'. I had added image before each date but i can not give id of image which is same as date,more i want to open a popup form whenever click on image then and then only popup need to open. Please friends if u have solution of this kind of problem then please share with me
Here u can see count variable which is need to take because whenever i will change the view then image is append more 1 or 2 time before each date so please i want image only 1 time add so please check this issue also
<script>
$(document).ready(function() {
var count=0;
var calendar = $('#calendar').fullCalendar({
eventRender: function( event, element, view, start){
//alert("New EventRender");
if(count==0){
$(".fc-day-number").before("<img src='/assets/images/add2.png' style='' name='date' id='+data-date'>");
alert(count);
count++;
}
}
});
});
</script>