Develop Reference

How can I detect onChange event in TinyMCE custom plugin it?

I'm trying to develop a custom TinyMCE plugin which will load the items for a selectbox list based on the options of another selectbox list. However, I cannot figure out how to detect any even on the selectbox list.
The documentation is almost entirely useless, as it provides no mention of custom plugin options - only the boilerplate code to start off.
How can I detect an onchange event when the select lists's selection is altered?
tinymce.PluginManager.add('custom', function(editor, url) {
var openDialog = function () {
return editor.windowManager.open({
title: 'Custom',
body: {
type: 'panel',
items: [
{
type: 'selectbox',
name: 'options',
label: 'Options',
items: [
{text: 'Primary', value: 'primay style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
onchange: function() {
alert('hi');
},
flex: true,
}, {
type: 'selectbox',
name: 'selection',
label: 'Selection',
items: [
],
flex:true,
}
]
},
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'submit',
text: 'Save',
primary: true
},
],
onSubmit: function (api) {
var data = api.getData();
/* Insert content when the window form is submitted */
editor.insertContent(data);
api.close();
}
});
};
/* Add a button that opens a window */
editor.ui.registry.addButton('custom', {
text: 'Custom',
onAction: function () {
/* Open window */
openDialog();
}
});
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration
*/
editor.ui.registry.addMenuItem('custom', {
text: 'Custom',
onAction: function() {
/* Open window */
openDialog();
}
});
/* Return the metadata for the help plugin */
return {
getMetadata: function () {
return {
name: 'Example plugin',
url: 'http://exampleplugindocsurl.com'
};
}
};
});

Gijgo Grid button click inside row.

I'm using Gijgo Grid and I have added a button to the grid rows using the cellDataBound event but I can't get the button click event to fire. Anyone any idea what the issue may be ?
CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('Subscribed' === column.field) {
if (record.Subscribed === '1') {
$displayEl.html('<Span style="color: green;">Subscribed</Span>');
}
else if (record.Subscribed === '0') {
$displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
}
}
});
$('#btnCompanyUserSubscribed').on('click', function (e) {
alert('Button has been clicked')
})

I think that would be best if you use column.renderer about this. You should assign the click event right after the creation of the element.
<table id="grid"></table>
<script>
var subscribeRenderer = function (value, record, $cell, $displayEl) {
var $btn = $('<button type="button" class="btn btn-danger">Renew</button>').on('click', function () {
alert('clicky');
});
$displayEl.empty().append($btn);
};
$('#grid').grid({
dataSource: '/Players/Get',
columns: [
{ field: 'ID', width: 56 },
{ field: 'Name' },
{ field: 'subscribe', renderer: subscribeRenderer }
]
});
</script>
The code above should be also useful with cellDataBound event.

Give the event click function inside the columns and use cellDataBound.Like this
reportGrid = $('#eventReportData').grid({
primaryKey: 'UserPrivilegeRequestsID',
autoLoad: false,
responsive: true,
bodyRowHeight: 'fixed',
dataSource: '/Admin/GetDiscrepencyReport',
columns: [
{
field: 'UserName', title: 'Trainer', sortable: true,
events: {
'click': function (e) {
var userName = e.data.record.UserName;
popupGrid(userName);
}
}
},
{ field: 'Organization', title: 'Organization', sortable: true },
{ field: 'Country', title: 'Country', sortable: true },
{ field: 'Action', width: 170, renderer: editManager }
],
params: { sortBy: 'UserName', direction: 'desc' },
pager: { limit: 10, sizes: [5, 10, 15, 20] },
});
reportGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('UserName' === column.field) {
$displayEl.html("<div data-toggle='modal' data-target='#myModal2' >" + record.UserName + "</div>");
}
});
function popupGrid(userName) {
alert(userName);
}

