Develop Reference

Handle Ctrl+Z (undo/redo) for text editor in single page application

I have single page application which consists of a text editor (kendo Editor). The data in the text editor are replaced somewhat like this
$("#editor").kendoEditor({
resizable: {
content: false,
toolbar: true
}
});
var editor = $("#editor").data("kendoEditor");
var setValue = function () {
editor.value($("#value").val());
};
see demo here.
The Issue:
So I am changing record of A then save it. Then I switch to B. Now if I do Ctrl+Z the text editor shows the record of A. How can I prevent this behavior.
Is a way to remove the undo history on demand, or something which would prevent the text editor replacing text with previous record?

Updated: Better Solution.
I contacted Kendo devs and they provided a neat solution.
var editor = $("#editor").data("kendoEditor");
editor.undoRedoStack.clear();
Note: this function is not documented in the public api and is
may change in newer version. This is working as of version
2016.3.1118
demo
Old Solution.
I ended up destroying and rebinding the widget to the textarea.
http://dojo.telerik.com/OjIZe
$("#destroy").click(function(){
var copy=$("#editor").clone();
$("#editor").data('kendoEditor').wrapper.find("iframe").remove();
$("#editor").data('kendoEditor').destroy();
$("#test").empty();
$("#test").append(copy);
$("#editor").kendoEditor({ resizable: {
content: false, toolbar: true
}
});
});

CKEditor v4 : Dynamic title of dialog in homemade plugin

I'm using CKEditor v4 and I made an homemade plugin (tu upload image and edit informations). 2 tabs (upload and edit informations) work good, but I want to set title of dialog using condition (new image or edit existing image). Is there a way to give a parameter to dialog fuciton when I call CKEDITOR.dialog.add or change the title on the onShow event or other issue ?
Thx a lot for your help and sorry for my frenchy english !

I had the same problem and couldn't find an 'official' way, I was however able to change the title dynamically using following workaround (this is a CKEDITOR.dialog element):
this.getElement().getFirst().find('.cke_dialog_title').getItem(0).setText('[insert new title here]')
Basically, you go via the actual DOM of the dialog element (getElement().getFirst()), retrieve the title DOM element (find('.cke_dialog_title').getItem(0)), and set the text there. This relies solely on the CSS class name of CKEditor, so isn't really stable, but it's a start.

$(dialog.parts.title.$).text(someTitleText)
in short:
CKEDITOR.dialog.add('dynamictitle', function (editor) {
...
...
return {
title: "initial title here",
...
...
// set title onLoad(),or onShow()
onLoad: function () {
var currentTitle = editor.config.dynamictitle;
var dialog = CKEDITOR.dialog.getCurrent();
$(dialog.parts.title.$).text(currentTitle)
}
}
});
...
in your page:
CKEDITOR.replace('<ckeditorelementid>', {
.....
.....
dynamictitle: <title text value>,
.....
.....
});

Unable to create a JQuery Dialog

I'm trying to get a JQuery dialog to appear and immediately got the error $(...).dialog() doesn't exist. My googling has revealed that this is usually caused by loading 2 different JQuery libraries but the only script tags in my file are for JQuery and Twitter Bootstrap. Here's my code (including my dialog code adapted from How to implement "confirmation" dialog in Jquery UI dialog?)..
<script src="jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
...
<script>
$(function(){
$("#dialog").dialog({
autoOpen: false,
modal: true
});
$(".deleteLink").click(function(e){
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Yes" : function(){
window.location.replace(targetUrl);
},
"No" : function(){
$(this).dialog("close");
}
}
});
});
});
</script>
Is there any other reason that I might be getting this error besides loading multiple libraries or does bootstrap maybe provide interference of some kind?

You are attempting to use the dialog() method and properties of jQueryUI, yet you have included the Bootstrap library. To use the Bootstrap dialog, the method is called modal().
Bootstrap Modal docs
Note that the properties are completely different. If you want to use the jQuery UI dialog() method, you would need to include the jQueryUI library, however be aware that this sometimes causes incompatibilities with Bootstrap, in both the JS and CSS.

