We Keep Coding

How to open/close sidebar in TinyMCE

In the official TinyMCE docs is nothing written about the possibility to manually open/close the sidebar:
https://www.tinymce.com/docs/advanced/creating-a-sidebar/#editorsidebarapi
Can anybody help me? I think it must be something like this:
editor.getSidebar('mysidebar').close();
I need it, because I want to close my custom sidebar in my file browser callback.

Use tinymce.activeEditor.execCommand('togglesidebar', false, 'sidebarname'); to toggle the sidebar. You could place event dispacthers and listeners to know if it is currently opened or closed:
tinymce.PluginManager.add('cheminfo', function (editor, url) {
editor.ui.registry.addSidebar('cheminfo', {
tooltip: 'My sidebar',
icon: 'comment',
onShow: function (api) {
var event = new CustomEvent('tinymce-chem-sidebar', {'detail': true});
window.parent.document.dispatchEvent(event);
},
onHide: function (api) {
var event = new CustomEvent('tinymce-chem-sidebar', {'detail': false});
window.parent.document.dispatchEvent(event);
}
});
});
Then (I am using React):
// detect sidebar state open/close
document.addEventListener('tinymce-chem-sidebar', function (e) {
setOpen(e.detail);
});
PS: Make sure the sidebar's name is lowercase or it won't work

adding to #Kristiyan Tsvetanov's solution, an alternative to using event listeners in determining open/close state of sidebar, the following code can be used:
function is_sidebar_open() {
//class names taken from using inspect on the
//sidebar area of the editor in a browser session
if ($(".tox-sidebar__slider").hasClass("tox-sidebar--sliding-closed")) {
return false;
}
else {
return true;
}
}
function open_sidebar(){
if (is_sidebar_open() == false){
tinymce.activeEditor.execCommand('togglesidebar', false, 'sidebarname');
}
}
function close_sidebar(){
if (is_sidebar_open() == true){
tinymce.activeEditor.execCommand('togglesidebar', false, 'sidebarname');
}
}

Jquery- dialog is not running my function