Make it a function and do it like this:
$(document).ready(function () {
CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('Subscribed' === column.field) {
if (record.Subscribed === '1') {
$displayEl.html('<Span style="color: green;">Subscribed</Span>');
}
else if (record.Subscribed === '0') {
$displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
$('#btnCompanyUserSubscribed').on('click', CompanyUserSubscribed);
}
}
});
});
function CompanyUserSubscribed() {
alert('Button has been clicked');
}

you can create your button this way:
$(document).ready(function () {
function Edit(e, type) {
alert("Button was clicked for row: " + e.data.record.recid)
}
grid = $("#myGrid").grid({
dataKey: "recid",
uiLibrary: "bootstrap",
dataSource: //SomeURL,
columns: [
{ field: 'recid', title: 'RecordID', width: 20, resizable: true, align: 'center' },
{ title: 'Edit', field: 'Edit', width: 15, type: 'icon', icon: 'glyphicon-pencil', tooltip: 'Edit', events: { 'click': Edit }, align: 'center' }
]
});
});
Most important part is calling your Edit function here:
events: { 'click': Edit }

Extjs form submit

I searched hours and hours for a solution but can't find one. I want to submit something to a php api function. it looks like this:
/*global Ext:false */
Ext.onReady(function ()
{
var i = 0;
var form = Ext.create('Ext.form.Panel', {
title: 'base_entity_id',
bodyPadding: 5,
width: 350,
defaultType: 'textfield',
items: [{
fieldLabel: 'base_entity_id',
name: 'first',
allowBlank: false
}],
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
//only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
}
}],
})
var tabs = Ext.create('Ext.tab.Panel',
{
renderTo: 'tabs',
id: 'tabs',
itemId: 'tabs',
fullscreen: true,
renderTo: document.body,
items:
[
{
title: 'Home',
margin: 40,
items: [form],
},
{
title: 'Results',
itemId: 'Results',
listeners:
{
activate: function (tab)
{
if(i == 0)
{
var panel = Ext.create('Ext.tab.Panel',
{
id: 'tabs2',
width: window,
height: window,
renderTo: document.body,
items:
[
{
title: '1',
itemId: '1',
closable: true,
html: '10329u9iwsfoiahfahfosaofhasohflhsalkfhoihoi3riwoifhoiashfkhasofhosahfsahfahsfosafoisaiohfaoishfoihsaoifasoifsaifhsaoifasoihfoiahsfoihasfoihasoifoisfoihsafoihasfoiasoihasfoihaoifhaoihfoiahfoiaoaffoafoiafsaoafohaoh'
},
{
title: '2',
itemId: '2',
closable: true,
}
]
})
tab.add(panel);
tab.doLayout();
i = 1;
}
}
}
}]
})
});
But when i'm submitting i get no response, can someone help me with this? I dont know what the next steps are...

