Develop Reference

OnAction event on tinymce editor v6 for custom button is not working

I am trying to get the click event of the tinymce custom button while building a plugin.
My code snippet looks like:
const openDialog = () => editor.windowManager.openUrl({
type: 'panel',
title: 'Example plugin',
url : '/vendors/tinymce/plugins/gallery/dash.html',
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'custom',
text: 'Select',
buttonType: 'primary',
onAction: function(api) {
const data = api.getData();
console.log('Custom button clicked');
/* Insert content when the window form is submitted */
editor.insertContent('Title: ' + data.title);
api.close();
}
}
],
Can Anyone help me with this?
I tried reading the tinymce docs where it clearly states onAction is a way to go but it is still not working

const openDialog = () => editor.windowManager.openUrl({
type: 'panel',
title: 'Example plugin',
url : '/vendors/tinymce/plugins/gallery/dash.html',
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'custom',
text: 'Select',
buttonType: 'primary',
onAction: function(api) {
const data = api.getData();
console.log('Custom button clicked');
/* Insert content when the window form is submitted */
editor.insertContent('Title: ' + data.title);
api.close();
}
}
],
});
tinymce.PluginManager.add('yourparams', function(editor, url) {
editor.addButton('your_button_name', {
text: 'Open Dialog',
icon: false,
onclick: function() {
openDialog();
}
});
});
TinyMCE plugin defined using tinymce.PluginManager.add(), this method add new button in editor toolbar with respect to editor.addButton() method, onclick open the OpenDialog() function when you clicked on it.

Submit form in bootbox dialog that was dynamically loaded

I'm using Bootbox Dialog to load a php page in the following manner:
$('.create_special').on('click', function(event) {
var loadurl = $(this).attr('data-load-url');
var title = $(this).attr('data-title');
$.get(loadurl, function(data) {
bootbox.dialog({
message: data,
title: title,
buttons: {
cancel: {
label: "Cancel",
className: "btn-default",
},
submit: {
label: "Submit",
className: "btn-primary",
callback: function() {
console.log($(this).closest("form"));
$(this).closest("form").submit();
}
}
}
});
});
});
via:
<td><?php echo htmlentities($user['email']); ?></td>
As you can see, I want to be able to have two buttons at the bottom of the modal. One to cancel and close, and one to submit the form in the php file that the dialog loaded. I am having trouble figuring this out, and don't really know where to go from here. As the dialog is getting loaded afer DOM ? I am trying to avoid having to specifically submit the form as I will use this function for other php files with different form names. So it would be nice if I could do something as simple as this closest...etc.

I can't close dialog in jointJS

Here is and a screenshot I uploaded for you I have edited my post, according to your advice in comments, posting my updated version of my code.I enclose in /**/ my original post for helping you.
/*In jointJS I try using a `ui.dialog` to delete all my graph with the following code:
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
After pressing OK button I successfully delete my graph but my dialog still remains without being able to delete it.
Any help please? */
Here is my updated code which unfortunately still doesn't work as expected. I remind you that in this dialog form which displays an OK and Cancel button I want the following ones:
1)When pressing OK I want to :
a)Delete my current graph And
b)Close my dialog
2)When pressing Cancel I want to:
Close my dialog (Which in my initial version worked successfylly with dialog.close)
openNew: function() {
// By pressing Create New Process button, a popup form asks for
//our confirmation before deleting current graph
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
//Since in 'action:ok' of dialog.on the 3rd parameter is used in the
//callback of multi_hand we must pass dialog and graph both together.To do so
//we enclose them in an object named together and we pass it instead
together= {dialog : dialog, graph : this.graph};
//Since jointJS supports assigning multiple events for same handler
//BUT NOT multiple handlers for the same event we create function multi_hand
multi_hand: function (together)
{
together.graph.clear();
together.dialog.close();
}
dialog.on('action:ok', multi_hand, together);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
By using this new code my joinjtJS project crashes unexpectedly.
How will I make OK button work please?

The third argument in dialog.on is the context passed into the callback function (2nd argument). It says, what is bind to this in the callback function.
In your example is not clear where the graph is defined, if it is really this.graph. However, you can simply do it like in the following example, without passing the context:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 650,
height: 400,
model: graph,
linkPinning: false
});
var r = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
}).addTo(graph);
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Confirm',
content: '<b>Are you sure?</b>',
buttons: [
{ action: 'yes', content: 'Yes' },
{ action: 'no', content: 'No' }
]
});
dialog.on('action:yes', function() {
graph.clear();
dialog.close()
});
dialog.on('action:no', dialog.close, dialog);
dialog.open();
if the graph is defined on this:
dialog.on('action:yes', function() {
this.graph.clear();
dialog.close();
}, this);

I solved my problem this way and I just want to share it with all of you as a reference.
openNew: function() {
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:ok action:cancel', dialog.close, dialog);
dialog.open();
},

Unable to redirect and call a function when clicked on hyperlink

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;
}

jquery grabs the previous value instead of current one

I cannot make jquery to grab the current value of textarea. I have several posts and each of them has "write a review" button. When I select on the button of first post, it shows the dialog box with first post title and a textarea. When I write something in the appeared textarea and press submit, it alerts nothing. Then I am clicking the same button on the first post and it shows me dialog box with the title of second post and when I type something in the textarea and press submit, it alerts the text which I typed in the previous dialog box. Could you please have a look on my code and help me to find my mistake.
Here is my view:
$data = array(
'name' => $places_id,
'class' => 'review',
'content' => 'Write a Review'
);
echo form_button($data);
<div id="write_review">
<h3><?php echo $title; ?></h3>
<textarea rows='6' cols='90' maxlength='600' id="review_text"></textarea>
</div>
Here is my JS file:
$(document).ready(function () {
$(".review").click(function () {
var self = this;
var places_id_review = $(self).attr("name");
$("#write_review").dialog({
title: "Write a Review",
modal: true,
draggable: false,
width: 600,
height: 300,
buttons: [{
text: 'Submit',
click: function () {
var review_text = $("#review_text").val();
alert(review_text);
$.post('filter/post_review', {
places_id_review: places_id_review,
review_text: review_text
}, function (data) {
alert("ok")
}, "json");
}
}, {
text: 'Cancel',
click: function () {
$(this).dialog('close')
}
}]
});
});
});

It happens because there are duplicates of your dialog in DOM
at least you can get your value like this:
var review_text = $("#review_text", this).val(); //to prevent lookup in while DOM
But you better control your dialog's duplicates( using 'destroy' on close event 'close'):
$(".review").click(function () {
var self = this;
var places_id_review = $(self).attr("name");
$("#write_review").dialog({
title: "Write a Review",
modal: true,
draggable: false,
width: 600,
height: 300,
close:function(){ $(this).dialog('destroy'); }, // DELETE dialog after close
buttons: [{
text: 'Submit',
click: function () {
$(this).dialog('close'); // do not forget close after submit
var review_text = $("#review_text").val();
alert(review_text);
$.post('filter/post_review', {
places_id_review: places_id_review,
review_text: review_text
}, function (data) {
alert("ok")
}, "json");
}
}, {
text: 'Cancel',
click: function () {
$(this).dialog('close');
}
}]
});
});