Hi I have a plugin that opens a window with a own html-page.
tinymce.PluginManager.add('ds_format_edit', function (editor, url) {
editor.addMenuItem('ds_format_edit', {
text: 'Formatvorlage anpassen...',
icon: false,
onclick: function () {
editor.execCommand("ds_format_edit");
}
});
editor.addCommand('ds_format_edit', function () {
editor.windowManager.open({
title: "Formatvorlagen anpassen ...",
url: 'DSFormatEditDialog.html',
width: 800,
height: 350,
buttons: [
{
text: 'OK',
onclick: function () {
top.tinymce.activeEditor.windowManager.close();
}
},
{ text: 'Cancel', onclick: 'cancel' }
]
}, {
tinymce_formats: getFormats(),
});
});
});
tinymce_formats is my parameter which I pass to the window. The dialog modify this parameter. All thats works.
Now I want to reintialize the tinymce editor if the window has been closed (if the user pressed the OK button) to get the modified parameter.
Is there any open callback function or an other way to realize that?
Thanks Felix
EDIT:
I call this plugin with a Button. The Plugin open a window with a parameter. In this window I do something and modify the parameter. And if the window has been closed I want to use my reintialize function. I need a function which knows when the window is closed to execute the reintialize function.
To reset everything (button state & content) you need to unload the editor and initialize it again like this way :
# Remove TinyMCE instance
tinyMCE.remove();
# Initialize TinyMCE again
tinyMCE.init({ ... });
Or, if you only need to empty the text content, use this :
tinyMCE.get('#my-textarea-id').setContent("");
To tell to your main app the window has been closed, you can fire a custom event :
{
text:'OK',
onclick: function () {
jQuery(document).trigger('myCustomCloseEvent');
top.tinymce.activeEditor.windowManager.close();
}
}
In you main app, bind the event :
jQuery(document).on("myCustomCloseEvent", function()
{
alert('Window has been closed');
});
Related
My question is the following:
I have multiple filters on my page, that filter events schedule dynamically, so when I click on any of the filters, my url changes without reloading the page.
For example:
http://.../schedule/#Screening,Free
http://.../schedule/#Talk,Expo
Then, I have share buttons with Sharrre:
.social.social--share-filters
a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank")
a.icon.icon-linkedin2.js-linkedin-filters(href="#", target="_blank")
a.icon.icon-facebook.js-facebook-filters(href="#", target="_blank")
$('.js-facebook-filters').sharrre({
share: {
facebook: true,
},
url: window.location.href,
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('facebook');
}
});
Inspite of that fact that inside sharrre I have url variable that equals to current link, it shares only that link which is derived when page is loaded for the first time.
I tried to put it inside click event on the icons - that does not work.
I tried to put sharrre inside a function (eg. initialiseShare) and do window.initialiseShare = initialiseShare; - that also does not work.
And I tried to remove and append the button, changing data-url attribute, and it also does not work.
function initialiseShare(link) {
$('.js-twitter-filters').sharrre({
share: {
twitter: true,
},
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('twitter');
} }); }
+
$(document).ready(function() {
initialiseShare();
$('.js-twitter-filters').on('click', function(){
var clone = $('.js-twitter-filters').clone();
$('.js-twitter-filters').remove();
$('.social--share-filters').append(clone);
$('.js-twitter-filters').data('url', window.location.href);
initialiseShare();
return false;
});
});
+
jade for the icon
.social.social--share-filters
a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank" data-url="#")
Please, help!
Thank you in advance!
P.S. I can use any other solution except those which could lead to buttons which cannot be customised in design.
Try this:
$('body').on('DOMNodeInserted', '.js-twitter-filters', function(e) {
$(this).sharrre({
share: {
twitter: true,
},
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('twitter');
}
});
});
Explanation:
You're trying to bind to dynamically loaded elements. When your script executes on page load, the elements are not available for jQuery to perform the binding with "sharrre" - so you can use the .on() live binding delegate to bind to elements after insertion.
Reference:
http://api.jquery.com/on/
I would like to use a custom window as popup editor of a Kendo UI Grid. Its content will be complex with search fields and a grid to display search results. To do that, I don't want to use the Kendo template mechanism but a real popup window.
While doing tests with custom editor I faced an issue. Even with a very basic and simple scenario (just the create command), I'm only able to open the editor once. The second time I get an error, the editor doesn't show up anymore and the grid becomes empty.
Here is my HTML code :
<div id="main-content">
<div id="custom-window">
</div>
<table id="my-table-grid">
</table>
</div>
The JavaScript part :
function openCustomWindow(e) {
e.preventDefault();
myWindow.center().open();
}
function editorWindowClosed(e) {
myGrid.cancelRow();
}
var myWindow = $("#custom-window").kendoWindow({
modal: true,
resizable: false,
title: "Test",
visible: false,
close: editorWindowClosed
}).data("kendoWindow");
var dummyDataSource = new kendo.data.DataSource(
{
schema : {
model : {
id: "id",
fields: {
postion: { type: "number"},
name: { type: "string"},
}
}
}
});
dummyDataSource.add({postion: 1, name: "gswin"});
var myGrid = $("#my-table-grid").kendoGrid({
dataSource: dummyDataSource,
toolbar: [ {
name: "create",
text: "Create"
} ],
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
},
columns: [
{
field: "postion",
title: "Postion"
},
{
field: "name",
title: "Name"
}
]
}).data("kendoGrid");
The error message in the JavaScript console :
Uncaught TypeError: Cannot read property 'uid' of
undefinedut.ui.DataBoundWidget.extend.cancelRow #
kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow #
kendo.all.min.js:29(anonymous function) #
kendo.all.min.js:29jQuery.event.dispatch #
jquery-2.1.3.js:4430jQuery.event.add.elemData.handle #
jquery-2.1.3.js:4116
And finally a jsfiddle link to show what I'm doing. (The popup is empty because I just want to fix the open / close mechanism before going any further)
I don't understand why I get this error, I expected to be able to open / close the popup as many time as I wanted. The default editor popup is working fine.
One of my colleague found the solution (thanks to him).
Actually this piece of code
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
}
is designed to configure the default popup...
The right way to use a custom popup is the following :
editable :true,
edit: openCustomWindow,
With this approach it's also better to use
function editorWindowClosed(e) {
myGrid.cancelChanges();
}
Instead of
function editorWindowClosed(e) {
myGrid.cancelRow();
}
Working jsfiddle link
Actually the approach in my previous answer solved my issue but is causing another issue. The grid becomes editable but in the default mode (which is "inline").
Doing this
editable: "popup",
edit: openCustomWindow
has fixed this other issue but is now displaying 2 popups.
I finally succeeded to hide the default popup and only show my custom popup but it ended with the orginal issue described in initial question...
Considering all those informations I arrived to the conclusion that working with a custom popup window is definitely not an option. I'll start working with teamplates instead.
Another solution would have been to use a template to override the toolbar with a custom "Add" button and use a custom command for edition. But at this point I consider that too "tricky".
To prevent Kendo UI custom grid popup editor window, define the editable property:
editable:
{
mode: "popup",
window: {
animation: false,
open: updateRowEventHandler
}
} // skip edit property
Then paste preventDefault() at the beginning of the handler:
function updateRowEventHandler(e) {
e.preventDefault(); //
I have this piece of code :
listeners:
{
beforerender: function()
{
if (importButton == true)
{
this.menu.add(
{
text: 'Import',
iconCls: 'importIcon',
listeners:
{
click: new ifAuthorizing('import')
}
})
}
this.menu.add(
{
text: 'Consultation',
iconCls: 'searchIcon',
listeners:
{
click: menuConsultation
}
})
}
}
that is supposed to add items to a menu when some conditions are OK.
It's working, the button are well added if the conditions matches.
The problem is coming from the
listeners:
{
click: new ifAuthorizing('import')
}
This listener is supposed to be appended to the menu item, but it is triggered during the beforerender event of its parent.
function ifAuthorizing(arg) {
console.log('import')
}
The 'import' is displayed in the console logs during the beforerender event, and then if I click on the menu item that is supposed to have a click method, nothing happens.
I would like to know why.
new ifAuthorizing('import')
Here operator new tries to create an object and interpretes ifAuthorizing as a constructor. The constructor is called immediately, that's why it fires on beforeRender event. As a result you get some object which is not a copy of function ifAuthorizing, so it can't be called on menu item's event with the desired result.
I have written an event to save the data in a widget.js file & the handler is on the page. There is no error or exception is coming but the handler is not getting called. Please help.
Widget.js :
(function ($, undefined) {
$.widget('ui.discussionwidget', {
options: {
userID: 'arti.agarwa',
title: "",
width: "",
containerClass: ".ui-content-gutter"
},
saveData: function (userName, msg, parentID) {
//Save Discussion History
$.event.trigger({
type: "sendMessage",
userName: userName,
message: msg,
parentID: parentID,
timeStamp: new Date()
});
},
});})(jQuery);
Page Script :
$(document).ready(function () {
$('#discussionwidget').live("sendMessage", sendMessageHandler);
// sendMessage event handler
function sendMessageHandler(e) {
debugger;
alert(1);
}});
Looks like event delegation is not working fine with global events
$('#discussionwidget').on("sendMessage", sendMessageHandler);
Demo: Fiddle
I can see two possible problems:
Your widget has class discussionwidget but you are binding with id discussionwidget.
You are creating the widget dynamically with javascript? May be the event is being bound before the widget is created.
Try to fix both.
someClass = Ext.extend(someClassB, {
_someFunctionC{
someButton = new Ext.button({
handler: function () {
this._onClick('click');
}
}),
_onClick(someMessage){
Ext.Msg.alert(someMessage);
}
}
}
_onClick eats one parameter; in the above code you put in the 'click' event because you want _onClick to be executed after the user clicks on the button. However, how do you specify this specific 'click' registration AND pass in a local variable as the _onClick parameter at the same time?
As an aside, why do you even have to specify 'click', when the API states that handler always pertains to a click? Is this additional information not unnecessary?
Typically you set it up like this. No real need to pass parameters since someFunction is a member of your 'class' and has access to any data you'd want.
var button = new Ext.Button({
handler: this.someFunction
scope: this
});
someFunction: function() {
// do something interesting.
}
So if i understand correctly you want to set the handler config option but set the arguments yourself in one go?
Does this do what you want?
// clicking the button alerts 'Hello World'
new Ext.Button({
text: 'Test',
handler: function(value){
alert('Hello, ' + value);
}.createCallback('World')
});
Notice the createCallback executed on the anonymous function, this creates a callback function for handler which only gets passed the arguments you pass to createCallback.
Another way that I've found to do this is to pass a custom config option along with your button. Say you wanted to have a splitbutton that could choose the amount of banners to add. (this is from a recent project)
{
xtype: 'splitbutton',
iconCls: 'icon addBanners',
ref: '../addBanner',
text: 'Add Banner',
menu: new Ext.menu.Menu({
items: [{
text: 'Add 10 Banners',
scope: this,
handler: this.addBanner,
numBanners: 10
},{
text: 'Add 20 Banners',
scope: this,
handler: this.addBanner,
numBanners: 20
}]
}),
scope: this,
handler: this.addBanner,
numBanners: 1
}
And in your function:
addBanner: function(button, event) {
if (button.numBanners) {
// do whatever
}
}
You can also create a callback function that inserts extra parameters when it is called:
var button = new Ext.Button({
handler: this.someFunction.createDelegate(button,['Some message'])
});