Combining multiple jQuery functions

Is there any way to combine all of this to reduce the amount of js? This is just an example of some of the jquery dialogs I have in my site, there are a few more too. Thanks.
//initiate Search refinement dialog here
$("#chooseMoreCnt, #chooseMoreCat, #chooseMorePr").dialog({
bgiframe: true,
autoOpen: false,
width: 500,
modal: true,
open: function(type, data) {
$(this).parent().appendTo(jQuery("form:first"));
}
});
//trigger country dialog
$('a.chooseMoreCnt').click(function() {
$('#chooseMoreCnt').dialog('open');
return false;
});
//trigger category dialog
$('a.chooseMoreCat').click(function() {
$('#chooseMoreCat').dialog('open');
return false;
});
//trigger price dialog
$('a.chooseMorePr').click(function() {
$('#chooseMorePr').dialog('open');
return false;
});

If your links point to the IDs of the dialog elements, and if you add a meta class choose to each of them, you could combine the last three calls to:
$('a.choose').click(function() {
$(this.hash).dialog('open');
return false;
});
The HTML for one of those links is the most semantically correct and even works with JS disabled (assuming, the dialogs are there, then):
Choose more categories
The this.hash part explained:
this in the context of a jQuery event handling function is always the element, that the event appeared at. In our case, it's the clicked link. Note, that it's the DOM node, not a jQuery element.
this.hash: DOM nodes, that correspond to HTML <a/> elements, have certain special properties, that allow access to the target they're linking to. The hash property is everything after (and including) an # character in the URL. In our case, if the link points to the elements that should become dialogs, it's something like the string "#chooseMoreCnt".
$(this.hash) is the jQuery function called for, e.g., "#chooseMoreCnt", which will select the appropriate div.
For the dialog initialization, I would also go for classes:
$(".choose_dialog").dialog({
bgiframe: true,
autoOpen: false,
width: 500,
modal: true,
open: function(type, data) {
$(this).parent().appendTo(jQuery("form:first"));
}
});
Yes, it means to change the markup, but it also provides you with the freedom to
add any number of dialogs lateron
add any number of openers to any dialog lateron
style all dialogs and links to dialogs consistantly with minimal CSS
without touching the Javascript anymore.
If the dialogs are initiated differently (as mentioned in the comments), then you could go for this part with CuSS's $.each() approach and read the appropriate width inside the function from an object defined elsewhere:
var dialog_widths = {'chooseMoreCat': 400, 'chooseMorePr': 300, /*...*/ };

This is what I would suggest. Specify a general DialogContent (say) class to all the divs and initialize them using:
$(".dialogContent").dialog({
bgiframe: true,
autoOpen: false,
width: 500,
modal: true,
open: function(type, data) {
$(this).parent().appendTo(jQuery("form:first"));
}
});
And ofcourse use Boldewyn's solution for click event (it is better to use live() IMHO if things are getting dynamically generated). This way you take care of all initializations and click events with way less code.
HTH

well, this is a little complicated to minimize.
do you have more than 3 dialogs? If yes you can do something like this:
var dialogs=["chooseMorePr","chooseMoreCat","chooseMoreCnt"];
$.each(dialogs,function(i,v){
$('a.'+v).click(function(){$('#'+v).dialog('open');});
});

In order to optimize performance, you should use live when connecting to several elements. Below is my approach to the problem. The solution is dynamic (add as many dialogues as you want to) and very speedy.
Remember to change #anyParentOfTheLinks into the parent div or in worst case remove it and jQuery will use document instead.
var dialogues = ['#chooseMoreCnt', '#chooseMoreCat', '#chooseMorePr'];
$(dialogues.toString()).dialog({
// ...
});
$('a', '#anyParentOfTheLinks').live('click', function(){
// Cache for performance
var $this = $(this), len = dialogues.length;
for(var i = 0; i < len; i++)
if($this.is('.' + dialogues[i].substr(1))) {
$this.dialog('open');
break;
}
return false;
});

jQuery UI Dialog and Flash in IE

