Joomla - Bootstrap not working properly - javascript

I am changing a website into a template for Joomla 3.4.3. I am using Bootstrap 3 components and they've been working great normaly, but when it is as a Joomla template they are not working properly. Navigation toggle works only sometimes, carousel is acting weird and some animations aren't working. Also in firefox I am getting this error whenever I click somewhere:
Empty string passed to getElementById()
and it's refering to this code in jQuery:
// HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] ); // Here the error occurs
I've read that it can be caused by having duplicate IDs in HTML, but I have checked and didn't find any.
I would really appreciate your help, I'm really frustrated by this. Thanks

I think the problem is that the heart of joomla currently works with version 2.3.2 Bootstrap
You need to load in the template, bootstrap version you want to use.
Create a directory called "js" in the template and one for the "css"
Then add this in the template, after placing files.
$doc->addScript($tpath.'/js/bootstrap.min.js');
$doc->addStyleSheet($tpath.'/css/bootstrap_3.css');

To avoid conflicts, how not to load js files it is as follows:
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
In this case, we remove the bootstrap.min.js joomla file loaded by default.
I hope I've been helpful. Sorry for my English.

Related

Tag Editor- $(...).jsonTagEditor is not a function

I just tried to implement the json tag editor to create a tag editor.
I want to implement it in a bigger laravel project. Therefore I included jQuery, as well as the js and css file from the json tag editor. It's all loading fine, which I figured out under the network tab.
Now I have:
an input element:
<input id="keywords" class="form-control" name="keywords"
autofocus></div>
and on top of the page I have:
$().ready(function(){
$('#keywords').jsonTagEditor();
});
But i get an error saying
Uncaught TypeError: $(...).jsonTagEditor is not a function...
As I said, the files are loaded as I can see in the network tab...
Any ideas what the problem could be?
Again to make everything clear, I'm using laravel, so the files are all included in the master-layout file and I'm trying to use it in a document that extends this master template. But shouldn't change anything as I'm already using some other plugins that work fine that way.
Any ideas?
After some discussion in chat, the problem turns out to be the suspected re-import and re-initialization of jQuery. The Laravel framework has it's own import of jQuery that happens via require(), and that was the happening after the plugin in question was imported.
Moving the plugin import to the end of the <body> worked around that, but in addition the plugin (as of this writing) has a bug and must be initialized with an empty object passed in (or probably any other value):
$("#keywords").jsonTagEditor({});
You are missing document and just to be certain that the element is accessible, place your script before the ending '</body>' tag so that it loads your page content first.
$(document).ready(function(){
$('#keywords').jsonTagEditor();
});
You forgot to write document
Instead of this
$().ready(function(){});
Use this
$(document).ready( () => {});
The => means, that you use newest standarts of JS
Or you can just use this alternative jQuery tagEditor

Bootstrap accordion: Expand / Collapse all not working

I found that solution, to expand all accordion sections:
http://www.bootply.com/peFUdnwOpZ
I copied the code in Joomla.
Via Gantry I loaded Javascript file. I tried even, to load the javascript within the article.
But It is not working. Can Anybody help?
Background information:
I had to add bootstrap min.js, otherwise, the function "accordion" was not working properly. Template is working with Bootstrap 3.3.6.
I tried even to add the exact same files, loaded in http://www.bootply.com/peFUdnwOpZ.
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Next Try. I loaded script via Joomla plugin. I loaded the script in header and body, before and after head/body tag.
Nothing worked.
I traced it down: On another template, I worked with, I figured out, that the order of loading the 3 javascripts is very important. So, loading manually before end of header is much important! first jquery.min.js than bootstrap.min.js and than custom javascript (see in the example link) worked. But on my own site, it seems, there are some errors in loading jquery and bootstrap javascript properly. Because console says:
null is not an object (evaluating '$('.closeall').click')
So, it misses the link to the other javascript files. Maybe some can help?
I believe you may have forgot to add the following piece of code in your custom js file -
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
});
Hope this may work for you :-)

