We Keep Coding

On rare occasions a jQueryUI accordion object is undefined

Once in a while our website generates an internal error message about an object being undefined. We are using JQueryUI. Here is an example: "TypeError: X.accordion is not a function". The line of code triggering the error is in a minified version of jquery. The non-minified code looks as follows:
var $help = $('#help,#help2');
$help.accordion(
{
autoHeight: false,
navigation: true,
header: '.helpItem',
icons: false,
heightStyle: "content"
});
We have not been able to reproduce the error, but our production system generates the error several times a week.
You can see the function without having to log in to our website using the following instructions:
https://www.rephunter.net/manufacturers-sales-reps-find
Navigate down to the search box
Click on the spyglass.
On the results page, there is an accordion near the top, left of the page, which shows up briefly, but can be re-opened by clicking on "Show Help for The Page".

Put the script tag at the bottom of your page or in a $(document).ready() :
var $help = null;
$(document).ready(function(){
$help = $('#help,#help2');
$help.accordion(
{
autoHeight: false,
navigation: true,
header: '.helpItem',
icons: false,
heightStyle: "content"
});
});

showModalDialog deprecated Chrome37, other suggestions?

Does anyone have any viable suggestions for the replacement of the showModalDialog() functionality in Chrome 37? I understand that there is the path until May 2015, but that's not 'viable' in my opinion, and if I can avoid changing everything to window.open() functions that would be great.

Do you have some of the code you are tying use? I see you've tagged jQuery. So I will provide a jQuery answer.
You can use the following code to 'open' or 'show' a jquery Dialog
$(divSelector).dialog('open');
$(divSelector).dialog({
autoOpen: false,
width: 200,
modal: true,
closeOnEscape: true,
draggable: false,
resizable: false,
buttons: {'Ok': function(){
$(this).dialog('close');
}}
});
the .dialog('open') will trigger the dialog to open up. I am not sure how difficult it would be to wrap your dialog div in the $(divSelector).dialog tags and include the jQuery UI css and javascript into your application.

tinyMCE can no longer drag and drop images after upgrading from version 3 to version 4

My website was using the version 3 of tiny mce. One feature it had was that a user could drag an image into the editor, and it would automatically convert it to a base64 data-uri and insert it into the editor. I have just upgraded to version 4, and this functionality seems to be completely gone.
AFAIK, it was not a plugin or anything controlling this, just part of the default functionality, because I was still able to do it when initializing with minimal options, like this:
tinyMCE.init({mode: "none"});
tinyMCE.execCommand('mceAddControl', false, 'selector');
Was this feature removed from version 4, or is there a way to turn it back on?
I really want to upgrade to 4, but this is the only thing stopping me, as the image feature is crucial for my application.
Thanks!

If you want to enable the image drag & drop feature you have to do it explicitly with the code below.
tinymce.init({
...
paste_data_images: true
});

You have to add following property to enable drag and drop
tinymce.init({
selector: "#imgedit", // change this value according to your HTML
plugins: "paste",
menubar: "edit",
toolbar: "paste",
paste_data_images: true
});
and if you want to add drag and drop with insert url of image functionality then add below line of code
tinymce.init({
selector: "#imgedit", // change this value according to your HTML
toolbar: "image,paste",
plugins: "image,paste",
menubar: "insert,edit",
paste_data_images: true,
});

jQuery Load TinyMCE 4 On Demand

I am trying to use jQuery to load TinyMCE 4 on-demand from a CDN with no avail. I would like avoid loading TinyMCE when the page loads since it is a (relatively) bulky set of scripts, and instead I plan to trigger loading it when the user clicks a button. Here is what I have:
HTML:
...
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script>
...
jQuery:
...
if (typeof TinyMCE == 'undefined') {
$.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function() {
alert('Loaded!');
tinymce.init({
selector: 'textarea',
plugins: [
'autolink contextmenu image link table'
],
menubar: false,
statusbar: false,
toolbar: false
});
});
}
...
I can see that jQuery does indeed fetch the script, as I can see the network activity in my inspector. The callback method is called, as I can see the Loaded! dialog appear, but TinyMCE dies not initialize. The JavaScript console does not show any errors.
Any idea on how I can get TinyMCE to initialize?
Thank you for your time.

Tinymce can not resolve baseURL when loading dinamically, so we have to hardcode it.
Add the following:
if (typeof tinymce == 'undefined') {
$.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function () {
window.tinymce.dom.Event.domLoaded = true;
tinymce.baseURL = "//tinymce.cachefly.net/4";
tinymce.suffix = ".min";
tinymce.init({
selector: 'textarea',
plugins: ['autolink contextmenu image link table'],
menubar: false,
statusbar: false,
toolbar: false
});
});
}

change your code as following:
if (typeof tinymce == 'undefined') {
$.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function () {
window.tinymce.dom.Event.domLoaded = true;
tinymce.init({
selector: 'textarea',
plugins: ['autolink contextmenu image link table'],
menubar: false,
statusbar: false,
toolbar: false
});
});
}
It is working for me.
more info https://stackoverflow.com/a/13361509/392526

Quote from original question:
Any idea on how I can get TinyMCE to initialize?
There is a problem with JQuery.getScript and tinyMCE, which I think is causing your trouble. It took me a day to figure it out, so I thought I should mention on it here.
$.getScript both adds and removes the script you're loading, executing it's content in the process. So, by the time your success function runs tinymce.init, the script tag no longer exists within your document.
tinymce.init on the other hand, looks through your document for that specific script tag in order to learn the base url to all its files. If it doesn't find it, it will get it from document.location instead.
I can't say what is the best way to solve this little problem. I found the following to do the trick for me (tinymce 4.2.7):
Open tinymce.min.js and search for the comment line ...
// Get base where the tinymce script is located
Look a few lines down where you'll find the statement ...
src = scripts[i].src;
... which should be altered to ...
src = "http://yourdomain.com/path/to/tinymce/tinymce.min.js";
I've identified the cause. But I'm not very happy with my solution. Maybe someone else will come up with a better one.

TinyMCE disable text input

I need to create an inline image editor using tinyMCE.
The basic principle has worked very well.
Wrap the image with an editable block level element.
Disable all buttons other than save and image.
Image augmented with a back end connected file manager.
The problem is the user can still type in the 'editable block level element'.
I need to ensure that this particular instance of the editor can only possibly be used to insert and edit a single image tag.
What is the most correct way of dealing with this?
EDIT -------------- Added code as suggested ---------------
Note that the following is just an tinyMCE init method that restricts the buttons and plugins. I am not sure that I can do what I want through the Init.
tinymce.init({
selector: ".CMS-image",
inline: true,
plugins: [
"save image filemanager"
],
inline: true,
toolbar: "image save",
menubar: false,
save_enablewhendirty: true,
save_onsavecallback: function () {
SaveCMSBlock(this.id)
}
});