I have a table attached to Datasource that I would like to update every 30 seconds, or on widget onClick action. For some reason this isn't working.
onAttach:
window.reloadId = setTimeout(function() { widget.datasource.load(); }, 2 * 60 * 1000);
onDetach:
clearTimeout(window.reloadId);
Related
I have an event on one calendar, and I need to offer the user the ability to move that event to another month in the same calendar. It seems like the best way to do this is (1) remove the event from the current calendar, (2) create a draggable div outside the calendar, (3) allow the user to change the month/day/year, (4) allow the user to drag the div back onto the calendar, (5) hide the new div, (6) submit an ajax request to update the datasource, (7) delete the newly dropped event.
Attached are the code snippets used to do this.
My question: this seems very roundabout. Is there a better way?
// 1
reschedulingEvent = calendar.getEventById(....)
reschedulingEvent.remove()
// 2
rescheduledAppointment = new FullCalendar.Draggable(document.getElementById(
'rescheduled-appointment'), {
eventData: {
id: reschedulingEvent.id,
title: reschedulingEvent.title,
duration: "0:" + (reschedulingEvent.end - reschedulingEvent.start)/1000/60,
}
})
// 4
calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
editable: true,
droppable: true,
eventDrop: addEventToForm,
eventReceive: addEventToForm,
});
async function addEventToForm(info) {
if (!confirm("Would you like to reschedule this appointment")) return;
$(".rescheduled-appointment-div").hide() // 5
await axios.post(`/appointments/${info.event.id}`, {
start: info.event.start,
end: info.event.end,
}) // 6
calendar.refetchEvents()
calendar.getEventById(info.event.id).remove() // 7
I kindly need a support. I have written a pagination following a YouTube tutorial, which works fine with the exception of when going backwards again. It has only 2 buttons, previous and next, when the next button is clicked it works fine but the previous button only go backwards once. Let's say I have 20 records in the collections paginated to display 5 at a time, the next button could go to the end to the fourth page but the previous button would not go pass one step backwards. Please what am I to do to have pagination experience? The previous button is suppose to navigate to the last page as long as the user clicks.
Events for the pagination buttons:
Template.myviews.events({
'click .previous': function () {
if (Session.get('skip') > 5 ) {
Session.set('skip', Session.get('skip') - 5 );
}
},
'click .next': function () {
Session.set('skip', Session.get('skip') + 5 );
}
});
Publication:
Meteor.publish('userSchools', function (skipCount) {
check(skipCount, Number);
user = Meteor.users.findOne({ _id: this.userId });
if(user) {
if(user.emails[0].verified) {
return SchoolDb.find({userId: Meteor.userId()}, {limit: 5, skip: skipCount});
} else {
throw new Meteor.Error('Not authorized');
return false;
}
}
});
Subscription:
Session.setDefault('skip', 0);
Tracker.autorun(function () {
Meteor.subscribe('userSchools', Session.get('skip'));
});
Blaze pagination buttons:
<ul class="pager">
<li class="previous">Previous </li>
<li class="next">Next </li>
</ul>
Template helper:
RenderSchool: function () {
if(Meteor.userId()) {
if(Meteor.user().emails[0].verified) {
return SchoolDb.find({userId: Meteor.userId()}).fetch().reverse();
} else {
FlowRouter.go('/');
Bert.alert('Please verify your account to proceed', 'success', 'growl-top-right');
}
}
}
You have 6 documents total with 2 docs per page, 3 pages in total.
Your if condition in previous button click handler prevents you from going to the first page:
if (Session.get('skip') > 2 /* testing */ ) {
...
}
For 2nd page skip will equal 2 and on the next click this condition will be false, preventing from going back.
When you're on the 3rd page — you can go on 2nd only, creating an impression that button works only once.
It should be like this:
if (Session.get('skip') > 0 ) {
...
}
I am currently using bootstrap date picker downloaded from eyecon.ro
On clicking the input field the datepicker popup opens, where i am showing the date.
However, on scrolling the browser's window, the datepicker's popup disappears. I have also created an issue for this in github but haven't got any answer yet. Can anyone help me with this, please ?
When you click in any location on windows the event "onblur" is fired, so this is not a bug. Otherwise you can modify this coding a event for onblur to not 'hide' the datepicker window.
Edit:
Ok, make this modification on bootstrap-datepicker.JS, on Datepicker prototype (line 88):
show: function(e) {
this.picker.show();
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
this.place();
var t = this;
$(window).on('resize', $.proxy(this.place, this));
$(window).on("scroll", this.place, function() {
t.show();
});
if (e ) {
e.stopPropagation();
e.preventDefault();
}
if (!this.isInput) {
}
var that = this;
$(document).on('mousedown', function(ev){
if ($(ev.target).closest('.datepicker').length == 0) {
that.hide();
}
});
this.element.trigger({
type: 'show',
date: this.date
});
},
I just include a trigger for 'scroll', below the trigger for 'rezise' (line 6 here).
I have a simple JSFiddle here: http://jsfiddle.net/cvCWc/2/
The basic code looks like:
window.player = videojs("movie_container", { techOrder: ["html5", "slash"] }, function() {
videojs_player = this;
videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})
videojs_player.on("click", function(event){
event.preventDefault();
alert('click');
});
videojs_player.play();
});
I am trying to capture all click events on the video for future processing, but I don't want the video to pause when clicked. Any ideas?
I found the answer for HTML5... but I don't get click events in the flash fallback. Updated jsfdl: http://jsfiddle.net/cvCWc/3/
window.player = videojs("movie_container", { techOrder: ["html5", "flash"] }, function() {
videojs_player = this;
videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})
videojs_player.off('click');
videojs_player.on("click", function(event){
event.preventDefault();
console.log("click", event.clientX, event.clientY, videojs_player.currentTime());
});
videojs_player.play();
});
Just an alternative if someone drops to this. When you wanna bypass the stop play functionality when user clicks the stream(or view, whatever you call it), not the control bar, one can comment out somelines in videojs..
Player.prototype.handleTechClick_ = function handleTechClick_(event) {
// We're using mousedown to detect clicks thanks to Flash, but mousedown
// will also be triggered with right-clicks, so we need to prevent that
if (event.button !== 0) return;
// When controls are disabled a click should not toggle playback because
// the click is considered a control
if (this.controls()) {
if (this.paused()) {
//this.play(); // COMMENTED OUT
} else {
//this.pause(); // COMMENTED OUT
}
}
};
Control bar will still work...
Okay so here's the story:
I have two buttons with two different controllers(handlers) - A plus and a minus button:
[ + ] addBtn [ - ] subtractBtn - hidden
The first time you click the addBtn, the subtractBtn should show.
The max amount of clicks for either button is 2.
When you click the addBtn, the count of clicks should increment by 1.
When you click the subtractBtn, the count of clicks should decrement by 1.
When the count reaches 0, the subtractBtn should disappear
The issue here is I need to somehow store this variable(count) into a variable that both controllers can read.
If anyone can answer how this could be done in Ext JS, that would be muy excellente and I will provide tons of upvotes. Thank you!
Use count as a global variable and here is a working example: http://jsfiddle.net/x_window/HVkhy/1/
Ext.onReady(function(){
var count = 0;
var btnAdd = new Ext.Button({
width: 50,
text: '+',
handler: function(){
++count;
if(count > 0 && btnSubs.hidden)
btnSubs.show();
if(count > 1 && !btnAdd.hidden)
btnAdd.hide();
}
});
var btnSubs = new Ext.Button({
width: 50,
hidden: true,
text: '-',
handler: function(){
--count;
if(count < 2 && btnAdd.hidden)
btnAdd.show();
if(count < 1 && !btnSubs.hidden)
btnSubs.hide();
}
});
var panel = new Ext.Panel({
width: 200,
items: [btnAdd, btnSubs],
renderTo: 'content'
});
});
I'm assuming the buttons have a common ancestor (maybe a container, or panel). You could keep the variable there. If you're using button handlers, you can access the parent container by using up()
handler: function(btn, e) {
btn.up('container').count++;
}
You may need to look over http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ComponentQuery to figure out which selector to use for the up() function.
You can always access controller2 from a controller1 with the getController method of the application instance, which you get in the onLaunch method of controller1.
application.getController("controller2").count++;