Develop Reference

Element does not exists on specific page

I've created a website that has index.html and quiz.html, one style.CSS and one app.JavaScript.
I have added some functions in the JS that refer to both pages. Lets say:
Page 1 index.html: the app.js has an event listener to show a box on click. That box then has a button to move to quiz.html (all works fine).
Page 2 quiz.html: on JavaScript I have functions to make the quiz run. The problem is that the code breaks before it gets to the functions for the quiz, with a line referring to the first page.
Error: app.js:14 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at app.js:14:35
Line 14 is document.getElementById('btnPlay').addEventListener('click', openBox), that refers to an element within index.html, not the page I am now quiz.html.
I understand why, because on this current page we don't have a reference to it. But I have read in many places that is usually better to use one app.js file and not one per html page. How do we make this work? Any suggestions?

On some page B you don't have that #btnPlay Element therefore document.getElementById('btnPlay') equals undefined. And you cannot assign an event listner to it: undefined.addEventListener.
To make sure that element exists — before moving forward
use Optional Chaining ?..
document.getElementById('btnPlay')?.addEventListener('click', openBox)
otherwise on page B the "#btnPlay" is not found and your JavaScript will break.
Another "old" way to tackle that issue would've been using a statement:
const EL_btnPlay = document.querySelector("#btnPlay");
if (EL_btnPlay) EL_btnPlay.addEventListener("click", openBox);
where the aforementioned is just a shorthand to do the same.

Zurb Foundation javascript reInit module not working

i'm ajaxifying a website. My menu should always be sticky (using the sticky module provided by Foundation). But it is only sticky on a regular page load, and not on ajax reload (aka when navigating on the website)I'm trying to re-initialise the module when the event ajaxComplete happens, using the line provided in the documentation of Foundation 6:
$(document).ajaxComplete(function () {
Foundation.reInit($('.sticky'));
//other code
});
But it doesn't seem to work, because I get this error in the console :
TypeError: Cannot read property '_init' of undefined
at HTMLElement.<anonymous> (foundation.core.js:103)
at Function.each (jquery.min.js?ver=2.1.0:2)
at o.fn.init.each (jquery.min.js?ver=2.1.0:2)
at Object.reInit (foundation.core.js:102)
at HTMLDocument.<anonymous> (stickyfooter.js:28)
at HTMLDocument.dispatch (jquery.min.js?ver=2.1.0:3)
at HTMLDocument.r.handle (jquery.min.js?ver=2.1.0:3)
at Object.trigger (jquery.min.js?ver=2.1.0:3)
at x (jquery.min.js?ver=2.1.0:4)
at XMLHttpRequest.<anonymous> (jquery.min.js?ver=2.1.0:4)
Which I don't understand. What does it mean ? How can I make the module work after an ajax reload ?
The website in action : http://lesdeuxvagues.com/demo

You didn't post your markup, but I visited the site and don't see a ".sticky" class in your CSS. You are calling
Foundation.reInit()
on a jQuery selector. So does
$('.sticky')
select anything on your page? Why don't you try:
Foundation.reInit($('[data-sticky]'))
which would reinitialize all the elements with attribute data-sticky

Ok, so it's apparently a known issue in zurb-foundation, the sticky module doesn't work after being destroyed (though I don't know why it's destroyed in my case because i'm only reloading other content with AJAX), all the other foundation js plugin seem to be working though. (see : https://github.com/zurb/foundation-sites/issues/9047)
The solution that I will try is to just find another sticky library to take care of this particular issue.

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.