I have used following code in javascript to get longitude,latitude,city,country etc.
But i need full formatted address how i can get this?
jQuery.ajax({
url: '//freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function (location) {
// example where I update content on the page.
jQuery('#city').html(location.city);
jQuery('#region-code').html(location.region_code);
jQuery('#region-name').html(location.region_name);
jQuery('#areacode').html(location.areacode);
jQuery('#ip').html(location.ip);
jQuery('#zipcode').html(location.zipcode);
jQuery('#longitude').html(location.longitude);
jQuery('#latitude').html(location.latitude);
jQuery('#country-name').html(location.country_name);
jQuery('#country-code').html(location.country_code);
}
});
I don't think it will be possible to get the full formatted address from the user's IP address because the ISPs don't give this information. Else, everyone could know where you live :)
You can use services that will give you an approximated position and information about the area.
For example, you could use userinfo.io which is a free ip-to-geolocation service. The accuracy is approximately this:
Continent: ~99.9%
Country: ~95%
City: ~50%
Exact position (latitude/longitude): ~50%
And the data comes from several databases so it's pretty good. In practice the more developed countries will be very accurate (I live in the US and the geolocation is within 1 block) and the less developed countries may give you a wider approximation area.
To use it, just add the dependency to the library:
<script type="text/javascript" href="//cdnjs.cloudflare.com/ajax/libs/userinfo/1.0.0/userinfo.min.js"></script>
And get the data:
<script type="text/javascript">
UserInfo.getInfo(function(data) {
// the "data" object contains the info
}, function(err) {
// the "err" object contains useful information in case of an error
});
</script>
The data looks like that:
{
request_date: "2014-09-18T04:11:25.154Z",
ip_address: "192.77.237.95",
position: {
latitude: 37.7758,
longitude: -122.4128,
accuracy: 3 // This is the accuracy radius, in kilometers
},
continent: {
name: "North America",
code: "NA",
},
country: {
name: "United States",
code: "US",
},
city: {
name: "San Francisco",
code: "94103"
}
}
Disclaimer: I wrote and I maintain this service
Related
I don't want to print all the cities in my code local: ['LONDON', 'BERLIN', 'NEW YORK', 'MADRID']. i would like to make query each time user type a letter.
Can I use ajax in order to use Auto complete with "x-editable typeahead"?
HTML:
<li><label class="control-label">CITY:</label> <span id="userCity" data-
type="typeaheadjs" data-pk="cityID" data-name="users">PARIS</span></li>
JS:
$('#userCity').editable({
url: 'ajax/editUser.php',
typeahead: {
local: ['LONDON', 'BERLIN', 'NEW YORK', 'MADRID']
}
});
Just in case this may help someone, looks like the current 1.5.1 release of the X-Editable does not support passing the dataset parameter to the typeahead constructor. There is a pull request which implements support for this documented here https://github.com/vitalets/x-editable/pull/664.
To quickly get around this issue, you will need to update the inputs-ext/typeaheadjs/typeaheadjs.js at around line 45 to be:
this.$input.typeahead.apply(this.$input, this.options.typeahead);
Then you can instantiate the X-Editor as:
var bloodhound = new Bloodhound({
remote: '/url/to/json/output'
// any other bloodhound options here
});
bloodhound.initialize();
$('#editable-field').editable({
type: 'typeaheadjs',
typeahead: [{
hint: true,
highlight: true
// any other typeahead options
}, {
source: bloodhound.ttAdapter()
// any other dataset options
}]
});
How to be sure that all of the view-s will be displayed in correct order. because of use of Ajax, first one finished will be displayed first, i want to always be displayed in right order...
_.each(view.collection.models, function (category) {
var productBlockListView = new ProductBlockListView({model: category});
productBlockListView.setElement(view.el).render();
}, this);
Use a comparator option to get a sorted collection.
var items = new Backbone.Collection([{
firstName: 'Steve',
lastName: 'Jobs'
}, {
firstName: 'Bill',
lastName: 'Gates'
}], {comparator: 'firstName'});
items.each(function(item) {
console.log('%s %s', item.get('firstName'), item.get('lastName'));
});
Documentation
Demo
I have looked over the doc and searched for forums but I can not seem to find an examples on how to implement the Initial File List functionality for fine-uploader.
Below is the script that I am using - works great but what I would like to do is to use the Initial File List function to populate the fineuploader with the existing files that have been uploaded during this session.
I have code that will return a json feed with the required files in an array format.
I just can ot figure out where our how to call the function to initalize.
Thanks in advance.
<script>
// Wait until the DOM is 'ready'
$(document).ready(function () {
$("#fine-uploader").fineUploader({
debug: true,
request: {
endpoint: 'upload.cfm'
},
session : {
endpoint: 'imageStatus.cfm',
refreshOnRequest:true
},
validation: {
itemLimit: 2,
allowedExtensions: ["jpeg", "jpg", "gif" , "png"],
sizeLimit: 5000000 // 5 MiB
},
messages: {
tooManyItemsError: 'You can only add 2 images'
},
deleteFile: {
enabled: true, // defaults to false
endpoint: 'upload_delete.cfm?uuid=',
method: 'post'
},
retry: {
enableAuto: false
},
scaling: {
sendOriginal: true,
hideScaled: true,
sizes: [
{name: "THUMB_XX", maxSize: 113},
{name: "FULLIMAGE", maxSize: 450}
]
},
});
});
</script>
I solved the issue.
ends up that I did a custom build of the JS files and did not include the status function.
rebuild the downloads and works like a charm.
thanks everyone for the help.
The initial file list feature is not a function that you call, per say, it is an option that you set in the client. More or less, all you need to set is the endpoint where the uploader can retrieve this list of files, and then have your server correctly process them.
The server response should be a JSON Array of Objects.
[{ name: 'foo.jpg', uuid: "7afs-sdf8-sdaf-7asdf" }, ... ]
The trickiest part is getting that list of files server-side, and you may want to ask some Coldfusion folks about how to do that.
I am building a website that uses the Highcharts library to display a single line series chart. I am using AJAX to retrieve historical financial data from yahoo finance using their YQL.
The ajax call is working correctly and I can view the returned data in the console for example
console.log( data.query.results.quote[0].Close );
returns the closing price value 457.84
How do I now build the single line series chart using this data?
I cannot find a simple explanation anywhere of how to create the chart using AJAX data.
Thanks
edit: I am fetching the data in AJAX and it works correctly but trying to make the chart work with JSON is where im having difficulties.
This is what my code currently looks like: http://jsfiddle.net/JbGvx/
This is the demo code off the HighStocks website: http://jsfiddle.net/xDhkz/
I think the problem is with the date formatting of the AJAX request. The date is being returned like so 2013-02-25 but the chart wants JS timestamps. Is there a way that I can extract the date from the AJAX, convert it using Date.UTC and then make the chart using the converted data?
If you are considering stock data, consider using HighStocks instead of HighCharts. It can handle many data points much faster than HighCharts is able to.
HighStocks has an example where they pull in AJAX data (1.6 million points) asynchronously here: http://www.highcharts.com/stock/demo/lazy-loading
var chartSeriesData = [];
var chartCategory = [];
$.each(response, function() {
if(this.name!="TOTAL" && this.no!="0")
{
var series_name = this.name;
var series_data = this.no;
var series = [
series_name,
parseFloat(series_data)
];
chartSeriesData.push(series);
}
});
//initialize options for highchart
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'SalesOrder '
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
center:['60%','60%'],
size:150
,
dataLabels: {
enabled: true,
color: '#000000',
distance: 40,
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.y} '
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data:chartSeriesData //load array created from json
}]
}
//options.series[0].setData(datavaluejson);
var chart= $('#container').highcharts(options);
I have a store being used by several charts. I get my data remotely with an ajax call. In the php script that I link it too, I'm just going to change the parameters of my query to adjust for the different charts.
Here's my idea: I pass the title of the chart's panel as a parameter to my php script. That'll tell me which chart it is.
How do I access the title of whatever chart the store is being used by?
var my_store = Ext.create('Ext.data.JsonStore', {
fields: ['project', 'accepted', 'rejected', 'deleted', 'undefined'],
proxy: {
type: 'ajax',
url: 'generate_proj.php',
extraParams: {foo: **chart.id**},
reader: {
type: 'json'
}
},
autoLoad: true,
listeners: {
beforeload: function(store,operation) {
//operation.params.foo = this.idname;
},
load: function(obj,records) {
var text = Ext.decode(obj.responseText);
Ext.each(records,function(rec) {
});
}
}
});
Here's what I've done so far. Getting the name of a single chart/panel is no problem. I want the store to be able to dynamically read the name of what's using it. How?
Somewhere, you have some code that switches between the various charts. During that code, you could do something like
activeChart.getChartStore().proxy.extraParams.foo = activeChart.getId();
where activeChart is whatever reference you have to the chart you are about to show. Then when you load the store, it'll send the correct parameter.