Call or add on click event in calendar library equinox - javascript

I am trying to use this js library to show calendar in my page. I have no problem to integrating it. But the problem is i am not seeing any documentation how should i add onclick events in this library! If anyone look at this library and give me any solution, it will be very helpful for me. Thank you.
To Initiate the library i have to use:
<div class="event-calendar"></div>
then in my script.
$('.event-calendar').equinox({
onEventClick: null,
onPreviousMonthStart: null,
onNextMonthStart: null,
onCurrentMonthStart: null,
onLoadStart: null,
onLoadEnd: null
});
I was trying to get the current date with on click event, which is related to that library.

You didn't give any details about what you want to achieve and what this calendar thing looks like, so don't expect specific answers unless you edit your question.
Anyway, a general solution would be to inspect the calendar widget or element using you browser's dev tools, and check the id of the DOM element you want to target. Once you have the right id, it becomes as simple as:
var elem = document.getElementById("element_id");
elem.onclick = function() {
//whatever you want to do here
}

Related

Dynamic CFTab onClose event

I simply can't find any real documentation on ColdFusion Layout Tabs. For the most part I've got them working, but I'd like to tie some logic to a close event. I was wondering if anyone had a working example they could show me? The catch is that I will need to trigger these events in JavaScript. But if you have a working version in plain ColdFusion, I'd still love to see it!
var tab = ColdFusion.Layout.getTabLayout("innerTabLayout").activeTab._cf_body;
$('#' + tab).on('close', blah); // doesn't work
tab.on('close', blah) // doesn't work
ColdFusion.Layout.getTabLayout("innerTabLayout").activeTab._cf_body.onTabClose( function(), blah ); //doesn't work
I have also tried setting the event on tab creation:
var tab = ColdFusion.Layout.createTab();
tab.onTabClose()
tab.on('close');
However, none of these work either. I've tried looking at EXT.JS which is what CFtabs were created from, but I don't seem to have any luck there either.
The Coldfusion.Layout object has a function for tab closing, so there must be a way to trigger it! (I would think, haha).
So after spending some too much messing around with the tab, I've got a solution.
ColdFusion.Layout.getTabLayout('innerTabLayout').activeTab.on('close', function(e) {
console.log(this) //this will return the tab object
console.log(e)//this also returns the tab object
});
This will trigger the event when the active tab within a parent is closed. I'm interested to see if there's another, better solution.

How to remove an event out of content script scope?

I'm trying to unbind an event from a specific element and upon research, I found this. Which is useful. In itself. I didn't know you could do that. But:
Is there a way to make it work in a browser/Chrome extension? I'm talking about content scripts.
The reason why this doesn't work the way it's described there is that the website which has attached the event in question with its own script is using a different jQuery object than the one in my extension's includes/ folder. And I can try to search the event via jQuery._data(el, 'click'); but that is my jQuery object, not the one of the website where the events are apparently stored. I'm glad I figured that out after hours of fiddling around.
Or maybe it is possible to access the website's jQuery object itself?
EDIT:
What I'm ultimately trying to achieve works in theory but … it's complicated. The original script uses a plugin event and keeps reinstalling it with .on('mouseleave',….
Anyway, this is what I got thanks to you, pdoherty926:
var $el = $('div.slideshow');
$('h2', $el).click(function(){ console.log('ouch!'); }); // test event
var $slides = $('.slides', $el).detach();
$copy = $el.clone(false);
$slides.prependTo($copy);
$el.replaceWith($copy);
The test event doesn't get triggered but the event I'm actually trying to remove still fires. I can imagine figuring it out, though, now that I got closer to my goal.
Okay, the aforementioned re-installation on mouseleave really messed up this otherwise satisfying suggestion. (The site is using the jQuery Timer plug-in by Cyntaxtech). So here's how I solved it instead: I simply changed the class name (-.-' )
Now the re-installation code cannot find the element anymore.
This is how my finished script looks like:
function stop_happening() {
var $el = $('div.fullwall div.slideshow');
$el
// first, stop the current automation.
.timer('stop') // Timer plug-in
// next, change class name in order to prevent the timer
// from being started again.
.removeClass('slideshow').addClass('slideshow-disabled-automation');
//--- copied some extra code from the website itself for the onclick
// events which are supposed to keep working. I wish I could do *that*
// programmatically but I'm glad I got as far as I got. ---//
// […]
}

How do we set an onExpand event in a cfLayout accordion

