I am trying to setup jquery globalize using the js/json setup suggested (for date module), using a javascript example suggested here.
In this code I am trying to set it up and the use it to format the jquery-ui datepicker:
(function () {
$(function () {
$.when(
$.getJSON("/Scripts/cldr/cldr-json/cldr-core-master/supplemental/likelySubtags.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-numbers-modern-master/main/en/numbers.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-core-master/supplemental/numberingSystems.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-dates-modern-master/main/en/ca-gregorian.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-dates-full-master/main/en/timeZoneNames.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-core-master/supplemental/timeData.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-core-master/supplemental/weekData.json")
).then(function () {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
}).then(Globalize.load).then(function () {
var culture = "en";
Globalize(culture);
$("input.datepicker").datepicker({
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
dateFormat: Globalize.dateFormatter({ date: "short" })
});
});
});})();
And the error I get is
E_DEFAULT_LOCALE_NOT_DEFINED: Default locale has not been defined. in globalize.js # line 105
What am I doing wrong?
I used same code and had same error. Instead of:
var culture = "en";
Globalize(culture);
$("input.datepicker").datepicker({
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
dateFormat: Globalize.dateFormatter({ date: "short" })
});
I just had: Globalize.locale("en"); and that fixed it.
Make sure your function is called
Make sure all your json objects are fetched
Related
I am doing a school project that need to use jsoup to scrape some datas from certain website.
I saw a button as following attribute:
<a rel="nofollow"
onclick="getRedirectPage(37443499,2206,801)"
class="showtime_btn btn btn-default seat_3"
id="37443499"
href="javascript:void(0)" role="button">06:40PM
<br>
<small>IMAX 3D</small
></a>
//below is the getRedirect method. I was trying to understand it,
but I dont know what language they using, have no idea where to learn the necessary knowledge to understand it, please help me out.
thank you !!
var timeout = "";
function clickRedirect(){
ga('send', 'event', 'Redirect_CTA', 'click', viewModel.popupRedirectAdsEventName());
}
function getRedirectPage(shid, movieid, cinemaid){
$('#page-overlay').show();
ga('send', 'event', 'Movie_SelectShowtime', 'click_showtime', movieid, cinemaid);
$.get("https://www.popcorn.app/sg/showtime/redirect",
{
showtimeid: shid
},
function (data){
setTimeout(function(){
$('#page-overlay').fadeOut();
},100);
var dt = JSON.parse(data);
if(dt.status > 0){
dt = dt.data;
viewModel.popupRedirectToLang(dt.lang_redirectto.replace('%s', dt.site));
viewModel.popupDisclaimer(dt.lang_disclaimer);
if(dt.redirect_ads != undefined && dt.redirect_ads.event_name != undefined){
viewModel.isExternalTraffic(true);
viewModel.popupRedirectAdsUrl(dt.redirect_ads.url);
viewModel.popupRedirectAdsLabel(dt.redirect_ads.label);
viewModel.popupRedirectAdsEventName(dt.redirect_ads.event_name);
}else{
viewModel.isExternalTraffic(false);
}
viewModel.popupRedirectNote(dt.lang_redirectnote);
viewModel.popupFollowUrl(dt.follow);
viewModel.popupLangBtn(dt.lang_btn_txt);
viewModel.targetBlank("_blank");
//campaign:
if(dt.campaigns != undefined && dt.campaigns.trackingUrl != undefined){
viewModel.isCampaignValid(true);
viewModel.adImage(dt.campaigns.adImage);
viewModel.campaignName(dt.campaigns.campaignName);
viewModel.isSmallerFont(dt.campaigns.isSmallerFont);
viewModel.campaignPercentage(dt.campaigns.campaignPercentage);
viewModel.companyName(dt.campaigns.companyName);
viewModel.campaignAddress(dt.campaigns.campaignAddress);
viewModel.campaignTrackingUrl(dt.campaigns.trackingUrl);
viewModel.discountedPrice(dt.campaigns.discountedPrice);
viewModel.originalPrice(dt.campaigns.originalPrice);
}else{
viewModel.isCampaignValid(false);
}
$("#redirectPopupTarget").show();
$(".close_btn").click(function(){
clearTimeout(timeout);
$("#redirectPopupTarget").hide();
});
timeout = setTimeout(function(){
window.location.href = dt.follow;
},5000);
}
})
.error(function (er) {
console.log("Error:", er.responseText);
});
}
$(document).ready(function(){
$("#redirectPopupTarget").css('height', $(window).height());
});
enter image description here
below link is the id = redirectPopupTarget
This is javascript with jQuery. This code does some other things, but I think you are most interested in getting redirect link.
This is done by sending request to https://www.popcorn.app/sg/showtime/redirect?showtimeid=shid. Where shid is first parameter of you javascript function (https://www.popcorn.app/sg/showtime/redirect?showtimeid=37443499).
The response to this request is in form of JSON and element you are looking for is in the field follow
I'm using fullcalendar v2 and the sources of the events are selectable from an ul-li menu. The initial call uses the link from the first li and I may navigate through all the months in the calendar. When I use the second link, fullcalendar retrieves the events from the previous link as well as the new link. On each new select, fullcalendar remember the event sources. How can I disable this? Here my code:
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource');
// refill calendar
fillEvents(urlEvents, branchName);
});
function fillEvents(urlEvents, branchName) {
// change title of potlet box
var newTitle = '<i class="fa fa-calendar"></i> Available schedules for: ' + branchName;
$('#calendarCaption').html(newTitle);
$('#calendarSchedules').fullCalendar({
year: <?= $yy ?>,
month: <?= --$mm ?>, // javascript month is 0 based
date: 1,
header: {
left: '',
center: 'title',
right: 'prev,next,today'
},
defaultView: 'month',
firstDay: 1, // monday
editable: false,
slotEventOverlap: false,
selectable: true,
selectHelper: true,
dayRender: function (view, element) {
$('.fc td.fc-sun').css('background', '#E7EFEF');
$('.fc td.fc-sat').css('background', '#E7EFEF');
},
eventClick: function (event) {
$('#dueTime').show();
$('#duedate').val(moment(event.start).format('YYYY-MM-DD'));
$('#duetime').val(moment(event.start).format('HH:mm:ss'));
$('#isPartitionable').val(event.partitionable); // user clicked on partitionable dispo or not
}
});
$('#calendarSchedules').fullCalendar('addEventSource', urlEvents);
}
// load first branch item
$('#chgBranch li a:first').trigger('click');
I think you should destroy your calendar also. Because you are initializing fullcalendar every tine on sources change from ul-li.
Try below one.
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarCaption').fullCalendar( 'destroy' );
// refill calendar
fillEvents(urlEvents, branchName);
});
This will work for sure. I tried locally and works fine.
I tried it with following method which also works fine, but #Chintan method is also fine:
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource', storedEventSource);
And I store the event source in a hidden field once the calendar rendered.
I'm trying to use moment().format() with fullcalendar; I have this code:
<script src="<?php echo ASSETS_URL; ?>/js/plugin/fullcalendar/lib/moment.js"></script>
<script> moment().format() </script>
<script type="text/javascript">
$('#calendar').fullCalendar({
header: hdr,
buttonText: {
prev: '<i class="fa fa-chevron-left"></i>',
next: '<i class="fa fa-chevron-right"></i>'
},
defaultView: "agendaWeek",
editable: true,
droppable: false, // this allows things to be dropped onto the calendar !!!
lang: 'it',
timeFormat: 'H(:mm)',
firstDay: 1,
drop: function (date, allDay) { // this function is called when something is dropped
events: [{
}],
eventDragStart: function( event, jsEvent, ui, view ) {
ev_start=event.start.moment().format("dddd (d) DDD - D/MM/YY");
console.log(ev_start);
},
},
When I drag an element from calendar there is this error:
Uncaught TypeError: undefined is not a function
I done some debug and the error is caused by moment().format()
Anyone could help me?
If you receive that error on that line, check your moment.js file is good.
Then, this line is wrong:
ev_start=event.start.moment().format("dddd (d) DDD - D/MM/YY");
If event.start it's a timedate you should do this:
ev_start = moment(event.start).format("dddd (d) DDD - D/MM/YY");
I want to know how to bind/set template-passed-parameter-value to click event of an item in the template in Meteor.
I'm using Meteor 0.7.0.1 with Blaze UI package. My main idea is to build a re-usable custom components in Meteor with Blaze template engine.
I have the following component which is working fine at the moment but I want this to be more customizable and remove some dependencies.
This is my component template named postLinks
<template name="postLinks">
<div id="link-popover-wrapper" >
<ul class="link-popover">
{{#each linkOptions}}
<li><a tabindex="-1" class="link-action" id="link-{{value}}" href="#">{{label}}</a>
</li>
{{/each}}
</ul>
</div>
</template>
This postLinks component is used in the myPostItem helper.
Template.myPostItem.events({
'click .post-item-link-picker': function (evt, tmpl) {
var tmpPostId = this._id;
var tempData = {linkOptions:[{label:'Favorite', value : 'favorite'},{label:'Wish list', value : 'wishlist'},{label:'Later', value : 'later'}, {label:"Read", value:"read"}]};
var linkContent = Template.postLinks(tempData);
$(".item-link-picker").popover({
content: linkContent, html: true, placement: 'bottom', trigger: "manual",
template: "UI_POPOVER_TEMPLATE"});
$("#item-link-picker-"+tmpPostId).popover('show');
},
'click .link-action': function (evt, tmpl) {
//.... some code here to update link selection in db
}
});
Above code is working fine and I want to improve it to have following
Pass item click event externally to be bind to link-action like
After above two changes it will look like :
Template.myPostItem.events({
'click .post-item-link-picker': function (evt, tmpl) {
var tmpPostId = this._id;
var tempData = { itemClick:function(){}, linkOptions:[{label:'Favorite', value : 'favorite'},...]};
var linkContent = Template.postLinks(tempData);
$(".item-link-picker").popover({
content: linkContent, html: true, placement: 'bottom', trigger: "manual",
template: "UI_POPOVER_TEMPLATE"});
$("#item-link-picker-"+tmpPostId).popover('show');
}
});
I lack knowledge how/where to bind that passed event handling function to link-action elements in template or helper. I really appreciate if anybody could help to find a way to do that.
You go the other way around and use jQuery event triggering system, so
Template.myPostItem.events({
'click .link-action': function (evt, tmpl) {
$(evn.target).trigger('post-link-action', this /* extra data */);
},
});
This event can be easily catched in any parent template:
<template name="someOtherTamplate">
{{> myPostItem}}
</template>
Template.someOtherTemplate.events({
'post-link-action': function (evt, tmpl, extra) {
// the user of your component can define their custom behavior here
},
});
Please note that the event extra parameter will only be supported in the next Meteor release. Currently (0.8.0) it is included in the devel branch.
I tried to play with the leaderboard example by adding a button to toggle sorting by name/score.
I succeed in adding event, but I also want to change the text value on the button.
I expect the added button text value(sort by name/score) get updated reactively(every time I click the button), however it fails to do so, only get updated when manually click on the player item.
Code added:
leaderboard.html(leaderboard template):
<template name="leaderboard">
<div class="leaderboard">
<input type="button" name="sort" value="Sort by {{sort_type}}" class='sort'/>
{{#each players}}
{{> player}}
{{/each}}
</div>
{{#if selected_name}}
<div class="details">
<div class="name">{{selected_name}}</div>
<input type="button" class="inc" value="Give 5 points" />
</div>
{{else}}
<div class="none">Click a player to select</div>
{{/if}}
</template>
leaderboard.js(client part):
if (Meteor.isClient) {
Meteor.startup(function(){
Session.setDefault('sort_order', {score: -1, name: 1});
Session.setDefault('sort', 'name');
});
Template.leaderboard.players = function () {
return Players.find({}, {sort: Session.get('sort_order')});
};
Template.leaderboard.selected_name = function () {
var player = Players.findOne(Session.get("selected_player"));
return player && player.name;
};
Template.leaderboard.sort_type = function() {
return Session.get('sort');
};
Template.player.selected = function () {
return Session.equals("selected_player", this._id) ? "selected" : '';
};
Template.leaderboard.events({
'click input.inc': function () {
Players.update(Session.get("selected_player"), {$inc: {score: 5}});
},
'click input.sort': function(){
var sort_order = Session.get('sort_order');
if (_.isEqual(sort_order, {score: -1, name: 1}) || _.isEqual(sort_order, {score: 1})) {
Session.set('sort_order', {name: 1});
Session.set('sort', 'score');
} else if (_.isEqual(sort_order, {name: 1})){
Session.set('sort_order', {score: 1});
Session.set('sort', 'name');
}
}
});
Template.player.events({
'click': function () {
Session.set("selected_player", this._id);
}
});
}
Thanks!
B.R.
Ian
This has to do with the preserve-inputs package. From the Meteor Docs:
By default, new Meteor apps automatically include the preserve-inputs package. This preserves all elements of type input, textarea, button, select, and option that have unique id attributes or that have name attributes that are unique within an enclosing element with an id attribute. To turn off this default behavior, simply remove the preserve-inputs package.
So basically because your button has a name attribute, Meteor is preventing it from changing when the template is re-rendered. There are three ways you can solve this:
Simply remove the name attribute from your input.sort attribute.
Remove the preserve-inputs package (not recommended if you're using the current template engine).
You can use the preview release of the new Meteor template engine, which no longer needs the preserve-inputs package because it automatically does more fine-grained DOM updates. You can run the app once with the preview release using:
meteor --release shark-1-29-2014-e
Or you can tell Meteor to update your app to this version by running:
meteor update --release shark-1-29-2014-e
Note that this new templating engine will be included in the Meteor core release by 1.0.