I'm trying to get autosize.js to work in my Rails 6 application but it doesn't matter what I try, it's not working.
Every time I try to use it on a textarea I'm getting this error:
jQuery(...).autosize is not a function
What I did:
I added the plugin via yarn with yarn add autosize
Then I required it in my application.js, I tried different solutions:
require("autosize")
require("autosize/dist/autosize")
Then I imported it in different ways to try if it works somehow (as all other plugins are working).
What I tried:
import 'autosize'
import autosize from 'autosize'
Then I tried setting a global scope for the variable:
global.autosize = autosize;
For initialization I followed the readme:
autosize($('textarea'));
I even tried to remove the yarn package and download the files. But still the same error.
Any more suggestions on what I could do to make it work?
EDIT:
Okay, at least I found the problem: The textareas are generated by AJAX, so they are dynamically generated. On other textareas that are not dynamically it's working.
I tried:
$(document).on('focus', 'textarea', function(){
autosize($('textarea'));
});
and visually it's working, but I still get the same error and can't submit the data.
Related
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
I installed Foundation 6 using bower. I keep getting multiple warning in the console every-time I use any Foundation 6 - JavaScript based plugin.
Exact warning :
Tried to initialize magellan on an element that already has a Foundation plugin.
My script includes look like:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
The warning is triggered by the following code present in foundation.js at line 180 :
// For each plugin found, initialize it
$elem.each(function () {
var $el = $(this),
opts = {};
// Don't double-dip on plugins
if ($el.data('zfPlugin')) {
console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
return;
}
I have tried re-installing from scratch but it still doesn't work.
Similar question exists in Zurb Foundation Forum but till now there is no good answer.
How do I resolve this?
UPDATE
For Version 6.4.*, all plugins and js based elements tend to work only if $(document).foundation(); is mentioned within the html file. So delete it from app.js if you have written in it. For additional reasons, go through the explanation below.
Although I have mentioned the answer long back in the comments of the question, I felt it will be better to write it up with few more points.
While installing Zurb Foundation 6 using bower (command line), it gives you a nice index.html page to get started which has the <script> tag that refers to an external js file located at root\js\app.js. The app.js file by default has the following code:
$(document).foundation(); //invoke all jQuery based Foundation elements
So basically, you already have everything to get started.
But, this wasn't the way how it worked until Foundation 6 and I wasn't aware of these changes. I didn't go through the contents of app.js as I was assuming it to be empty. I simply did the old way of invoking them in my html pages by writing the following code:
<script type="text/javascript">
$(document).foundation();
</script>
This kind of double referred the jQuery based Foundation elements raising a warning at the browser console.
Solution was to remove either of the invocation, but actually removing the code written in external js file makes more sense for the following reasons:
External references cost an additional http request, very slightly increasing the precious page load time. Why not reduce it, if you can.
Invoking jQuery based elements in the site has to be done as early as possible so that every element gets the original shape in no time. So it makes more sense to mention the invocation within a html page rather than request a external file to invoke.
So, remove the code mentioned in the external js file, that is your app.js file. The warnings would vanish.
For Version 6.4.*, all plugins and js based elements tend to work only if mentioned within the html file.
The best solution to this problem is to put $(document).foundation(); inside <script> tag under .html file, and remove it form external .js file (app.js)
Like this-,
in
xyz.html
<script type="text/javascript">
$(document).foundation();
</script>
other solution like, putting it inside external .js file (app.js), and removing it from .html file, will not always works.
at least it didn't work for me.
Tested on-
foundation version 6.4.2
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.
I have a JS FlexSlider module in my joomla page.
It works fine on all positions but not at the Position I want it to be.
And the position works fine with all other modules.
Here is the page: http://www.ehemalige-hoelderlingym.de
If you check your browser console, you will see a JS error. You also have 2 jQuery libraries being imported which simply means that the developer of FlexSlider has not stuck to Joomla coding standards.
In the Module Parameters, you will see the option Enable jQuery 1.8.2? which you need to set to No.
This will prevent duplicate jQuery libraries being imported and thus most likely fix the console error.
They should really remove this option for the Joomla 3.x version of JS FlexSlider as it is simply not required.
Update:
I've checked Firebug and you're now getting an error because the module is importing the script before jQuery.
You have 3 options:
Option 1: Download and install the jQuery Easy plugin. This will ensure jQuery is loaded only once and before any other script on your site.
Option 2: Create a Template Override for the module and once done, in the default.php change this:
<script src="modules/mod_js_flexslider/assets/js/jquery.flexslider-min.js" type="text/javascript"></script>
to this:
<?php JHtml::_('script', JUri::root() . 'modules/mod_js_flexslider/assets/js/jquery.flexslider-min.js'); ?>
Option 3: Use a different slider extension
Personally I would go with option 3 as you shouldn't have to rely on a 3rd party plugin to get a slider working, and option 2 is something the developer should do.
I've decided to upgrade to fancybox2.1.5 (had 1.3.4). I cant get it to init.
I have deleted my original question (about what I tested) because I have found out what the problem is.
Turns out the problem is tinymce and fancybox together. If I only use one of those on a page, no problem. If both get init on 1 page, fancybox wont work. I need noConflict, but cant get it the way I want.
I'm bulding this into an excisting CMS. The $.noConflict() solution combined with using all jquery selecters jQuery('#likeThis') is not an option. I want the noConflict code applied wrapper-like arround the tinymce's.
I've moved all tinymce related inits to a seperate js-file.
I tried the noConflict at the beginning, and moving it back again, but no luck there:
jQuery.noConflict(); // also tried adding true here
/*
tinymce's here with jQuery('selector').tinymce()
*/
var $ = jQuery.noConflict(); // also tried without 'var', also tried adding true here
Also tried this:
// Other scripts
<script>jQuery.noConflict();</script>
<script src="/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script src="/beheer/admin/script/tinymces.js"></script>
<script>var $ = jQuery.noConflict();</script>
// Other scripts & code
In short: I want to be able to use $ everywhere, and keep using that, but 'sandbox' the tinymce's, how do I do that?
The solution was updating the Tinymce. I had version 3.4.7 and replaced it with a 3.5.7 version. After that, no problems anymore.