We're using CFLayout to create a tab structure in our web application. After creation of that layout we call this function:
mytabs = ColdFusion.Layout.getTabLayout("#attributes.cflayoutName#");
mytabs.on('tabchange',
function(tablayout,tab) {
var tabtitle = tab.title;
alert(tabtitle); // Actual code does various useful 'stuff' here.
}
);
That piece of code works very well, and the alert will show each time the user clicks on a tab.
The problem is that we are now trying to do the same thing with a CFLayout type of "accordion", and I cannot get an event to fire when the user switches which accordion pane they are looking at. We've tried leaving the above as is, as well as changing the "tabchange" attribute to "expand", "beforeexpand", "activate", and "collapse".
For this testing I'm using the following simple JS function to avoid issues arising from the JS within the onchange event:
mytabs = ColdFusion.Layout.getAccordionLayout("#attributes.cflayoutName#");
mytabs.on('expand',
function(tablayout,tab) {
console.log('test');
}
);
We do not receive any errors. Nothing is logged to the console at all. I've tried replacing the console.log to an alert to rule out any problems with that line.
I found that the Ext library documentation to be very helpful with finding a solution to this problem: here.
The Ext library has a getComponent method that allows you to reference the accordion layout panel that you are trying to add the expand event to. Once you have this, you can use the "on" method you are using above to assign the expand event to each panel individually.
for (x=1; x<accordionLayoutArray.length; x++) {
mytabs.getComponent(accordionPanelName).on('expand',
function(tab) { ... });
}
This became too long for a comment so adding as an answer
After some Google searches I found what I think are some related posts. It appears as though the accordion in Ext JS does not have the same events as the tab. Instead you need to add a listener in order to catch the expanding.
See this post - in case something happens to that page here is the relevant piece:
You'd need to listen to the expand event of the child panels in the accordion, you could do something like:
Code:
myAccordion.add(myFunc('myTitle'));
function myFunc(title)
{
return new Ext.Panel(
{
title: title,
listeners: { 'expand': {fn: something, scope: foo}}
}
);
}
And I also found another similar post here on SO - see both answers
Once you know that the accordion needs a listener you can find a number of results on Google. Such as How do I attach an event handler to a panel in extJS?
This Google search will give you lots of examples.
Hope that helps.

Kendo-Knockout: widget observable is not filled with the actual widget

I am using RPNiemeyer`s kendo-knockout library. I have a kendo window:
HTML:
<div data-bind="kendoWindow: {isOpen: isOpen, title:'Language', width: 400, height: 200, modal: true, widget: popUpWindow }" >
JavaScript part that centers the window:
this.popUpWindow = ko.observable();
self.isOpen.subscribe(function (newValue) {
if (newValue) {
self.popUpWindow().center();
}
});
I am using the source code from my previous question for my fiddle:
Kendo-Knockout: Window does not close correctly
I am following the steps shown here:
Kendo-Knockout: How to center window
I am defining the widget observable but when I want to use it it is not filled with the actual widget.
Fiddle:
http://jsfiddle.net/dcYRM/15/
Any help with working example will be greatly appreciated.
Looks like there are a couple of issues:
First, your isOpen subscription is running before the widget has been filled.
Secondly, after filling the widget, it is causing the datasource to get refreshed and is trying to serialize the model including the widget, which is causing an issue. This is ultimately because Knockout-Kendo is a little too aggressive about unwrapping the data passed to the grid.
I see two pretty easy ways to fix the issue. The easiest way is to set up a global handler for the widget's open event and call center on it.
Putting this with the close event from a previous question would look something like:
ko.bindingHandlers.kendoWindow.options = {
close: function() {
$('.k-window, .k-overlay').remove();
},
open: function(event) {
event.sender.center();
}
};
Now, whenever any window is opened it will get centered and you don't need to mess with the widget at all. Sample here: http://jsfiddle.net/rniemeyer/F4JGG/
That looks like the best option. To make it work with the reference to the widget itself, you will need to workaround an issue in the library. As mentioned above, it is a little too aggressive and unwrapping the options and it appears that this causes an issue when a widget is initialized, the widget parameter is passed, and it is already filled with a widget. I should be able to address it in the library, when I get a chance.
Otherwise, you would have to do:
self.popUpWindow = ko.observable();
self.popUpWindow.subscribe(function (widget) {
if (widget) {
widget.center();
self.popUpWindow(null); //hack - Knockout-Kendo should handle this one
}
});
So, clear the observable after you called center on it. Here is a sample: http://jsfiddle.net/rniemeyer/PVMjy/. I also subscribed to the widget's observable itself, so that there is not the timing issue with isOpen as mentioned above.
Setting the global open handler, seems like the cleanest and best option in this case.

Programmatically activating a custom TinyMCE button

I've got a lot of custom buttons on my TinyMCE toolbar, most of which open a dialog box with some further options in when you click them. This all works fine.
Here is an example of something in my tinyMCE_setup() function:
ed.addButton('link2', {
title: '{!link!}',
image: '../style/common/images/link_20x20.png',
onclick: function() {
replyBoxDialog('link', ed);
}
});
However, I want to be able to call these programatically, and faking a .click() on the button with jQuery won't cut it.
I've tried calling the function directly
replyBoxDialog('link',tinyMCE);
But no matter what I try as the second argument, I can't get the right object (so it fails when it's time to insert something into the editor, as it doesn't know what the editor is).
I've also had a try with various execCommand() calls, but I've no idea what to put in there.
Any clues?
All you have to do is to use a real editor object as paramter
var editor_instance = tinymce.activeEditor; // in case you just use one editor
var editor_instance = tinymce.get('my_special_editor_id'); // in case you have more than one editor
replyBoxDialog('link', editor_instance);
I've managed to make it work by creating a variable 'globalEd' at the top of the script and adding globalEd = ed; to tinyMCE_setup(), then I can call replyBoxDialog('dragndrop', globalEd);. This seems like a properly hacky way of doing things though, so I'd welcome any further advice.

Categories