I have a table where values are filled based on a sql query. The values populate in the dialog box but when I click on a record, its not running my function. I want my function to only select the record id I have clicked on.For now I have put an alert in the function just to see if my function works and its not showing anything. My onClick = "addlink();" is not working.
function addreferral()
{
$.getJSON('libs/getsoldreferrals.php', function(data) {
$('#soldlist tr').not(':first').not(':last').remove();
$.each(data, function(key, val)
{
$('#soldlist').append('<tr><td><span id="myreferral" style="cursor:pointer;" onClick = "addlink();" >'+val.id +'</span></td><td></td><td>' + val.office + '</td><td></td><td>'+val.clientdetails+'</td><td></td><td>'+val.buyerorseller+'</td><td></td><td></td><td>'+val.address+'</td><td> </td></tr>'+'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+'<tr><td></td></tr>');
});
$('#soldlist tr').first().after();
});
var dialog, form
window.addlink = function addlink() {
alert("Hello");
}
dialog = $( "#dialog-form-referral" ).dialog({
autoOpen: true,
height: 450,
width: 800,
modal: true,
buttons: {
Cancel: function() {
dialog.dialog( "close" );
}
},
});

You have a syntax error. You forgot the closing quotation mark in your style tag.
Change the Markup of your span to the below:
<span id="myreferral" style="cursor:pointer;" onClick = "addlink();">
Pretty sure that should do it.

Try with onclick (small C), and not onClick. Also, try not to mix JavaScript with HTML.
HTH's
Stanko.

On Click event when tag clicked on not firing. How to capture event

I am using the following plugin for creating tags. Tags are being created fine, Its just when I click on a tag, the tag click event does not fire. Please help.
aehlke.github.io/tag-it/‎
$('#myTags').tagit({
select: true,
sortable: true,
triggerKeys: ['enter', 'comma', 'tab'],
onTagClicked: function (evt, ui) {
addEvent('onTagClicked: ' + eventTags.tagit('tagLabel', ui.tag));
}
});
<ul id="myTags"></ul>
<div id="events_container"></div>

I assume you are using addEvent function which is a custom function used in the demo here.
var addEvent = function(text) {
$('#events_container').append(text + '<br>');
};
You basically don't need this function it was just used by the demo to show the event clicked. And probably you forgot to copy paste that function ;)
Try to alert in the onTagClicked
$('#myTags').tagit({
select: true,
sortable: true,
triggerKeys: ['enter', 'comma', 'tab'],
onTagClicked: function (evt, ui) {
alert("You clicked me");
//do whatever you want to do here
}
});
FIDDLE

Error when inline Javascript is moved to external file - how can I fix this?

There are dozens of similar questions here on stackoverflow, but I can't find an answer that works. I have a couple of Javascript functions that I'm using repeatedly in multiple pages, so I thought it would be a good idea to move them to external file(s). But when I do, they don't work.
Here are the two functions I currently have in (separate, for now) external files:
function MessageDialog(obj, title, dialogText) {
//add the dialog div to the page
$('body').append(String.Format("<div id='messageDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
//create the dialog
$('#messageDialog').dialog({
modal: true,
resizable: false,
draggable: false,
close: function(event, ui) { $('body').find('#messageDialog').remove(); },
buttons:
{
'OK': function() {
$(this).dialog('close');
}
}
});
}
//Confirmation dialog
function ConfirmationDialog(obj, title, dialogText, okButtonText, cancelButtonText) {
var confirmed = false;
if (!confirmed) {
//add the dialog div to the page
$('body').append(String.Format("<div id='confirmationDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
//create the dialog
$('#confirmationDialog').dialog({
modal: true,
resizable: false,
draggable: false,
close: function(event, ui) { $('body').find('#confirmationDialog').remove(); },
buttons:
{
$okButtonText: function() {
$(this).dialog('close');
confirmed = true;
if (obj) obj.click();
},
$cancelButtonText: function() {
$(this).dialog('close');
}
}
});
}
return confirmed;
}
I'm calling ConfirmationDialog() from an OnClientClick event (in ASP.NET):
MessageDialog() is called from code-behind if there's an error on the btnDelIncident_Click event:
private void DisplayMessageDialog(string msgTitle, string msgText)
{
StringBuilder msg = new StringBuilder();
msg.AppendLine("<script type='text/javascript'>");
msg.AppendFormat(" MessageDialog(this, '{0}', '{1}');" + System.Environment.NewLine, msgTitle, msgText);
msg.AppendLine("</script>");
ClientScript.RegisterStartupScript(this.GetType(), "messageDialog", msg.ToString());
}
I'm not getting an error from the ConfirmationDialog() call (though the dialog is not appearing), but the MessageDialog() call (from the code-behind) results in an "Uncaught ReferenceError: MessageDialog is not defined" in the Javascript console.
I'm including the two external Javascript files in the <head> tag, and they're after the jQuery includes:
<script type="text/javascript" src="/Scripts/ConfirmationDialog.js"></script>
<script type="text/javascript" src="/Scripts/MessageDialog.js"></script>
I've also tried putting these two <script> tags at the end of the page, but it made no difference. What am I doing wrong?
EDIT: I was able to solve the dialog box problem by wrapping the functions in (function($) { }); as Neil suggested. Here's the final, working function (declared in an external .js file):
//Confirmation dialog
(function($) {
var confirmed = false;
ConfirmationDialog = function(obj, title, dialogText, okButtonText, cancelButtonText) {
if (!confirmed) {
//add the dialog div to the page
$('body').append(String.Format("<div id='confirmationDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
//create the dialog
$('#confirmationDialog').dialog({
modal: true,
resizable: false,
draggable: false,
close: function(event, ui) { $('body').find('#confirmationDialog').remove(); },
buttons:
[{
text: okButtonText,
click: function() {
$(this).dialog('close');
confirmed = true;
if (obj) obj.click();
}
},
{
text: cancelButtonText,
click: function() {
$(this).dialog('close');
}
]}
});
}
return confirmed;
};
})(jQuery);

You definitely do not want to place script tags in an external JavaScript file. Script tags are HTML elements and a .js file is not HTML. Try wrapping your code in an Immediately Invoked Function Expression:
(function() {
// your code here
})();
If you are binding function calls to events on DOM nodes, such as 'click' or 'hover' you should make sure the DOM is ready before executing those bindings. jQuery has a method called .ready() which can be used for this:
$(document).ready(function() {
});

This should help. You need to wait until the DOM is loaded before referencing an element in the MessageDialog client-side method
private void DisplayMessageDialog(string msgTitle, string msgText)
{
StringBuilder msg = new StringBuilder();
msg.AppendLine("<script type='text/javascript'>");
msg.AppendFormat("jQuery(function($) { MessageDialog(this, '{0}', '{1}'); });" + System.Environment.NewLine, msgTitle, msgText);
msg.AppendLine("</script>");
ClientScript.RegisterStartupScript(this.GetType(), "messageDialog", msg.ToString());
}

Passing control values to partial view rendered in a popup with Asp.net MVC3

I have created a popup to load a partial view. I want to pass control values from the parent page to the partial view rendered in the popup. How can I pass the values?
Below is the the code used to open the popup. ModifyAgRule is the div id and AuthorityGridModify is the name of action method used to render the partial view.
Some more info:
I have a webgrid in the parent page, when the user selects one row in this grid and clicks on the modify button a popup should appear with the selected values present in dropdowns and textboxes.
<script type="text/javascript">
$(document).ready(function () {
//define config object
var dialogOpts = {
title: "Modify Rule",
modal: true,
autoOpen: false,
height: 500,
width: 500,
open: function () {
//display correct dialog content
$("#ModifyAgRule").load("AuthorityGridModify");
}
};
$("#ModifyAgRule").dialog(dialogOpts); //end dialog
$('#Modify').click(function () {
$("#ModifyAgRule").dialog("open");
return false;
});
});
</script>

You can pass data to your view in JSon format like this
$("#ModifyAgRule").load('#Url.Action("AuthorityGridModify")',
{ 'propertyName' : 'propertyValue',
'propertyName2' : 123 });
in your controller
public ActionResult AuthorityGridModify(string propertyName, int propertyName2)
{
// propertyName´s value is propertyValue
return View();
}
hope this helps!