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
Related
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
I'm trying to implement the bootstrap datepicker one of my forms. I've already tried these paths https://github.com/Nerian/bootstrap-datepicker-rails// github.com/lubieniebieski/bootstrap-datetimepicker-rails and the bootstrap css is not showing.
Currently I'm using this version https://github.com/lubieniebieski/bootstrap-datetimepicker-rails and have this /= require bootstrap-datetimepicker in my application.js and this #import 'bootstrap-datetimepicker'; in my boostrap_and_overidescss.scss. The following is my script:
<script type="text/javascript">
$(document).ready(function(){
$('#insurance_start_date').datepicker();
});
</script>
Any light onto this soul would be greatly appreciated!
If you just want a date picker, I think this has been upgraded to support BS3: https://github.com/eternicode/bootstrap-datepicker
If you want date and time, I think this is the one: https://github.com/Eonasdan/bootstrap-datetimepicker
I have not tried the latter because of some other frameworks that don't work yet (mostly simpleform), but these were what I came up with when I evaluated my upgrade path 2 weeks ago.
I'm working on the exact same gem you are, right now.
Not sure how much help I will be, though, but here's pointing out 2 things that may help.
1) It could be a typo, but your bootstrap_and_overrides.css.scss appears to have the improper file extension. yours seems to be missing a period between overides and css.
2) What I did with this, to get the bootstrap working, was to just import it into my application css layout directly using *= require bootstrap-datetimepicker. With that, I do have the bootstrap 'd calendar...although, I'm still having issues with getting the calendar to close after you've selected the date.
Good luck, hope this helps.
I am getting the said error
$(".column").sortable is not a function
I m trying to create sortable/movable divs in my code.
Issue is that if I m using a new project then the code is working fine, but when I try to run it in my project it gives me the said error..
Any idea??
Sounds like you have forgot to add your jquery-ui script library to the page. Add the following within the head section to see if it works.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
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()
I am trying to hide/show elements in a view using following code:
$('buttonClass/IDhere').click(function (){
$('theDivYouWantToShowClass/IDhere').toggle();
});
However, I am keep getting
Microsoft JScript runtime error: '$' is undefined
What might be the issue and how do I fix it?
This thread is pretty old, but I think an answer in the thread would be nice. I agree with the previous two answers - it's likely because jQuery wasn't loaded. You can load it this way (usually toward the top of the file):
<script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
(or whatever the current version of jQuery is).
Hope it helps.
It sounds like jQuery hasn't been loaded yet.
did you make sure download the jquery javascript file and link in to your html/aspx page before attempting to use jquery scripting?
you need to:
download the jquery code/file from:
http://jquery.com/
copy the file (jquery-1.8.3.min.js) you just downloaded somewhere into your web project directory/folder
then insert the link to this file into html/aspx page:
now try to run webpage
references:
www.youtube.com/watch?v=Bf9Gs-09uzQ
www.ajaxtutorials.com/javascript/introduction-to-jquery-learn-jquery-from-scratch-in-asp-net-4-0/
$ is defined by default when you load jquery. I would try and use jquery() to see if somehow $ is being unloaded etc. You can also load up firebug and hit the page. It should show up as a global variable/function. NOTE: You can also setup jquery to not setup the short hand "$".
since it looks like your trying to target classes and ID's - try this
$('.buttonClass #IDhere').click(function (){
$('.theDivYouWantToShowClass #IDhere').toggle();
});
This is a definite case of jQuery module not being loaded. In my case, common.js had a jQuery related script
$( document ).ready(function() {
var divSessionWarning = $("#idivWarn");
divSesWarning.load(divSesWarning.data("src"));
});
This was called in header.jsp. Swapping the sequence of loading the jQuery followed by the common.js resolved the issue.
<script language="javascript" type="text/javascript" src="/JAVASCRIPT/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/JAVASCRIPT/mod/common.js"></script>
Hope this helps.
If jQuery is called then make sure jQuery is loaded before the stylesheet as its likely that calls it