Globalize with Devexpress Angular 2 - javascript

Has anyone used Globalize with Devexpress dateboxes? Cannot find how to make it work, obviously I would like to localize date format for countries like England/Germany/USA etc...

The sample below applies to AngularJS/Jquery, but you can extrapolate to Angular2
First of all you have to download the CLDR
Once you downloaded it in json format you have to load it into the Globalize and set your locale see sample code below (see at the bottom of the sample code to check the locale in my case it is es for spanish).
GlobalizeFunc: function () {
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/supplemental/likelySubtags.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/ca-generic.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/ca-gregorian.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/dateFields.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/timeZoneNames.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/numbers/es/numbers.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
Globalize.locale("es");
},
At this point your controls have been globalized, including calendars and date pickers.

Related

AJAX: How to get array on multi dimensional array

I have a json which is . I just want to get specific data which is
obj['contacts']['name']
How can i get
obj['contacts']['name']
name on Contacts array
This is my code:
$.ajax({
type: 'GET',
dataType: 'json',
url: uri,
cache: false,
contentType: 'application/json',
success: function(data) {
for (var obj in data) {
console.log(obj['contacts']['name']);
}
}
});
In your case this is how you want get name from contacts
$.ajax({
type: 'GET',
dataType: 'json',
url: uri,
cache: false,
contentType: 'application/json',
success: function(data) {
if (!data.contacts) return;
var names = data.contacts.map(function(dt) {
return dt.name;
});
console.log(names);
}
});
Just enumerate the returned object "contacts" property:
$.ajax({
type: 'GET',
dataType: 'json',
url: uri,
cache: false,
contentType: 'application/json',
success: function(data) {
data.contacts.forEach(function(contact) {
console.log(contact.name);
});
}
});

How to access the data from an ajax call outside the function itself

This code gets a json object from another server.
How do I access the response outside of the function?
(function($) {
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'callback',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
var data = json;
}
})
})(jQuery);
You can do something like this!
_outerMethod: function(data) {
//...do what you need to do
}, (function($) {
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'callback',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
_outerMethod(json);
}
})
})(jQuery);

jQuery fade-in-out animation

I need to add a fade-in-out transition animation to this ajax loading code. Could someone explain me how to do it please?
JS :
function loadPage(url)
{
url=url.replace('#page','');
$('#loading').css('visibility','visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#loading').css('visibility','hidden');
}
}
});
}
Use beforeSend() function of ajax request to fadeIn() and in success fadeOut()
$('#loading').css('visibility', 'visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page=' + url,
dataType: "html",
beforeSend: function () {
$('#loading').fadeIn();
},
success: function (msg) {
if (parseInt(msg) != 0) {
$('#pageContent').html(msg);
$('#loading').fadeOut();
}
}
});
I hope you want to show the effects on success of the ajax result. You may try this.
$.ajax({
type: "POST",
url: "institutions-filter.action",
data: data,
cache: false,
success: function(msg)
{
if(parseInt(msg)!=0)
{
$('#loading').css('visibility','hidden');
$("#pageContent").fadeOut(400, function()
{
$("#pageContent").html(msg).fadeIn(400);
});
}
}
});

ajax request not working on IE

function VReload()
{
$.ajax({
type: "GET",
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});
This piece of code is working fine on Mozilla and chrome but not on IE. Ajax call is not firing on IE. What could be the reason.
Switch off caching by doing this:
$.ajax({
type: "GET",
cache: false,
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});
set cache false
$.ajaxSetup({ cache: false });
or
$.ajax({
cache: false,
//other options
});
Try this:
function VReload()
{
var timestamp = new Date();
$.ajax({
type: "GET",
url: "/foo/" + "&timestamp=" + timestamp.getTime(),
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});
use jQuery's $.get() function
$.get('/foo/', {}, function(data){
// whatever
});

jQuery 1.4.2 IE8 error on page expected ')'

I'm having an issue with IE8 (nothing new there). The error I'm getting is not making much sense as it does not occur on FF or Chrome. Here's the code:
function remComp(id, trade) {
$.ajax({
url: "functions/removePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO create error handler
}
});
}
In this function it is complaining about the line where the success callback is defined. This function has not even been called yet though? But when it does get called, it works perfectly fine, although still creates new errors?
The function that is being called though is:
function loadComps(trade) {
$.ajax({
url: "functions/loadPriceSurveyComparisons.php",
type: "POST",
async: true,
data: "trade="+trade,
cache: false,
dataType: "html",
success: function(comps) {
$("#current"+trade).html(comps);
}
});
}
The second function is basically getting called 3 times when the page loads. Any advice?
Here is the complete script block as well:
function remComp(id, trade) {
$.ajax({
url: "functions/removePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO create error handler
}
});
}
function addComp(trade, albId, compId) {
$.ajax({
url: "functions/addPriceSurveyComparison.php",
type: "POST",
async: true,
data: "trade="+trade+"&albId="+albId+"&compId="+compId,
cache: false,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO add an error handler
}
});
}
function updateComp(id, trade) {
var albId = $("select#albProd"+id).val();
var compId = $("select#compProd"+id).val();
$.ajax({
url: "functions/updatePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id+"&albId="+albId+"&compId="+compId,
cache: false,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
// reload table for this trade
loadComps(trade);
}// TODO create error handler
}
});
}
// function that loads all of the comparisons for a specific trade
function loadComps(trade) {
$.ajax({
url: "functions/loadPriceSurveyComparisons.php",
type: "POST",
async: true,
data: "trade="+trade,
cache: false,
dataType: "html",
success: function(comps) {
$("#current"+trade).html(comps);
}
});
}
// define document.ready function
$(document).ready(function() {
// load all of the comparisons for each trade
<?php
foreach ($trades as $trade) {
echo "loadComps(\"$trade\");\n";
?>
$("#addComp<?php echo $trade; ?>").click(function(e) {
e.preventDefault();
addComp("<?php echo $trade; ?>", $("#albProd<?php echo $trade; ?>").val(), $("#compProd<?php echo $trade; ?>").val());
});
<?php
}
?>
});
JSLint's error message "Implied Global" means that there are variables defined that are missing the "var" definition... this is especially problematic for IE8. You need to go through and add "var" to the line numbers listed (yes, there are lots).
Are you using an Asset Packager? The order of how assets are listed in your asset packager could be at fault here.

Categories