I would like to implement custom file picker to TinyMCE 4, but i dont know how to return value from second popup window.
Here is my code:
textTiny.settings.file_picker_callback = function(callback, value, meta) {
imageFilePicker(callback, value, meta);
};
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'Photo picker',
url: "files-list.html",
width: $(window).width() * 0.8,
height: $(window).height() * 0.8,
buttons: [{
text: 'Insert',
onclick: function () {
var file_src = $(".photo.selected").attr("href");
callback(file_src);
tinymce.activeEditor.windowManager.close();
}
},
{
text: 'Close',
onclick: 'close'
}],
});
};
I will appreciate any advice.
Thank you.
I think you could start by going to TinyMce website. They have a demo tab where you can find a code snippet for implement basic local file picker here
I have setup a kendo grid. The gird has a column containing a hyperlink. When I click on the link, I need to call a function and then I need to redirect to a new page. I know it sounds simple. I have a stand alone example which is doing same.
But when I try to use same logic in kendo grid, I am unable to get the desired result. Please help. Here is a link to Kendo Grid with a column containing hyperlink.
$('#one').kendoGrid({
dataSource: dataOne,
columns: [{
field: 'a',
template: "<a onclick=return doWork() href='/home/again/${a}'>${a}</a>"
}, {
command: 'destroy'
}],
editable: {
confirmation: false
}
});
try this soution
Add this function before grid settings:
function showFoo() {
alert('I am foo!');
return true;
}
Add following code at the end (after grid settings).
var el = document.getElementById('foo');
el.onclick = showFoo;
You need prevent the default click by event.preventDefault() and then redirect.
$('#one').kendoGrid({
dataSource: dataOne,
columns: [{
field: 'a',
template: "<a onclick=\"doWork(event, '/home/again/${a}')\" href=''>${a}</a>"
}, {
command: 'destroy'
}],
editable: {
confirmation: false
}
});
function doWork(ev, url){
ev.preventDefault();
alert("redirecting");
//... do your works
window.location.href = url;
}
I building a sortable table in Meteor with Reactive-Table and having trouble getting my delete button to work for removing entries from the table.
Please see my javascript code below:
Movies = new Meteor.Collection("movies");
if (Meteor.isClient) {
Template.body.events({
"submit .new-movie": function (event) {
var title = event.target.title.value;
var year = event.target.year.value;
var genre = event.target.genre.value;
Movies.insert({
title: title,
year: year,
genre: genre
});
event.target.title.value = "";
event.target.year.value = "";
event.target.genre.value = "0";
return false;
}
});
Template.moviestable.events({
"click .deletebtn": function (event) {
Movies.remove(this._id);
}
});
Template.moviestable.helpers({
movies : function () {
return Movies.find();
},
tableSettings : function () {
return {
showFilter: false,
fields: [
{ key: 'title', label: 'Movie Title' },
{ key: 'year', label: 'Release Year' },
{ key: 'genre', label: 'Genre' },
{ key: 'edit', label: 'Edit', fn: function () { return new Spacebars.SafeString('<button type="button" class="editbtn">Edit</button>') } },
{ key: 'delete', label: 'Delete', fn: function () { return new Spacebars.SafeString('<button type="button" class="deletebtn">Delete</button>') } }
]
}
}
});
}
Can anyone tell me what I'm doing wrong?
In the reactive tables docs, there's an example of how to delete rows from the table. Adapting the example in the docs for your needs, your event should look like this:
Template.moviestable.events({
'click .reactive-table tbody tr': function (event) {
event.preventDefault();
var objToDelete = this;
// checks if the actual clicked element has the class `deletebtn `
if (event.target.className == "deletebtn") {
Movies.remove(objToDelete._id)
}
}
});
The problem you are having is that you are trying to find the _id property on the button click instead of the row click.
If you do console.log(this) on your button click event (as you have it in your question above) you will get something like this Object {key: "delete", label: "", fieldId: "2", sortOrder: ReactiveVar, sortDirection: ReactiveVar} which does not contain the property _id
It is easier to register the row click, where the row object is the actual document you are trying to delete, and then check if the event's target has the delete class you added.
Hi I am newbie in Backbone and JS.
I need to fetch data from the server and put this value as the default to planProviderMode choice radio button. So i fetch the data in defaultMode variable. But the call is a asynchronous and I receive a value after the planProviderMode: defaultMode.value code has been executed.
var PlanProviderMode = Backbone.Model.extend({
url: '/rest/enrollment/step/plan-provider-mode'
});
var defaultMode = new PlanProviderMode;
defaultMode.fetch({
success: function() {
// recieve correct data
}
});
var formItems = new Backbone.Form({
template: tpl,
className: 'wizard-content',
schema: {
planProviderMode: {
template: formTpl,
type: 'Radio',
options: [
{
label: 'By Plan',
val: 'BY_PLAN',
custom: {
img: '../resources/img/by-plan.jpg'
}
},
{
label: 'By Provider',
val: 'BY_PROVIDER',
custom: {
img: '../resources/img/by-provider.jpg'
}
}
]
}
},
//here i put the default value
data: {
planProviderMode: defaultMode.value
}
});
How could I set the fetched value to the form.
Please let me know if the question is not described well. Thanks.
you should write such code in success callback function which is executed only after the fetch request is completed succesfully.
var PlanProviderMode = Backbone.Model.extend({
url: '/rest/enrollment/step/plan-provider-mode'
});
var defaultMode = new PlanProviderMode;
defaultMode.fetch({
success: function() {
// recieve correct data
//here you put the default value
data: {
planProviderMode: defaultMode.value
}
}
});
var formItems = new Backbone.Form({
template: tpl,
className: 'wizard-content',
schema: {
planProviderMode: {
template: formTpl,
type: 'Radio',
options: [
{
label: 'By Plan',
val: 'BY_PLAN',
custom: {
img: '../resources/img/by-plan.jpg'
}
},
{
label: 'By Provider',
val: 'BY_PROVIDER',
custom: {
img: '../resources/img/by-provider.jpg'
}
}
]
}
}
});
Backnone has a function called "parse" that helps you in this cases.
This function will always be called from backbone before the data from server populate the model.
Take a read in parse method.
There's a answer here.
how to override Backbone's parse function?
Hope it helps
The code
Ext.onReady(
function() {
Ext.QuickTips.init();
Ext.namespace('TimeTracker');
TimeTracker.dataStore = new Ext.data.JsonStore(
{
root: 'timecardEntries',
url: 'php/scripts/timecardEntry.script.php',
storeId: 'timesheet',
autoLoad: true,
autoSave: true,
writer: new Ext.data.JsonWriter(
{
encode: true
}
),
fields: [
{name: 'id', type: 'integer'},
{name: 'user_id', type: 'integer'},
{name: 'ticket_id', type: 'integer'},
{name: 'description', type: 'string'},
{name: 'start_time', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'stop_time', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'client_id', type: 'integer'},
{name: 'is_billable', type: 'integer'}
]
}
);
TimeTracker.timeEntryGrid = new Ext.grid.EditorGridPanel(
{
renderTo: Ext.getBody(),
store: TimeTracker.dataStore,
autoFit: true,
height: 500,
title: 'Timesheet Entries',
tbar: [
{
xtype: 'button',
text: 'Add Record',
iconCls: 'silk-add',
handler: function() {
var timecardEntry = TimeTracker.timeEntryGrid.getStore().recordType;
var tce = new timecardEntry(
{
description: 'New Timesheet Entry',
start_time: new Date().format('m/d/Y H:i:s'),
is_billable: 0
}
)
TimeTracker.timeEntryGrid.stopEditing();
var newRow = TimeTracker.dataStore.getCount();
TimeTracker.dataStore.insert(newRow, tce);
TimeTracker.timeEntryGrid.startEditing(newRow, 0);
}
}
],
view: new Ext.grid.GridView(
{
autoFill: true
}
),
colModel: new Ext.grid.ColumnModel(
{
defaults: {
sortable: true,
editable: true
},
columns: [
{
id: 'ticket_number',
header: 'Ticket #',
dataIndex: 'ticket_number',
editor: new Ext.form.TextField({allowBlank: true}),
renderer: function(value) {
return (!value) ? 'N/A' : value;
}
},
{
id: 'description',
header: 'Description',
dataIndex: 'description',
editor: new Ext.form.TextField({allowBlank: false})
},
{
id: 'start_time',
header: 'Start',
dataIndex: 'start_time',
renderer: Ext.util.Format.dateRenderer('m/d/Y h:i A'),
editor: new Ext.form.DateField({allowBlank: false})
},
{
id: 'stop_time',
header: 'Stop',
dataIndex: 'stop_time',
renderer: Ext.util.Format.dateRenderer('m/d/Y h:i A'),
editor: new Ext.form.DateField({allowBlank: false})
},
{
id: 'client',
header: 'Client',
dataIndex: 'client_id',
renderer: function(value) {
return (!value) ? 'N/A' : value;
}
},
{
id: 'billable',
header: 'Billable',
dataIndex: 'is_billable',
renderer: function(value) {
return (!value) ? 'No' : 'Yes';
}
},
{
id: 'actions',
header: null,
xtype: 'actioncolumn',
items: [
{
icon: 'assets/images/silk_icons/page_copy.png',
iconCls: 'action_icon',
handler: function(grid, rowIndex, columnIndex) {
// THE PROBLEM STARTS HERE
grid.stopEditing();
var newRow = TimeTracker.dataStore.getCount();
recordClone = grid.store.getAt(rowIndex);
recordClone.data.start_time = new Date().format('Y-m-d H:i:s');
grid.store.insert(newRow, recordClone);
grid.startEditing(newRow, 0);
}
},
{
icon: 'assets/images/silk_icons/page_delete.png',
handler: function(grid, rowIndex, columnIndex) {
alert('called');
}
}
]
}
]
}
)
}
);
}
);
The Goal
When the user clicks the 'copy' button, that store record is stored into memory, its 'start_time' is set to the current date and time, and it is re-inserted into the store as a new record
The Current Result
I receive the following JS error: Uncaught TypeError: Cannot read property 'data' of undefined
My Question(s)
For starters, I'm not even sure if I'm grabbing the currently selected row's data record properly. Second, I have no idea what the error message I'm getting means.
Any help is, as always, highly appreciated.
Thanks.
Update 1
After some tweaking, here's what I came up with (this modified code for the copy button handler)
{
id: 'actions',
header: null,
xtype: 'actioncolumn',
items: [
{
icon: 'assets/images/silk_icons/page_copy.png',
iconCls: 'action_icon',
handler: function(grid, rowIndex, columnIndex) {
grid.stopEditing();
var newRow = TimeTracker.dataStore.getCount();
var currentRecord = grid.store.getAt(rowIndex);
var timecardEntry = grid.store.recordType;
tce = new timecardEntry(currentRecord.data);
tce.data.start_time = new Date().format('Y-m-d H:i:s');
grid.store.insert(newRow, tce);
}
},
{
icon: 'assets/images/silk_icons/page_delete.png',
handler: function(grid, rowIndex, columnIndex) {
alert('called');
}
}
]
}
Here's what I'm doing:
Stop editing the grid
Get the number of records currently in the store
Grab the currently selected record and store it in memory
Grab the record type from the store
Make a new instance of the store record type, and pass in the data object from the selected record. The data object is equivalent to the object literal if you were making a new record by hand (see my original 'add button' code for details)
Alter the start_time value of the new object that was created to today's date and time
Insert record into grid
Happy time!
Please critique this code and let me know if there's a better way to do it. Thanks!
Update 2:
handler: function(grid, rowIndex, columnIndex) {
grid.stopEditing();
var recordClone = grid.store.getAt(rowIndex).copy();
Ext.data.Record.id(recordClone);
if(recordClone) {
grid.store.add(recordClone);
}
}
I updated the code to use the copy and add methods and it does work. However, when I call the add() method I get a 'e is undefined error' but when I refresh the page, the record is inserted despite the error message. Ideas?
Looks to me like it's not constructing the tce object correctly. This line is where you should set your breakpoint:
tce = new timecardEntry(currentRecord.data);
It seems like it's successfully constructing a timecardEntry that somehow isn't a proper record. Having a poke at just what it is constructing may help.
If it's not apparent from poking at it that way why it's up the spout, try doing it like this, like #timdev suggests:
var store = grid.store,
currentRecord = store.getAt(rowIndex),
tce;
tce = currentRecord.copy();
tce.set('start_time', new Date().format('Y-m-d H:i:s'));
if (tce) {
store.add(tce);
}
(You should be able to call grid.store.add(tce) instead of insert as you're inserting at the end.)
Really well-written question. Good bit of relevant code, and nice explanation of what you're stuck on. Unfortunately, I don't see anything that stands out.
Your script looks mostly right. You're close to being where you need to be.
Below is an answer that I just typed out, and then reread your question (and code), and thought a little better of. You probably know this stuff already, but it's here for anyone else. It's also relevant, because I don't see any errors in the relevant part of what you did, so you probably blew it somewhere else. The questions are: where and how?
Hopefully someone less exhausted than i am will come along and find the obvious problem, in the meantime, here's my scrawl about how to debug in Ext and why:
You've left something important out, or overlooked it. That error message you mentioned: Uncaught TypeError: Cannot read property 'data' of undefined -- where is that happening? It looks like it's not happening in the code you posted, it might very well be happening down in the bowels of ExtJS.
So, fire up FireBug, and turn on the "break on error" feature. Make your error happen, and start looking at the "stack" pane over on the right (usually). The stack will show you how you got to where you are.
Unless I'm missing something (and since I'm just running your code in my head, I very well may be), there's probably something misconfigured elsewhere that's causing your bug.
But as with any program (and especially with ExtJS, in my experience), the debugger is your friend.
Do this:
Use the -debug version of ext-base.js and ext-all.js (until it all works)
Use firebug, and "break on errors"
Learn to use the debugger to step through code, and to watch the data you're operating on.
Don't give up when you find yourself deep in the bowels of ExtJS. If you try, you'll start to get a sense of WTF is going on, and even if you don't understand it all, it will start to give you hints about where you screwed up.