Globalization in JQuery is not working - javascript

I have been following theScott Hanselman Tutorial on Globalized Javascript Validation. It is a great tutorial wich made me understand a topic I'm not that familiar with a bit better. The only problem is that it's a bit outdated because the link he provided to files like jquery.glob.fr.js is invalid. But you get redirected to the improved version by Jquery.
That's ok, but They just don't do what they promise to do. I tried searching for tutorials and information about this, but the only help on the internet is the ReadMe file. They state this =>
Globalize.culture( "fr" );
console.log( Globalize.culture().name ) // "fr"
Globalize.culture( "fr-FR" );
console.log( Globalize.culture().name ) // "fr-FR"
But when I try it my alertbox returns en instead of nl-BE
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/globalize.culture.nl.js" type="text/javascript"></script>
<script src="../../Scripts/globalize.culture.nl-BE.js" type="text/javascript"></script>
<script src="../../Scripts/modernizr-1.7.js" type="text/javascript"></script>
<script src="../../Scripts/globalize.js" type="text/javascript"></script>
#Html.MetaAcceptLanguage()
<script type="text/javascript">
$(document).ready(function () {
//Ask ASP.NET what culture we prefer, because we stuck it in a meta tag
var data = $("meta[name='accept-language']").attr("content")
//Tell jQuery to figure it out also on the client side.
alert(data.toString());
Globalize.culture("nl-BE");
alert(Globalize.culture().name);
});
</script>
At first I tried Globalize.culture(data), it didn't work so i tried nl-BE like the documentation states. No difference.
How do I get to change the culture to nl-BE instead of en?

Related

Javascript files loaded but calls not working

I will be using the same header on two sites, one is already up and running with no issues, the second I can't seem to get my Javascript to work despite it being the exact same code as on the site that does work?
Here is the scripts and the Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"></script>
<script src="js/tinynav.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel').carouFredSel({
pagination : "#sliderpagi",
scroll : {
duration : 1000,
pauseOnHover : true
}
});
$('.mobilemenu').tinyNav();
});
</script>
I have checked all the files are where they should be to rule that out or before it is suggested.
Can anyone shed some light on this? Been fighting with it the best part of the day. I'd love to get it working but also understand why the same code works on a different site?
Also to note - I have the same HTML for the Carousel and tinynav as i do on the working site.

javascript tab function not working

I am trying to make wall script like google+ but i have one problem. Users can share pictures and videos I've created a base. However, the tab does not work currently. Reason ... <script type="text/javascript"> </ script> I think it is relevant. .... tags into the tags I add the script call. But by far misunderstood. but I could not. I'm giving you my code below.
Head
<head>
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery.min2.js"></script>
<script src="jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
</head>
Call javascript function This function for post cancel or submit
<script type="text/javascript">
$(function(){
$(".content").focus(function(){
$(this).animate({"height": "55px",}, "fast" );
$("#button_hide").slideDown("fast");
return false;
});
$("#cancel").click(function(){
$(".content").animate({"height": "30px",}, "fast" );
$("#button_hide").slideUp("fast");
return false;
});
});
</script>
and this javascript function is for Photo and video click open box also this function is not working now.
<script type="text/javascript">
$(document).ready(function(){
$(".oculto").hide();
$(".MO").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide();
$(nodo).fadeToggle( "slow" );
return false;
}
});
});
</script>
This link is my tutotiral link. If you check this page you can understand me. If you click photo photo share panel will not open also video share panel not working.
http://goo.gl/i98FNX
What is there in this file js/jquery.min2.js? If it is the jquery library, please remove it because you have a google cdn code in the same file. In addition, you are using a old version of jquery. Since 1.4 many things have changed in jQuery so, please use the latest version of jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
I think that leads up the tab portions. Just like facebook. I understand that you have used bubble box. If you want three different areas. For example: status, video, link to share, create the base area. This will provide you more convenience.
You can write your php code easier.
Because sharing is currently part of three different courses you want to use a single form. But you can spend more time for it. However, creating three forms that will be easier if you make sharing.
Share your theme really nice congratulations. However troubling.
I've studied your own scripts. Bonding between the lines of the script too much. This is not true. Create a new js file and then type into the function you are using. Gators later use the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/yourscript.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
In this way, your problems will disappear.

