Develop Reference

TypeError: datepicker_instActive is undefined in Jquery-ui Datepicker

I have built rails + angular app. In this I have used jquery-ui datepicker. I didn't find the solution why I get this error in console:
TypeError: datepicker_instActive is undefined
if(!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline?
datepicke...
in console.
My versions of css is jQuery UI Datepicker 1.11.2
and js is also the same. jQuery UI Datepicker 1.11.2
And when I move my cursor on datepicker widget no.of same error counts are increased.
I think issue is in this function of Jquery:
function datepicker_handleMouseover() {
if (!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? datepicker_instActive.dpDiv.parent()[0] : datepicker_instActive.input[0])) {
$(this).parents(".ui-datepicker-calendar").find("a").removeClass("ui-state-hover");
$(this).addClass("ui-state-hover");
if (this.className.indexOf("ui-datepicker-prev") !== -1) {
$(this).addClass("ui-datepicker-prev-hover");
}
if (this.className.indexOf("ui-datepicker-next") !== -1) {
$(this).addClass("ui-datepicker-next-hover");
}
}
}
Do you have face same issue ever? Or any idea how can I resolve it. I have used bootstrap-modal popup and in that form I used datepicker.

Same issue here in jQuery UI 1.11.4. We just created a bug ticket http://bugs.jqueryui.com/ticket/14578 and hope this is fixed soon by the jQuery team.
To workaround the problem, just
download only the datepicker component from the jQuery UI site via custom download (https://jqueryui.com/download/),
Extract jquery-ui.js from the ZIP archive and rename it, e.g. jquery-ui-1.11.4-datepicker-fix.js
embed the script right after your full jQuery UI script in your template(s), and
add a null-check to the first line of function datepicker_handleMouseover() as follows:
function datepicker_handleMouseover() {
if (!datepicker_instActive || !$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? datepicker_instActive.dpDiv.parent()[0] : datepicker_instActive.input[0])) {
...
}
No further changes to your code should be required. The patch can easily be removed when the bug has been fixed by simply removing the script tag from your templates.
Note that this workaround completely overwrites the original datepicker plugin.

I encountered this error when I included jquery-ui twice. Removing either instance resolved it.

After destroying a datepicker, calling refresh on another datepicker sets datepicker_instActive again, which might be a more acceptable workaround than modifying external plugin code:
// Delete a datepicker
$('#date1').datepicker('destroy');
// WORKAROUND: Refresh another datepicker until the following is fixed
// http://bugs.jqueryui.com/ticket/14578
$('.hasDatepicker').last().datepicker('refresh');
Here's an updated Fiddle from the ticket to demonstrate the workaround.

jQuery Mobile - Clearing all pages and adding new ones

I am dynamically generating pages and adding them to the page container (this part works).
I want to be able to clear of all the pages (empty the array) and re-add a new, dynamically generated list of pages.
I have tried:
$(document).find('div[data-role="page"]').remove();
$.mobile.pageContainer.empty();
Both of these calls remove the pages from the DOM, and I am able to re-add new pages, but when I attempt to call:
jQ.mobile.changePage(page1);
I am receiving the following error:
Uncaught TypeError: Cannot read property '_trigger' of undefined
On the line (in jQuery mobile):
fromPage.data( "mobile-page" )._trigger( "beforehide", null, { nextPage: toPage } );
Any help is appreciated.

Why is extjs calling refresh URL when I render an element?

I am creating a component, and then rendering it to a DOM object (a div).
//create component
this.p = this.createTablePanel();
//add it to the DIV
this.p.render(paveDIV);
Everything works find, it is just that there is a weird error in my console. It seems to want to go to a URL called 'refresh'.
GET http://this_is_where_my_local_is:8080/myWebSite/refresh 404 (Not Found)
This is created deep inside ExtJS :
GET http://lokalllhost:8080/creationWWW/refresh 404 (Not Found) ext-all-debug.js:13457 Ext.override.getStyle ext-all-debug.js:13457 Ext.override.isStyle ext-all-debug.js:13401 Element.override.fixDisplay ext-all-debug.js:18138 Element.override.setVisible ext-all-debug.js:18078 Base.implement.callParent ext-all-debug.js:4263 Ext.define.setVisible ext-all-debug.js:81417 Element.override.hide ext-all-debug.js:18154 Ext.define.constructor ext-all-debug.js:81198 constructor ext-all-debug.js:4894 Ext.define.constructor ext-all-debug.js:33170 Ext.define.makeFloating
(Screenshot maybe looks better)
Everything else works fine. Its just annoying to see this error in the console.

The problem must come from elsewhere, not from the above code. Also, it is not a recommended practice to create a component and then to render it somewhere, normally you add a component to container by configuring it in items:[] array or calling add() method.

Old question, but I was encountering the same problem in ExtJS 6.5.3, so I wanted to share my findings.
The problem (from our legacy code) came from some Ext.Template for a button with placeholder background-image style applied.
<span class="x-button-icon demo-icon icon-search" style="background-image: url("true");">
This would give us the same kind of errors in the console. Getting rid of it made the error disappear.
It seems that ExtJS is trying to load the background url, and obviously fails.

nivo-lightbox not launching when image clicked

I believe that I have followed the instructions to setup this javascript plugin, but it does not seem to be working. (plugin: http://dev7studios.com/nivo-lightbox#/documentation)
I can see the links to the css, theme and javascript files correctly showing in my (I can see that it is correctly seeing these files too).
(i've commented out the jquery as this is already loaded for my wordpress theme.
The lightbox doesn't seem to be running though. Any tips on why this isn't picking up my images and showing them in the lightbox?
once I get this going I still need to figure out how to wrap my images with an attribute for "data-lightbox-gallery" so I can get the galleries working as well.
Image management: nextgen gallery
image layout: Justified Image Gallery
URL: http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/

If you open the console on this page - you'll see that there are two javascript errors.
1.Uncaught TypeError: Property '$' of object [object Object] is not a function (index):71
I looked into the source code of your page and on line 71 you have this:
$(document).ready(function(){
$('a').nivoLightbox();
});
This means that jQuery is not working. You need to use a no-conflict wrapper.
2.Uncaught TypeError: Object [object Object] has no method 'orbit'
On this line you use .orbit() to make a home page slider... but not on the home page. You get this error because jQuery couldn't find a block with the id of #featured.
To avoid such mistakes you need to check if the block is on the page, possibly like so:
var home_slider = $('#featured');
if( home_slider [0] ) { //if jQuery object is not empty
home_slider.orbit({
//yor params here
})
}
If you get rid of these errors - you'll most likely see the nivo-lightbox :)

Inline Editing But Instance Doesn't Exist

I have my own custom non-jQuery ajax which I use for programming web applications. I recently ran into problems with IE9 using TinyMCE, so am trying to switch to CKeditor
The editable text is being wrapped in a div, like so:
<div id='content'>
<div id='editable' contenteditable='true'>
page of inline text filled with ajax when links throughout the site are clicked
</div>
</div>
When I try to getData on the editable content using the examples in the documentation, I get an error.
I do this:
CKEDITOR.instances.editable.getData();
And get this:
Uncaught TypeError: Cannot call method 'getData' of undefined
So I figure that it doesn't know where the editor is in the dom... I've tried working through all editors to get the editor name, but that doesn't work-- no name appears to be found.
I've tried this:
for(var i in CKEDITOR.instances) {
alert(CKEDITOR.instances[i].name);
}
The alert is just blank-- so there's no name associated with it apparently.
I should also mention, that despite my best efforts, I cannot seem to get the editable text to have a menu appear above it like it does in the Massive Inline Editing Example
Thanks for any assistance you can bring.
Jason Silver
UPDATE:
I'm showing off my lack of knowledge here, but I had never come across "contenteditable='true'" before, so thought that because I was able to type inline, therefore the editor was instantiated somehow... but now I'm wondering if the editor is even being applied to my div.
UPDATE 2:
When the page is loaded and the script is initially called, the div does not exist. The editable div is sent into the DOM using AJAX. #Zee left a comment below that made me wonder if there is some other command that should be called in order to apply the editor to that div, so I created a button in the page with the following onclick as a way to test this approach: (adapted from the ajax example)
var editor,html='';config = {};editor=CKEDITOR.appendTo('editable',config, html );
That gives the following error in Chrome:
> Uncaught TypeError: Cannot call method 'equals' of undefined
> + CKEDITOR.tools.extend.getEditor ckeditor.js:101
> b ckeditor.js:252
> CKEDITOR.appendTo ckeditor.js:257
> onclick www.pediatricjunction.com:410
Am I headed in the right direction? Is there another way to programmatically tell CKEditor to apply the editor to a div?
UPDATE 3:
Thanks to #Reinmar I had something new to try. The most obvious way for me to test to see if this was the solution was to put a button above the content editable div that called CKEDITOR.inlineAll() and inline('editable') respectively:
<input type='button' onclick=\"CKEDITOR.inlineAll();\" value='InlineAll'/>
<input type='button' onclick=\"CKEDITOR.inline('editable');\" value='Inline'/>
<input type='button' onclick=\"var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );\" value='getElementById'/>
This returned the same type of error in Chrome for all three buttons, namely:
Uncaught TypeError: Cannot call method 'equals' of undefined ckeditor.js:101
+ CKEDITOR.tools.extend.getEditor ckeditor.js:101
CKEDITOR.inline ckeditor.js:249
CKEDITOR.inlineAll ckeditor.js:250
onclick
UPDATE 4:
Upon further fiddling, I've tracked down the problem being related to json2007.js, which is a script I use which works with Real Simple History (RSH.js). These scripts have the purpose of tracking ajax history, so as I move forward and back through the browser, the AJAX page views is not lost.
Here's the fiddle page: http://jsfiddle.net/jasonsilver/3CqPv/2/

When you want to initialize inline editor there are two ways:
If element which is editable (has contenteditable attribute) exists when page is loaded CKEditor will automatically initialize an instance for it. Its name will be taken from that element's id or it will be editor<number>. You can find editors initialized automatically on this sample.
If this element is created dynamically, then you need to initialize editor on your own.
E.g. after appending <div id="editor" contenteditable="true">X</div> to the document you should call:
CKEDITOR.inline( 'editor' )
or
CKEDITOR.inlineAll()
See docs and docs.
You can find editor initialized this way on this sample.
The appendTo method has different use. You can initialize themed (not inline) editor inside specified element. This method also accepts data of editor (as 3rd arg), when all other methods (CKEDITOR.inline, CKEDITOR.replace, CKEDITOR.inlineAll) take data from the element they are replacing/using.
Update
I checked that libraries you use together with CKEditor are poorly written and cause errors you mentioned. Remove json2007.js and rsh.js and CKEditor works fine.

OK, so I have tracked down the problem.
The library I was using for tracking Ajax history and remembering commands for the back button, called Real Simple History, was using a script called json2007 which was intrusive and extended native prototypes to the point where things broke.
RSH.js is kind of old, and I wasn't using it to it's full potential anyway, so my final solution was to rewrite the essential code I needed for that, namely, a listener that watched for anchor (hash) changes in the URL, then parsed those changes and resubmitted the ajax command.
var current_hash = window.location.hash;
function check_hash() {
if ( window.location.hash != current_hash ) {
current_hash = window.location.hash;
refreshAjax();
}
}
hashCheck = setInterval( "check_hash()", 50 );
'refreshAjax()' was an existing function anyway, so this is actually a more elegant solution than I was using with Real Simple History.
After stripping out the json2007.js script, everything else just worked, and CKEditor is beautiful.
Thanks so much for your help, #Reinmar... I appreciate your patience and effort.