I have problem injecting the select2 library in my TypeScript/Angular project. I don't know what else to do to make it working, I searched for some working example of but without success.
jQuery gets loaded
select2.js gets loaded
definition file select2.d.ts is there (I also have matching version)
Module is injected like that:
public init() {
var myApp = angular.module('app', [
'ui.router',
'ngCookies',
'ui.bootstrap',
'select2'
]);
...
I get an error:
Module 'select2' is not available! You either misspelled the module name or forgot to load it.
What am I doing wrong there? Any help appreciated.
You are trying to inject Select2 into your application like an Angular module. This is throwing an error because Select2 is not an angular module, it's a jQuery component.
Angular UI provides ui-select which is an Angular native version of Select2.
So I resolved this by initializing select2 in jQuery style direct in my controller...
$('select').select2();
It is probably not very nice solution but it works. If anyone got better solution feel free to post it
Related
I'm trying to set up my app to have autocomplete options in text fields for my forms. So far, I've been able to successfully seed db and index through the Algolia dashboard. I can see my records are syncing correctly, so I know everything is good on the backend.
I'm now trying to implement the easiest possible way to get autocomplete on the homepage of my app. The page itself is a simple, static page with a basic page controller.
I've followed the setup instructions for autocomplete on github but haven't been able to get it to work. Here's what I currently have set up.
home.html.erb
<div id="autocomplete" class="border"></div>
<script src="https://cdn.jsdelivr.net/npm/#algolia/autocomplete-js"></script>
<script>
const { autocomplete } = window['#algolia/autocomplete-js'];
</script>
As far as I'm aware, this should work with no issue. But nothing displays, except the border class. I also tried the yarn install method but it also didn't seem to work.
In application.js,
import "#hotwired/turbo-rails"
import "./controllers"
import { autocomplete } from '#algolia/autocomplete-js';
const autocomplete = autocomplete({
container: '#autocomplete',
// ...
});
//= require jquery
//= require jquery_ujs
But when I keep that in there, as well as the can script on my home page, I get the error: Uncaught SyntaxError: Identifier 'autocomplete' has already been declared so as far as I can tell I've implemented it all correctly. I'm completely stuck here - if anyone has any insight, please let me know!
Feeling completely baffled. I know that several questions have been asked about this and I've read and reread all of them.
Angular (with ng-route) was working until a certain commit (I'll include images of the diffs of the js files). I've already changed what I would have expected to be the guilty party, shown here:
Changed this
app.run(function($rootScope, $http){
$rootScope.logout = function(){
$http({
url: 'logout',
method: 'GET'
}).success(function(data){
window.location = window.location.href;
});
};
});
to this
app.run(['$rootScope', '$http', function($rootScope, $http){
$rootScope.logout = function(){
$http({
url: 'logout',
method: 'GET'
}).success(function(data){
window.location = window.location.href;
});
};
}]);
However, even if I completely commit out the above code the error still persists, so I really don't think that's it. I've also commented out chunk by chunk of code and nothing seems to resolve this issue.
I've attached an image showing the diff in the commit file. Before this commit, angular was working fine on Heroku/production. Am I just being stupid and not seeing it?
http://imgur.com/SwsEeuH,oITUoY7,bQ8HKrj,tZF4HMS
Thanks in advance!
You get this kind of error when you use a JavaScript minifier that mangles a Angular dependency. Because Angular looks dependency up by argument name it can't find them.
I'm not sure what you are using to build your JavaScript into minified and merged files but you'll need to work out a way to do this in an Angular friendly way. I had a project recently that used the ngmin grunt plugin to minifier my JavaScript and started to get similar errors until I switched to ng-annotate.
A bit too late to this question I guess, but I stumbled accross the same problem but only while using Angular Material. All my dependencies were injected as suggested and everything worked fine before using Material.
My setup is Angular on a Rails 5 app runnning on production on Heroku. Even following the best practices on funciton annotation for Angular, injectin Angular Material will not work in production and will throw an UnknownProvider error unless you add the ngannotate-rails gem to your project.
This gem helps angular files be annotated correctly before the assets pipeline minifies the JS files and screws dependency injections up.
I am trying to use jquery UI based transition sliders on my homepage. I tried different jquery plugins but I always get an error in the console : jQuery is not a function or some function error related to jQuery . Plugins i have tried are Lof JSliderNews 1.0,featured-content-slider, etc..
Even after following several posts on the web , iam not able to make the plugin work at all. Jquery part doesn't work. I have used carousels and other plugins with jquery.noConflict but this time nothing works!
Here's what iam doing:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
I also tried replacing all $ with jQuery in the included scripts but that too doesn't work in magento. Please help, i need to finish the project soon
Have you tried putting all the jQuery stuff into a function and map the window.jQuery variable as an argument? Like so:
(function($){
//... do your jQuery thing here
})(jQuery);
BTW: "jQuery is not a function" might also be a hint that you forgot to load the jQuery library into your project.
Do you have "JS file merging" enabled? If yes, try to disable it, clear your cache and try again. It helped me once when I had a smiliar issue.
Regards
I'm trying to make tabs int the web browser. I have included all necessary .js files. I am still getting this error:
$("#tabb").tabs(); where tabb is the div id.
Uncaught TypeError: Object [object Object] has no method 'tabs'
I have attached all the .js files with it.
jquery.js , jquery-ui.js (complete) , jquery-ui-tabs (only the tab widget) still there is an error...
What's wrong?
1.Check the jquery version that is getting loaded.
Olders versions will not have have functions like tabs.
2.Sometimes this issue will also arise if you have loaded multiple jquery.
The last jquery loaded will be looked for the same.
This error occurs often. Though the issue in the question was different.
The above two issues are the most common ones as I have found.
Are you sure your code is executed after jQuery UI loading?
You should make sure DOM is ready, and wrap it like this:
$(function() {
$("#tabb").tabs();
});
So I just recently upgraded a large project to rails 3.1. I've got the asset pipeline set up and working. However, a lot of the plugins we use and the custom jQuery functions we've written don't seem to be getting evaluated, although the source is in application.js. For example:
(function($) {
$.fn.searchable = function() {
....
}
})( jQuery );
I see this code in application.js, but anything that tries to use it gets a javascript error, undefined function. However, if I wrap the whole thing in a function definition, and call that function on document ready, then it works.
This is a really ugly workaround. Any ideas why it's not working without wrapping in a function?
Thanks.
maybe you should take a look at 'coffeescript's namescope'. e.g.
//define your js function as:
this.some_function_name() =>
alert('hello~')
//call it as:
this.some_function_name()