Bootstrap DateTimePicker and jQuery problems - javascript

I'm trying to use Bootstrap DateTimePicker on a Bootstrap-based HTML template. The problem is that there's a JS file called foundation.js which is included in the template and that file is killing DateTimePicker. When I don't include this file, DateTimePicker works, but lots of other functions of template (like tabs, image gallery etc.) stop working. When this file is included, DateTimePicker doesn't work. That foundation.js file is too big so I put it here: http://pastebin.com/fQhtpV2P
What I noticed is that there is obviously a whole jQuery v1.8.1 code included in that file. So I guess that this is the reason why DateTimePicker doesn't work since I'm including jQuery v2.1.1 library so these two are in conflict. I tried:
Remove the jQuery v1.8.1 code from foundation.js -> the same effect like removing the whole file; the picker works but all other functions from template doesn't work
Remove jQuery v2.1.1 library include -> DateTimePicker doesn't work
Remove the jQuery v1.8.1 code from foundation.js and replace it with jQuery v2.1.1 code -> nothing works
I also tried all combinations of including order, but no success. So, I can't remove that foundation.js and the picker won't work while that file is there. What should I do?
PS. my code is in Codeigniter so it's pretty complicated (in lots of files) but I can give you parts of the code if needed.

Try to use an older version of your picker, u can take a look at this link
http://plugins.jquery.com/datetimepicker/
The picker simply doesn't show with jQuery 1.8 or give u an error??
Regards

Uncaught TypeError: $(...).datetimepicker is not a function
This kind of error is communly caused because you included the library that is depending on jquery before jquery itself.
Check your including order to be sure the dateTimePicker js file is included after JQuery

Related

Jsfiddle with external libs, Font Awesome not rendering, isotope does not toggle layout

Jslint says everything is fine, and I am able to add the external libs. Also code works fine in the IDE/browser, not in Jsfiddle
using Jsfiddle I am trying to debug Isotope toggle size and layout in JS fiddle, but I am unable to get the external libs to render.
Can you help, and correct me?
- if the issue is the order of libs, or what options I selected, is it the semi-colon infront of the JS, I thought this is normally good/safe coding in JS..
Here is the code in JsFiddle, it works in the IDE not JsFiddle
I am using the following font awesome, bootstrap, isotope, ba-bounce, jquery 1.11.2 (JSfiddle only shows 1.11.0)
I'm not sure where you were trying to load your resources from, but you need to provide a URL to the css or js file you want to include. These are usually easy to find hosted on a cdn. I have reconstructed your fiddle using cdn links to the external resources:
jsfiddle: http://jsfiddle.net/voveson/popzfey4/5/

Magento - Prototype.js and jQuery issue - Add to cart Button

I'm build store with Magento and ran into a serious problem with jQuery and Prototype.js
I imported/rendered new JS files as written in Mastering Magento Theme Design book, but on the product view page the add to cart button doesn't work.
when I click on the button the following error appears:
Uncaught TypeError: Cannot read property 'submit' of undefined onclick
I left everything the way it is in JS that are imported by Magento and added only these files:
default/js/jquery.min.js">
default/js/bootstrap.min.js">
default/js/jquery.scripts.js">
default/js/chosen.jquery.min.js">
inside jquery.scripts.js file I have:
jQuery.noConflict();
jQuery(document).ready(fucntion(){
});
and I have no idea what is wrong with it.
I've been looking for about 2 hours now but didn't find any wise solution or suggestion.
the problems disappear when I remove jquery.min.js file only.
You need to add your jquery file above prototype.js file.
jquery conflict with Prototype in magento:
Simplest solution is to add at the end of your main jquery file.
jQuery.noConflict();
Or create your custom js file and add this line and also include this file after main js.

I can't Use jquery in Joomla

After I installed my jquery plugin http://farukat.es/journal/2011/02/514-new-creation-jquery-runloop-plugin in Joomla, I still can't call any function in there. It seems like there is nothing at all
In my Joomla template file index.php I included the called to GetDocument and AddScriptFunc for noConflicts() already. Do I have to open the javascript files in the plugin then Find + Replace All $ with jQuery to make it work ?
You have to add $.noConflict(); from beginning of the jquery functions.
Sometimes jquery wont works so you have to rename all jquery to $.
Include noconflict document in that page.
Try these ways hope it will works...

Javascript errors in my Joomla website

my website is marutiindia.in. My website was working fine until I installed a module named lof k2 scroller. The website was showing jquery errors and the module at the lower half of the template was not working. But I managed to get the module to work by adding the following code at the start of the JS file which was showing error:
if(jQuery){
jQuery.noConflict();
}
But, now I am getting other JS errors which I am not able to understand.
Below is the link for the screenshot of errors:
Screenshot
I don't know what these errors mean.
Also I have one more plugin to use for my website which also causes scroller to not work.
Please help me resolve these errors.
Thanks.
Joomla uses Mootools, which also use the $ function name. in order to avoid this, your plugins either:
must use jQuery instead of $. For example, instead of $('div') to get divs, use jQuery('div')
if you really want to use $, wrap the jQuery code in a closure
(function($){
//code that uses `$`
}(jQuery))
make sure the plugins are extending from jQuery and not $.

Fancybox is not a function

Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?
$("Map").fancybox is not a function
I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.
This is my code
abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.
ex: abbr>>east
and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.
function showMapFancybox(abbr){
var abbr;
$('#'+abbr+'mapresults').hide();
$('Map').fancybox({
overlayShow: true,
onClosed: function() {
$('#'+abbr+'mapresults').show();
map_latdec = $('#decValLat').attr('value');
map_longdec = $('#decValLon').attr('value');
map_latdeg = $('#degValLat').attr('value');
map_longdeg = $('#degValLon').attr('value');
$('#'+abbr+'decValLatsub').val(map_latdec);
$('#'+abbr+'decValLonsub').val(map_longdec);
$('#'+abbr+'degValLatsub').val(map_latdeg+'N');
$('#'+abbr+'degValLonsub').val(map_longdeg+'W');
}
}).click();
};
I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).
I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.
Possible Solutions:
1) have you already loaded jQuery? If not, then load it before any $ commands start.
2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.
3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.
You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.
If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.
EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.
In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.
If you are using a plugin which includes JQuery into your header tag, this trouble can arise.
I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.
I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.

Categories

Resources