I've been trying to get Zero Clipboard and jQuery UI Dialog to play nice together, and it's proving to be rather difficult.
Zero Clipboard allows copying to clipboard from Javascript by placing a transparent Flash movie over a button, so that the user clicks on the Flash when he tried to click the button. This works nicely and cross-browser as you can see in the demo page.
However, when trying to use this in a jQuery UI Dialog box something seems to go wrong.
First, I discovered that the flash element must be placed inside the dialog element, otherwise Chrome and IE refuse to respond to click events. This means I can't use the glue convenience method, but that's OK.
However, now IE for some reason won't accept the setText method on the Flash element.
An example of what I did is here. My code starts around line 300, and the most relevant lines are:
$("#showme").dialog({autoOpen: false, width: 550, height: 200});
$("#showme").bind("dialogopen", function() {
if($("#clipflash").length == 0) {
var btn = $("#d_clip_button");
$("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
.css(btn.position())
.width(btn.width())
.height(btn.height())
.html(clip.getHTML(btn.width(), btn.height()))
.appendTo("#showme");
}
});
I colored the div red so it's easier to spot and set its z-index to 9999, just to be safe. I then set the position and size to cover the "button", and add the HTML for the Flash element with clip.getHTML().
I've been working on this for several hours now, so any help would be greatly appreciated.
Almost forgot: my problem is that IE7 says "Object does not support this property or method" inside the Zero Clipboard code.
UPDATE
powtac's comment points to something that looks really promising:
I forgot the own golden rule: In
order for the Flash ExternalInterface
to work in IE 7, you have to stuff the
EMBED/OBJECT HTML into the DIV element
AFTER it gets appended to the DOM. Stupid IE.
However, switching the lines .html(clip.getHTML(btn.width(), btn.height())) and .appendTo("#showme") didn't help. Even doing a setTimeout for adding the flash HTML later did not help. I feel like I'm really close, though...

OK, so powtac did point me in the right direction, but there was one element missing: using the jQuery html() function did not have the same effect as simply setting innerHTML. If would be nice if somebody could explain why.
So, the fixed code looks like this:
$("#showme").bind("dialogopen", function() {
if($("#clipflash").length == 0) {
var btn = $("#d_clip_button");
$("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
.css(btn.position())
.width(btn.width())
.height(btn.height())
.appendTo("#showme")
[0].innerHTML = clip.getHTML(btn.width(), btn.height());
}
});
Also, I forgot to put DOCTYPE in the example page, so the offsets are wrong in IE. My bad.

I adapted your answer to a reusable method, and fixed a few position issues (I had to add position:absolute, and use outerWidth() and outerHeight().
Demo.
function setupCopier(selector, buttonSelector, callback, opt_dialogSelector){
var copiedText = $(selector).text();
ZeroClipboard.setMoviePath('http://dl.dropbox.com/u/464119/Programming/javascript/libraries/ZeroClipboard/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
clip.setText(copiedText);
clip.addEventListener('complete', callback);
$(buttonSelector).each(function(){
clip.glue(this);
});
// Make sure Zero Clipboard is on top
$("#ZeroClipboardMovie_1").
parent().
css("z-index", 2000);
if (opt_dialogSelector) {
$(opt_dialogSelector).bind("dialogopen", function() {
if($("#clipflash").length === 0) {
var btn = $(opt_dialogSelector).find(buttonSelector);
$("<div id='clipflash' style='position:absolute; z-index: 9999' />")
.css(btn.position())
.width(btn.outerWidth())
.height(btn.outerHeight())
.appendTo(opt_dialogSelector)
[0].innerHTML = clip.getHTML(btn.outerWidth(), btn.outerHeight());
}
});
}
}
$(function(){
setupCopier('#copy-div', '.copy-button', function(){
alert("Copied");
}, '#dialog');
$("#open-dialog-button").click(function(){
$("#dialog").dialog("open");
});
$("#dialog").dialog({autoOpen: false, modal: true, resizable: false, draggable: false,
title: "Create your Free Personal Bar now", height:200, width:300});
});