I would like load a different than English language locale for jQuery UI, while loading jQuery UI from Google Hosted Libraries CDN?
Is there a way to pass I18n parameter into load function?
google.load("jqueryui", "1.7.2")
I have also tried as per jQuery UI documentation on Datepicker internationalization to pass:
$(selector).datepicker($.datepicker.regional['pl']);
... but it did not do the trick :(
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/jquery-ui-i18n.min.js
EDIT:
It work's only google.load is omitted and standard JavaScript loading is used:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/jquery-ui-i18n.min.js"></script>
I realize that this may not be the answer you are looking for, but I stumbled upon your question when solving the very same problem.
I am approaching this by loading the i18n libraries from the local server:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<!-- local resource -->
<script type="text/javascript" src="/js/ui/i18n/jquery-ui-i18n.js"></script>
this code then works:
$(selector).datepicker($.datepicker.regional['pl']);
I am still interested in how to load the jquery-ui-i18n.js from a CDN.
Related
It's been a nightmare to me before I came to know that in order to get jquery ui working in ASP.NET MVC I need to add #Scripts.Render("~/bundles/jqueryui"). Before doing so I kept getting Uncaught error: Undefined is not a function. What I did not understand was why on earth this would happen when I could see the jquery ui file in the sources when inspecting the html source. This is the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.plugins.js"></script>
<script src="~/Scripts/Helpers.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")//Added later to get it working
#RenderSection("scripts", required: false)
</body>
</html>
In my Helper.js file I have some helper functions that I usually use. One of them is applyDatetimePickerAndFormat that is called on $(document).ready(). Inside that function I have the following code:
$('.txt-date').datepicker({
showAnim: "drop",
changeMonth: true,
changeYear: true,
dateFormat: "dd.mm.yy"
});
If I omit #Scripts.Render("~/bundles/jqueryui") in the _Layout.cshtml I will get the aforementioned error. This code works perfectly with any plain html or web form. So it seems that somehow the document can't see the contents of the jquery-ui file. To make my question concrete:
When I look at the Sources of the the web page I can see jquery-ui-1.8.24.js and it's referenced in the html source. Then why can't the code find jquery-ui functions?
If every java script file has to be specified in the #Scripts.Render then why isn't there any problem with my Helper.js file?
And finally where does this ~/bundles/jqueryui path refer to?
jquery-ui depends on jquery (i.e. it must be defined after jquery) but you have duplicated your files. In the head you have included <script src="~/Scripts/jquery-1.8.2.js"></script> followed by jquery-ui. You then reload jquery at the end of the file using #Scripts.Render("~/bundles/jquery") (Its now after jquery-ui).
Delete the script in the head and it should work. I addition, I recommend you delete jquery.validate and jquery.validate.unobtrusive from the head and use #Scripts.Render("~/bundles/jqueryval") at the end of the file (before #RenderSection..). You can examine these bundles in App_Start\BundleConfig.cs file. There are numerous advantages to using bundles (see Bundling and Minification).
If you are using all these files in every page based on _Layout, you can define your own bundle to includes all files.
You need to define the strategy for your js. I recomend you ot organize your js first and after that separate it to smaller parts. One should be common for all the pages(jQuery in your case) and other scripts for validation should be included only on pages that have some editing fileds etc.
Use DRY principle and read some information about how js works. It helps me a lot some time ago and won't take a lot of time.
I am using the latest canary build of Emberjs-1.0.0 and Ember-data 1.0.0-beta-2 on a rails-4 app. When I use this jsfiddle with the exact code in emberjs app from the rails app, no error is thrown, but when I start the rails app and try to go to the index page of the ember-app, it will throw the error Uncaught TypeError: Object [object Object] has no method 'applyPartial'
Nothing else is mentioned making it hard to debug or pin down the exact issue. I have removed turbo-links, so it is not a factor here.
Based on the uncaught exception thrown, it boils down to this line in emberjs
https://github.com/emberjs/ember.js/blob/8624e8513a8db0294856cd3f559127dd7a7820b3/packages/ember-runtime/lib/system/core_object.js#L147
Class.PrototypeMixin.applyPartial(Class.prototype);
This screenshots are based on the emberjs-app not loading from within a rails-4 app
A screenshot of the callstack, here is shows superclass as Store, other times it shows unknownMixin
#Jeremy here is the full list of tags that appear in my page after rendering. I got this via view page source I have ran rake tmp:clear rake assets:clean, but the problem is still there
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/handlebars.js?body=1"></script>
<script src="/assets/ember.js?body=1"></script>
<script src="/assets/ember-data.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
<script src="/assets/store.js?body=1"></script>
<script src="/assets/models/users.js?body=1"></script>
<script src="/assets/controllers/application_controller.js?body=1"></script>
<script src="/assets/controllers/login_controller.js?body=1"></script>
<script src="/assets/controllers/signup_controller.js?body=1"></script>
<script src="/assets/controllers/user_controller.js?body=1"></script>
<script src="/assets/controllers/user_edit_controller.js?body=1"></script>
<script src="/assets/controllers/users_controller.js?body=1"></script>
<script src="/assets/templates/application.js?body=1"></script>
<script src="/assets/templates/index.js?body=1"></script>
<script src="/assets/templates/login.js?body=1"></script>
<script src="/assets/templates/signup.js?body=1"></script>
<script src="/assets/templates/user.js?body=1"></script>
<script src="/assets/templates/user/edit.js?body=1"></script>
<script src="/assets/templates/user/index.js?body=1"></script>
<script src="/assets/templates/users.js?body=1"></script>
<script src="/assets/templates/users/index.js?body=1"></script>
<script src="/assets/router.js?body=1"></script>
<script src="/assets/routes/application_route.js?body=1"></script>
<script src="/assets/routes/authenticated_route.js?body=1"></script>
<script src="/assets/routes/login_route.js?body=1"></script>
<script src="/assets/routes/signup_route.js?body=1"></script>
<script src="/assets/routes/user/edit_route.js?body=1"></script>
<script src="/assets/routes/user/index_route.js?body=1"></script>
<script src="/assets/routes/user_route.js?body=1"></script>
<script src="/assets/routes/users/index_route.js?body=1"></script>
<script src="/assets/routes/users_route.js?body=1"></script>
<script src="/assets/app.js?body=1"></script>
<script src="/assets/lib/development/ember-data.js?body=1"></script>
<script src="/assets/lib/development/ember.js?body=1"></script>
<script src="/assets/lib/production/ember-data.js?body=1"></script>
<script src="/assets/lib/production/ember.js?body=1"></script>
<script src="/assets/note_books.js?body=1"></script>
<script src="/assets/notes.js?body=1"></script>
Since you have ember-rails in your Gemfile you're probably getting the version of Ember that it provides, not the one that lives in app/assets/javascripts/lib/development. You can load /assets/ember.js in your browser to verify. If you want to make sure you get your custom version you should use this in application.js
//= require lib/development/ember
Alternatively to be extra sure, you could remove ember from application.js completely and include the latest canary ember directly in your layout.
<script type='text/javascript' src="http://builds.emberjs.com/canary/ember.js"></script>
[UPDATE] : OK, the problem is that you're including ember.js multiple times (and possibly with multiple versions). I missed it when you first posted your bit list of script tags, but if you look at that closely you'll see that Ember and Ember Data are included at the top (lines 4 and 5 of the scripts), and then they're each included two mored times at the bottom.
...
<script src="/assets/ember.js?body=1"></script>
<script src="/assets/ember-data.js?body=1"></script>
...
<script src="/assets/lib/development/ember-data.js?body=1"></script>
<script src="/assets/lib/development/ember.js?body=1"></script>
<script src="/assets/lib/production/ember-data.js?body=1"></script>
<script src="/assets/lib/production/ember.js?body=1"></script>
...
My guess is that application.js is requiring ember once on purpose with
//= require ember
And then it's getting picked up again with a require_tree
//= require_tree .
Usually you want to store external libraries (code that you do not personally maintain) in the vendor directory of your app. This would allow to still use require_tree to get all of your own javascript included in one shot. In my project that uses ember-rails my structure looks like this:
app
assets
javascripts
# All my own stuff goes here
vendor
assets
ember
development
ember.js
ember-data.js
production
ember.js
ember-data.js
ember-rails will find the versions in vendor if you just use require ember in application.js. You'll want to make sure that you set config.ember.variant in each of your config/environments/*.rb files. For instance in config/environments/development.rb you'll need to add this :
config.ember.variant = :development
I'm trying to put the jQuery Booklet plugin on a site that uses the 1.3.2 library - I can't remove this reference or upgrade. I have successfully used noConflict in the past with other plugins that require a newer version of jQuery on this site.
When I test locally and include the 1.3.2 reference, Firebug console tells me:
but the book still loads correctly and functions. Not sure what that error means. When I put the code onto my development site, the images in the book appear one stacked on top of the other, navigation buttons are missing, and I see an error in the Firebug console that says
TypeError: p2.offset(...) is undefined
[Break On This Error]
p2.offset().left + pWidth - hoverFullWidth,
In IE it tells me:
SCRIPT5007: Unable to get property 'left' of undefined or null reference
jquery.booklet.latest.js, line 1205 character 2
This is the code in question, part of jquery.booklet.latest.js
p3.draggable({
axis: "x",
containment: [
target.offset().left,
0,
p2.offset().left + pWidth - hoverFullWidth,
pHeight
],
Something isn't loading correctly. The scripts look like this in my page in my development environment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="/wcsstore/CVWEB/images/home/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/wcsstore/CVWEB/images/home/js/jquery.booklet.latest.js" type="text/javascript"></script>
<link href="/opencms/opencms/CVWEB/css/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />
<script type="text/javascript">
var $j = jQuery.noConflict(true);
$j(document).ready(function(){
$j(function () {
$j("#mybook").booklet();
});
});
</script>
Is there something extra I need to do with noConflict since there are so many other scripts? Do I need to modify the jquery.booklet.latest.js file to include noConflict somehow? I tried declaring the variable and replacing $ like above but that didn't do anything.
I looked here and here to try to solve the easing error, but I am already including all the correct scripts.
I tried the solution here of using jQuery instead of $ with no luck.
I'm still pretty green when it comes to jQuery so any help is appreciated. Thank you.
I am about to move on to a different option but wanted to post here so I can learn what the problem is.
It must be your incomplete src location.
It should be something like this, as if running from localhost:
<script src="http://localhost/wcsstore/CVWEB/images/home/js/jquery.easing.1.3.js" type="text/javascript"></script>
Ive read the other questions about this and I know that this is related to date picker not loaded on the page. however I would like to know how to figure out which functions have loaded with JQuery.
The code I'm using is quite basic so I'm not certain why this is failing anyways:
<script type='text/JavaScript' src='jquery.js'></script>
<script type='text/JavaScript' src='jquery.ui.core.js'></script>
<script type='text/JavaScript' src='jquery.ui.widget.js'></script>
<script type='text/JavaScript' src='jquery.ui.datepicker.js'></script>
<script src='jquery.validate.js' type='text/javascript'></script>
<link href='jquery_ui_base\jquery.ui.all.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
jQuery(function() {
calender();
});
function calender(){
$( '#datepicker' ).datepicker()
}
</script>
this usually happens when the jquery core and/or the datepicker js is not being loaded.
check if it's loading (a 200 response). Make sure you have the correct paths and proper read permissions.
also, make sure the jquery core is loaded before the datepicker, and that datepicker is loaded before $( '#datepicker' ).datepicker() .
Also, you could try uploading a new version of datepicker.
I try to load tinymce scripts for my site:
<script src="/Content/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="/Content/tiny_mce/tiny_mce_popup.js" type="text/javascript"></script>
but during the process I receive TypeError: tinymce is null from tiny_mce_popup.js
Is there a problem with tinymce?
I use tinymce 3.5.6
The problem was that I should not put these two files together. tiny_mce_popup.js should be used only in the document which should be a popup.