Plugging in a jQuery plugin

I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:
Uncaught TypeError: Object [object Object] has no method 'tokenInput'
Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
And showing that tokeninput has loaded:
Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:
<script src="http://code.jquery.com/jquery.js"></script>
It seems having multiple versions of jQuery loaded is not a good thing to do.
I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.
Then try this
<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();
j(document).ready(function () {
j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/

JavaScript working on fiddle but not in site

Good day!
I have recently acquired a code and was passed on using fiddle. It works fine on the fiddle but when I am trying to implement it on my site.
Head tag contains:
<head>
<title>NQA Insert</title>
<script type="text/javascript" src="NQAa.js">
</script>
</head>
While NQA.js contains:
$('#bill50').on('change', function() {
var date30 = new Date($(this).val());
date30.setDate(date30.getDate()+30);
var date20 = new Date($(this).val());
date20.setDate(date20.getDate()+60);
$('#bill30').val(date30.toJSON().slice(0,10));
$('#bill20').val(date20.toJSON().slice(0,10));
});
Note 1: If you input a date on bill50, the value on bill30 and bill20 also changes.
Note 2: I am implementing this on a php page. Maybe this helps...
Why is it that when implementing it on the site, it doesn't work at all? Is there anything wrong in my calling of the jscript..?
you need to include the jQuery library, as you can see in your jsFiddle he's including jQuery 1.8.3, you should add it in your "head" tag just before the js script you bought.
You'll get something like this:
<head>
<title>NQA Insert</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js">
<script type="text/javascript" src="NQAa.js">
</script>
</head>

MVC3 Date validation using globalize library script

I am trying to get my MVC3, EF4 project to work with the javascript datepicker, but I am running into issues as I want the date to be in the UK format (dd/mm/yyyy).
I have spent several hours researching this issue and I have decided to implement the 'globalize' library scripts as I have seen in this link.
However I am getting a Uncaught TypeError: Cannot read property 'methods' of undefined in the javascript (coming from the $.validator.methods.date line) when I run it. My knowledge of javascript is pretty limited and all the examples I have found that use the 'globalize' library have no mention of this error and therefore I am quite stumped.
I have shown the relevant code from my view below:
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.en-GB.js")" type="text/javascript"></script>
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Globalize.culture("en-GB");
$.validator.methods.date = function (value, element) { return this.optional(element) || Globalize.parseDate(value); }
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>
//SNIP
<div class="editor-field">
#Html.TextBox("Expires", Model.Expires, new { #class = "date" })
#Html.ValidationMessageFor(model => model.Expires)
</div>
Could someone please help me fix this issue.
Thanks very much.
I haven't used the Globalize library in a while but I feel like it might be overkill for you -- assuming that you only need the date value in en-GB, the following Javascript/jQuery code will work (and here is a fiddle):
<input type="text" class="date" placeholder="en-gb datepicker" />
<button id="btnGetVal">Get Value</button>
<script type="text/javascript">
$(document).ready(function () {
/* you correctly have the date format set when initializing the datepicker */
$('.date').datepicker({ dateFormat: "dd/mm/yy" });
/* create an event handler for the "click" function of the button */
$('#btnGetVal').on('click', function() {
/* event handler */
var targetValue = $('.date').val();
alert(targetValue);
});
});
</script>
I tested this with jQuery 2.1.0 and jQuery UI 1.10.4 - you may need to update your NuGet packages for both (I see you're using a really old version of jQuery so I assume you either need to support IE8 or are using an older version of MVC).
As an aside, you may want to make sure you initialize all of your Javascript code inside of the document.ready() function so that all functions are accessible upon load (because your Globalize code could not be accessible when you init the datepicker(). I'd recommend reading more here: http://learn.jquery.com/using-jquery-core/document-ready/

Categories