I have a simple application done with Ext JS/PHP and the following code worked for me:
myFormPanel.getForm().submit({
clientValidation: true,
url: 'updateConsignment.php',
params: {
id: myFormPanel.getForm().getValues().first
},
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
Source:
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.BasicForm-method-submit

Well, you have set no URL for your form, and the submit button doesn't have the submit method so I'm not really sure how this was supposed to work.
You will need to add the url config to your form:
Ext.create('Ext.form.Panel', {
title: 'base_entity_id',
method: 'POST',
url: 'myBackEnd.php' // Or whatever destination you are using for your backend.
...
});
Also, I saw that you are using formbind: true and later checking if the form was valid, one action renders the other unnecessary, so choose one, there is no need for both!
Add this your button handler:
form.submit({
params: {
id: form.getForm().getValues().first
},
success: function(form, action) {
Ext.Msg.alert('Success', 'Your form was submitted successfully');
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
}
});
Then you should check for $_POST['id']
For more information on form methods and configurations check this doc: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Basic

tinymce, get input field value from dialog box with click button on the main window

I know, no one uses tinymce in this site. Because I asked 2 question before related tinymce. No one visited the pages. But again, I have a problem. I coded like this:
editor.addButton('site_link', {
icon: 'fa-heart',
tooltip: 'Internal link',
onclick: function() {
editor.windowManager.open({
file : url + '/link.php',
width : 500,
height : 200,
title: 'Internal link',
buttons: [
{
text: "Get Link",
classes: 'widget btn primary',
id: "link",
onclick: function() {
var link = $('#bag_link').val();
alert(link);
}
},
{
id: "close",
text: 'Kapat',
onclick: 'close'
}
]
});
}
});
And the "link.php" page is like this:
When click "Get Link" button, I want to get values form elements which located in the "link.php". But I did not manage it. Could you help me ? How can I do this?

I had to wrestle through this too, but i came up with something like this.
Instead of calling the windowmanager i had the following inside the onclick function:
function showDialog()
{
var var1, var2;
// do whatever you need here
var win = tinymce.ui.Factory.create({
type: 'window',
layout: "flex",
pack: "center",
align: "center",
onClose: function() {
ed.focus();
},
onSubmit: function(e) {
var x,y,z;
e.preventDefault();
// read Field!!!!!
x = win.find('#my_content_field').value();
// Do whatever you need here
// Dialog schließen
win.close();
},
onPostRender: function(){
ed.my_control = this;
},
buttons: [
{
text: "Paste",
onclick: function() {
win.submit();
}},
{
text: "Cancel",
name: 'cancel',
disabled: false,
onclick: function() {
win.close();
}}
],
title: 'my title',
items: {
type: "form",
padding: 20,
labelGap: 30,
spacing: 10,
items: [
{
type: 'textbox',
multiline: true,
name: 'my_content_field',
value: 'standard text'
}
]
}
}).renderTo().reflow();
};

Creating static nested/child table with jtable plugin

Is anybody who used jtable plugin and create static nested tables inside their parents table? In this code $("#Table TBODY tr td:first-child") selector does not exist in moment when child table loading because he was loading her content before parent #Table load and create placeholder for his child -> $(#Table TBODY tr td:first-child) selector. Exaple in http://www.jtable.org/Demo/MasterChild is not same.
function loadCaloriestable() {
var d = $.Deferred();
$('#Table').jtable({
paging: true, //Enable paging
pageSize: 5, //Set page size (default: 10)
sorting: true, //Enable sorting
defaultSorting: 'Name ASC', //Set default sorting
actions: {
listAction: '/MNR/Fun'
},
fields: {
Total: {
title: 'Total',
width: '10%'
},
Goal: {
title: 'Goal',
width: '10%'
},
Remains: {
title: 'Remains',
width: '10%'
},
//-----------------
//CHILD TABLE DEFINITION
Days: {
width: '30%',
sorting: false,
edit: false,
create: false,
display: function () {
$('#Table').jtable('openChildTable',
$("#Table TBODY tr td:first-child"),
{
title: 'Dayssss',
defaultSorting: 'Name ASC', //Set default sorting
actions: {
listAction: '/Patient/Days'
},
fields: {
Day1: {
title: 'Daya',
width: '18%'
},
Day2: {
title: 'Dayy',
width: '18%'
}
}
}
, function (data) { //opened handler
data.childTable.jtable('load');
}
);
}
}
//---------------------
}
});
$('#Table').jtable('load');
}

You didn't create something to display in Days field.
Days: {
width: '30%',
sorting: false,
edit: false,
create: false,
display: function (){
var $img = $("<button title='View Days'></button>");
$img.click(function(){
$('#Table').jtable('openChildTable',$img.closest('tr'),{
title: 'Dayssss',
defaultSorting: 'Name ASC',
actions:{
listAction: '/Patient/Days'
},
fields: {
Day1: {
title: 'Daya',
width: '18%'
},
Day2: {
title: 'Dayy',
width: '18%'
}
}
},function (data) { //opened handler
data.childTable.jtable('load');
});
});
return $img; //<== Return $img to display in cell
}
}