javascript - Location.country_code - Fancybox, now popup -
i used have fancybox display message users based on country visiting so:
<script> jquery.ajax({ url: '//freegeoip.net/json/', type: 'post', datatype: 'jsonp', success: function(location) { // if visitor browsing united kingdom. if (location.country_code === 'gb') { // tell him u.s. store. jquery.fancybox.open(jquery('#messagegb')); } } }); </script> <div id="messagegb"> <p>you visiting our u.s. store. </p> </div> i having problems fancybox placing cookies using jquery pop works fine on own, doesn't work if try country based call... thoughts on doing wrong?
// if visitor browsing united kingdom. if (location.country_code === 'gb') { // tell him u.s. store. $('#popup_messagegb').popup({ setcookie: true, cookie_timeout: 0 } } }); </script> <div id="popup_messagegb"> <p>you visiting our u.s. store. </p> </div>
cross domain ajax easy way
cross domain ajax requests need done in specific way, web service needs support. , geo location service using support "jsonp" cross domain requests ... you're in luck.
note callback parameter added query string. code missing callback, why it's not working.
the jquery documentation explains how make jsonp call jquery.getjson()
and jquery code looks this:
$.getjson('http://freegeoip.net/json/?callback=?', function(data) { // popup here }); yet, simple 1 doesn't need jquery. need retrieve visitor's location once. can done including web service url in normal script tag. , after loads call function returned data.
update: in response comment
@robrob - copy code below, add popup code, , you're done.
<!doctype html> <html> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.getjson('http://freegeoip.net/json/?callback=?', function(location) { // insert popup code here alert( location.country_name ); }); }); </script> </body> </html> the example below demonstrates both methods of doing jsonp call.
run code snippet display country
<html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <button onclick="getlocation()">jquery.getjson</button> <h2 id="country_name"></h2> json: <xmp id="stdout" style="border:1px gray solid; background-color:aliceblue;"></xmp> <script type="text/javascript"> // method 1: plain javascript jsonp callback function ongeolocation( data ) { document.getelementbyid('stdout').innerhtml = json.stringify(data,null,' '); document.getelementbyid('country_name').innerhtml = 'country: ' + data.country_name; // add popup here }; // method 2: using jquery function getlocation() { $.getjson('http://freegeoip.net/json/?callback=?', function(data) { alert( 'jquery.getjson\n' + json.stringify(data, null, ' ')); // popup here }); } </script> <!-- script tag required method 1 --> <script type="text/javascript" src="http://freegeoip.net/json/?callback=ongeolocation"></script> </body> </html>
Comments
Post a Comment