$(...).popover is not a function

I have looked through quite a few posts on here dealing with this issue, but none of them seem to solve my problem.
I have imported the jQuery and Bootstrap js files in the right order. Things such as bootstrap panels are working perfectly fine for me.
My script imports are like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
However, when I try
$('[data-toggle="popover"]').popover();
I get the following message in the Chrome console:
Uncaught TypeError: $(...).popover is not a function
At first I thought maybe popover was not being included in CDN's copy, so I went ahead and downloaded a local copy with all the plugins included from here:
http://getbootstrap.com/customize/
and got the same error message (re-pointed the script tags towards the local js file).
Doing a search for "popover" the bootstrap.min.js file:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
Shows that popover is included in the file.
Since you have stated you have included jQuery and the other libraries correctly, 1 possible case is there could be multiple instances of jQuery in the page.
So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).
In case of duplicate jQuery instances the problem is the jQuery version to which the plugin is attached might be different from the one which you are accessing to use the plugin at that point the plugin will not be found.
https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
The order of including bootstrap.js and jquery.js matters. Include the jquery.js BEFORE bootstrap.js
For Bootstrap 5 onwards this is how you add popovers
Code for Button:
<button type="button" class="btn btn-secondary mx-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Your Cart(<span id="cart">0</span>)
</button>
Script:
<script type="text/javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
Had the same problem and checked jquery version. Moving to v1.12 helped me
What worked for me, was making a call to $.noConflict() which returned control of $.
That was because some other JavaScript libraries use $ as a function or variable name, just like jQuery does. During jQuery initialization, there are some old references of $ saved. noConflict() restores them.
$noConflict();
jQuery(document).ready(function ($) {
$("#id").popover('hide');
});
Assuming you are correctly added popover script in the your site.
To fixed the "$(...).popover is not a function" bug. Sometime just add a timer delay can be fix it.
$('[data-toggle="popover"]').popover();
Modify to
setTimeout((function() {
$('[data-toggle="popover"]').popover();
}),500);
Sometimes (always) the web page doesn't fully render the content and the POPOVER will gives this error. So, We need 500ms delay starting the popover script. Sometimes 500ms is not enough to wait for rendering, so more delays can be modified as needed.
Even in bootstrap 5 has this issue too
Conclusion
POPOVER script starting need waiting whole page completely render.
So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).
This is Happen due to Differ version of bootstrap
In This case use script of same version as your bootstrap
In other case jquery is not recommended. insted use Advance Css Js
This is also happen cause latest bootstrap doesn'
After hours, I found out that I forgot to attach bootstrap.js file to my page ;)

prettyPhoto in Expression Engine

Right, i've looked around and can't seem to find an answer to this problem.
I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:
Need Help? <i class="icon-help-circle"></i><div id="maphelp" class="hide">text goes in here</div>
But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.
I have also done the fix within the help pages to make sure that its is active. Still nothing happens...
Can anyone help me?
Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer.
I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so
<script src="{path="embeds/jsfile"}"></script>
this way it allows me to move the files all over the place in my visual template.
another is to use the no conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I hope this helps.

javascript won´t work in Twitter´s Bootstrap, even when links to the proper css/js files are ok (I´m hotlinking to them)

I´ve tested with several files, and decided to hotlink every single css and js file that I think is needed.
But still the javascript won´t work.
I´ve added 4 files of Twitter´s Bootstrap at: http://jsfiddle.net/PS3LH/
If I paste inside the css area the css required it seems to work, but the css file is already added, so I don´t know why it doesn´t work...
Thanks for your help!
Rosamunda
Make sure you have JQuery loaded first, then tooltip, then popover.
http://jsfiddle.net/QLvUj/
Your bootstrap CSS had the wrong URL too. Above is a working example.

Categories