I'm trying to learn jVectormap and I'm stuck trying to return the country when clicked on. Is there any way to convert the code into a country, or just get the country when clicking on the map?
<script>
$(function () {
$('#world-map').vectorMap ({
onRegionClick: function (e, code) {
console.log (code);
}
});
});
</script>
Here ya go
onRegionClick: function (event, code) {
var map = $('#world-map').vectorMap('get', 'mapObject');
var name = map.getRegionName(code);
},
Use this
onRegionClick:function(event, code){
var name = (code);
window.location.href("http://your url address"+ code);
}
change the "your url adress" to your link address.
All script
<script>
$(function(){
$('#world-map').vectorMap({
onRegionClick:function(event, code){
var name = (code);
window.location.href("http://your url address"+ code);
}
});
});
</script>
Related
I am using Google transliterate in my application.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("elements", "1", { packages: "transliteration" });
</script>
<script>
function OnLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.TAMIL],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
//farmer name
var control = new google.elements.transliteration.TransliterationControl(options);
control.makeTransliteratable(["txtFarmer_nameTn"]);
var keyVal = 32; // Space key
$("#txtFarmer_nameEng").on('keydown', function (event) {
if (event.keyCode === 32) {
var engText = $("#txtFarmer_nameEng").val() + " ";
var engTextArray = engText.split(" ");
$("#txtFarmer_nameTn").val($("#txtFarmer_nameTn").val() + engTextArray[engTextArray.length - 2]);
document.getElementById("txtFarmer_nameTn").focus();
$("#txtFarmer_nameTn").trigger(
{
type: 'keypress', keyCode: keyVal, which: keyVal, charCode: keyVal
});
}
var txt1 = document.getElementById("txtFarmer_nameEng").value;
if (txt1.length == 1) {
document.getElementById("txtFarmer_nameTn").value = "";
}
});
$("#txtFarmer_nameTn").bind("keyup", function (event) {
setTimeout(function () {
$("#txtFarmer_nameEng").val($("#txtFarmer_nameEng").val() + " ");
document.getElementById("txtFarmer_nameEng").focus()
}, 0);
});
}
google.setOnLoadCallback(OnLoad);
</script>
It is also working fine. But the problem is the text was translated only after hit the Space Bar. I need to translate the text on every key press.
Here is the reference
Please suggest any solution. I was roaming over google, but i can't get the exact solution. Suggest What to use instead of Google Transliterate API.
Thanks in advance.
The way which you are going is wrong with Google translate. Google is not allow with dynamically adding tab or space bar key for translate language.
We must be press Tab or Space bar key after written text by physically.
I am trying to define a new ReactiveVar variable to be accessible in all the template sections (ex. .events, .helpers, .rendered ...etc) as shown in my code below, yet I am always getting an error:
Error: Exception in template helper:
ReferenceError: logData is not defined
Can someone please tell me what I am missing / doing wrong here? Thanks
Code:
Template.detailedreport.rendered = function() {
var logData = new ReactiveVar;
logData.set([]);
};
Template.detailedreport.helpers({
myCollection: function () {
return logData.get();
}
});
Template.detailedreport.events({
'submit form': function(e) {
e.preventDefault();
var now = Session.get("startDate");
var then = Session.get("endDate");
var custID = Session.get("customer");
var projID = Session.get("project");
Meteor.call('logSummary', now, then, projID, custID, function(error, data){
if(error)
return alert(error.reason);
logData.set(data);
});
}
});
You need to define the ReactiveVar on the template instance like this :
Template.detailedreport.created = function() {
this.logData = new ReactiveVar([]);
};
Then you'll be able to access it in helpers like this :
Template.detailedreport.helpers({
myCollection: function () {
return Template.instance().logData.get();
}
});
In events you can use the template argument :
Template.detailedreport.events({
'submit form': function(e, template) {
e.preventDefault();
var now = Session.get("startDate");
var then = Session.get("endDate");
var custID = Session.get("customer");
var projID = Session.get("project");
Meteor.call('logSummary', now, then, projID, custID, function(error, data){
if(error){
return alert(error.reason);
}
template.logData.set(data);
});
}
});
I am using Reactive-table to display paginated data in my meteor.js app as shown below, yet data displayed in Reactive-table is dependent on on specific user event (Selecting client, project, date range and clicking on the submit button). So I was wondering if it is possible to trigger template.helpers >> myCollection function from the 'submit form' event? OR is it better to define a global variable to store data returned from user query based on the user (client, project, date range selection) then make this global variable the return from the myCollection function?
I have tried researching how to call .helpers function from an template.events event but couldn't find any information. So any help on which approach is better and if calling the .events function is better then how to do that, will be highly appreciated. Thanks.
Below is the code I have in my app:
Template.detailedreport.rendered = function() {
Session.set("dreport_customer", "");
Session.set("dreport_project", "");
Session.set("dreport_startDate", new Date());
Session.set("dreport_endDate", new Date());
$('.set-start-date').datetimepicker({
pickTime: false,
defaultDate: new Date()
});
$('.set-end-date').datetimepicker({
pickTime: false,
defaultDate: new Date()
});
$('.set-start-date').on("dp.change",function (e) {
Session.set("dreport_startDate", $('.set-start-date').data('DateTimePicker').getDate().toLocaleString());
});
$('.set-end-date').on("dp.change",function (e) {
Session.set("dreport_endDate", $('.set-end-date').data('DateTimePicker').getDate().toLocaleString());
});
};
Template.detailedreport.helpers({
customerslist: function() {
return Customers.find({}, {sort:{name: -1}});
},
projectslist: function() {
return Projects.find({customerid: Session.get("dreport_customer")}, {sort:{title: -1}});
},
myCollection: function () {
var now = Session.get("dreport_startDate");
var then = Session.get("dreport_endDate");
var custID = Session.get("dreport_customer");
var projID = Session.get("dreport_project");
Meteor.call('logSummary', now, then, projID, custID, function(error, data){
if(error)
return alert(error.reason);
return data;
});
}
},
settings: function () {
return {
rowsPerPage: 10,
showFilter: true,
showColumnToggles: false,
fields: [
{ key: '0._id.day', label: 'Day' },
{ key: '0.totalhours', label: 'Hours Spent'}
]
};
}
});
Template.detailedreport.events({
'submit form': function(e) {
e.preventDefault();
var now = $('.set-start-date').data('DateTimePicker').getDate().toLocaleString();
var then = $('.set-end-date').data('DateTimePicker').getDate().toLocaleString();
var custID = $(e.target).find('[name=customer]').val();
var projID = $(e.target).find('[name=project]').val();
//Here is the problem as I am not sure how to refresh myCollection function in .helpers
},
'change #customer': function(e){
Session.set("dreport_project", "");
Session.set("dreport_customer", e.currentTarget.value);
},
'change #project': function(e){
Session.set("dreport_project", e.currentTarget.value);
}
});
Template:
<div>
{{> reactiveTable class="table table-bordered table-hover" collection=myCollection settings=settings}}
</div>
Server:
Meteor.methods({
logSummary: function(startDate, endDate, projid, custid){
//Left without filtering based on date, proj, cust for testing only...
return Storylog.find({});
}
});
Template helpers are reactive, meaning that they will be recomputed if their dependencies change. So all you need to do is update their dependencies and then the myCollection helper will be recomputed.
Replace your comment // Here is the problem... with:
Session.set('dreport_endDate', then);
Session.set('dreport_startDate', now);
Session.set('dreport_project', projID);
Session.set('dreport_customer', custID);
I'm building a meteor app and on one route I'm adding multiple data context like so -
this.route('orgPage', {
path: '/org/:title',
data: {
orgs: function () {Orgs.findOne(this.params._id)},
projects: function() {Meteor.subscribe('projects', this.params._id)}
}
The only problem is that when I try to access this data in my templates js file, I can't access the _id or any of the attributes of orgs.
I've tried several approaches, but it always returns undefined. If I use a single data context, it works perfectly. Here is the function that doesn't function properly -
Template.orgPage.events({
'click #newProject': function(e) {
$('#npModal').modal();
},
'submit #npModal form': function(e, template) {
e.preventDefault();
if(!$(e.target).find('[name=newTitle]').val()) {
var projectTitle = 'Untitled'
} else {
var projectTitle = $(e.target).find('[name=newTitle]').val()
}
var theid = this._id;
var newProject = {
title: projectTitle,
organization: theid
}
Meteor.call('project', newProject, function(error, id) {
if (error)
return alert(error.reason);
$('#npModal').modal('hide');
$('#npModal').on('hidden.bs.modal', function (e) {
Router.go('newFields', {});
})
});
});
Anyone have any ideas? Thanks!!
You have missed a return statement. function () {Orgs.findOne(this.params._id)} should be function () {return Orgs.findOne(this.params._id)}. Further more, this inside this function won't refer to what you want, so you can't use this.params. And why do you subscribe to a subscription as a data context property? Do it in the waitOn function instead.
My code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="jquery.ui.map.full.min.js"></script>
<script>
function initialize() {
$('#map_canvas').gmap().bind('init', function() {
// This URL won't work on your localhost, so you need to change it
// see http://en.wikipedia.org/wiki/Same_origin_policy
$.getJSON( 'demo.json', function(data) {
$.each( data.markers, function(i, marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.getLatLng(marker.town),
'bounds': true
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
});
});
});
});
}
</script>
Why does the google.maps.getLatLng not work?
UPDATE:
$('#map_canvas').gmap('addMarker', { geocoder = new google.maps.Geocoder(); 'position': new google.maps.LatLng(geocoder.getLatLng(marker.town)), 'bounds': true })
How do I find the latutide and longitude based on a town name? I have just tried the above without result.
Why does the google.maps.getLatLng not work?
Where do you find that in the documentation?
The correct syntax for the google.maps.LatLng constructor is:
new google.maps.LatLng(<latitude>, <longitude>)
where <latitude> and <longitude> are numbers
To get the geographic coordinates of a postal address, you need to use a geocoder.