How to run Bootstrap-select with bootstrap 5 without this error - javascript

I'm using Bootstrap 5 on a project (template based) and when I tried to include bootstrap-select (version 1.13.14) but the console returns the following errors:
Uncaught TypeError: Cannot read properties of undefined (reading 'Constructor') ---- bootstrap-select.js:3133
The line in question reads:
// get Bootstrap's keydown event handler for either Bootstrap 4 or Bootstrap 3
var bootstrapKeydown = $.fn.dropdown.Constructor._dataApiKeydownHandler || $.fn.dropdown.Constructor.prototype.keydown;
As a result, the select element with class selectpicker won't show up.
Any thoughts or ideas? Thanks!

Well... solved it by using the bootstrap-select version 1.14-beta. Found the answer in this thread: https://github.com/snapappointments/bootstrap-select/issues/2439
But notice that this is a beta version.

Related

Joomla 3.7 - TinyMCE - Uncaught TypeError: Cannot read property 'replaceSelection' of undefined

This error happend when an editors-xtd plugin use the function "jInsertEditorText" with TinyMCE.
With version >= Joomla 3.7.3 (from the update of TinyMCE to 4.5.7).
For information the function "jInsertEditorText" is right, but it's the "replaceSelection" called by "jInsertEditorText" in tinymce.min.js that generate this error.
Thanks in advance for your help
I had this problem after update with phocadownload button (Joomla 3.7.5, TinyMCE 4.5.7, Phoca Download 3.0.6), there is an error on the file view.html.php, in:
/administrator/components/com_phocadownload/views/phocadownloadlinkfile
at the bottom about on line 121
insert this:
$this->assignRef('tmpl', $tmpl);
instead of:
$this->assignRef('tmpl', $this->t);
Have the same problem. I fixed it this way:
jInsertEditorText(result, 'jform_articletext');
just replace that $name with 'jform_articletext'
for me it works fine

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.

angular-scroll conflict with jQuery 2.1.1

I would like to use angular-scroll. I'm using the scrollTo function within my template:
<li class="tab col s2"><a class="menupoints" du-smooth-scroll="#section-3" du-scrollspy>Kontakt</a></li>
Problem is, that i also have to use jQuery 2.1.1 and this is somehow conflicting. I always get following error:
Uncaught TypeError: Cannot read property 'top' of undefined
I know that my implementation is correct, because when i remove jQuery 2.1.1 everything works fine. So is there ways to resolve this conflict?

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.

Uncaught ReferenceError: hide is not defined error

I'm newbie on javascript. I'm using Twitter Bootstrap Modal.
console get me this error. why?
Uncaught ReferenceError: hide is not defined
JS
$('#te').modal(hide)
You may try this (Check the documentation):
$('#te').modal('hide');
Notice the quotes, you missed those, hide should be 'hide'.
You need to put quotes around hide.
Like this:
$('#te').modal('hide')
Reference: http://getbootstrap.com/javascript/#modals-usage

Categories

Resources