I copied paste following code and I am a noob at this. So can you point out error please? I am sorry for asking such a stupid question.
<HTML>
<HEAD>
</HEAD>
<BODY>
<h3>Client side IP geolocation using ipinfo.io</h3>
<hr/>
<div id="ip"></div>
<div id="address"></div>
<hr/>Full response: <pre id="details"></pre>
</BODY>
</HTML>
<script type="text/javascript" charset="utf-8">
$.get("http://ipinfo.io", function(response) {
$("#ip").html("IP: " + response.ip);
$("#address").html("Location: " + response.city + ", " + response.region);
$("#details").html(JSON.stringify(response, null, 4));
}, "jsonp");
</script>
HtML5 using get user latitude, longitude and get current user address.
Sample code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
</head>
<body>
<p>Address: <div id="address"></div></p>
</body>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var currgeocoder;
//Set geo location lat and long
navigator.geolocation.getCurrentPosition(function(position, html5Error) {
geo_loc = processGeolocationResult(position);
currLatLong = geo_loc.split(",");
initializeCurrent(currLatLong[0], currLatLong[1]);
});
//Get geo location result
function processGeolocationResult(position) {
html5Lat = position.coords.latitude; //Get latitude
html5Lon = position.coords.longitude; //Get longitude
html5TimeStamp = position.timestamp; //Get timestamp
html5Accuracy = position.coords.accuracy; //Get accuracy in meters
return (html5Lat).toFixed(8) + ", " + (html5Lon).toFixed(8);
}
//Check value is present or
function initializeCurrent(latcurr, longcurr) {
currgeocoder = new google.maps.Geocoder();
console.log(latcurr + "-- ######## --" + longcurr);
if (latcurr != '' && longcurr != '') {
//call google api function
var myLatlng = new google.maps.LatLng(latcurr, longcurr);
return getCurrentAddress(myLatlng);
}
}
//Get current address
function getCurrentAddress(location) {
currgeocoder.geocode({
'location': location
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0]);
$("#address").html(results[0].formatted_address);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
});
</script>
</html>
Demo: http://jsfiddle.net/hmy7e0fs/
<HTML>
<HEAD>
</HEAD>
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" ></script>
<script src="http://js.maxmind.com/js/geoip.js" type="text/javascript" ></script>
<script type="text/javascript" charset="utf-8">
$.get("http://ipinfo.io", function (response) {
alert('hello');
$("#ip").html("IP: " + response.ip);
$("#address").html("Location: " + response.city + ", " + response.region);
$("#details").html(JSON.stringify(response, null, 4));
}, "jsonp");
</script>
<BODY>
<h3>Client side IP geolocation using ipinfo.io</h3>
<hr/>
<div id="ip"></div>
<div id="address"></div>
<hr/>Full response: <pre id="details"></pre>
</BODY>
</HTML>
Use this:
<?php
$ip = $_SERVER['REMOTE_ADDR'];
$locationArray = unserialize(file_get_contents('http://www.geoplugin.net/php.gp?ip=' . $ip));
echo '<pre>';
print_r($locationArray);
?>
I would like to prefer geoplugin better than http://ipinfo.io as its request limit per minute is max.
For more info please visit: http://www.geoplugin.com/
Related
I have a script code to upload photos on imgur using AJAX. But I can not hide the Client-ID of the public.
I think I need to use PHP to do that use this code:
<?php $idClient = "abc12abc12abc";
echo $idClient ;
?>
But it turned Client-ID is still visible when in view its source code.
Here's the full code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Imgur Upload Test</title>
<style>
#image_preview, #image_preview_2 {
max-width: 200px;
}
</style>
</head>
<body>
<h1>Imgur Upload Test</h1>
<input type="file" id="image_selector" />
<div id="image_preview"></div>
<h2>Image On Imgur:</h2>
<div id="image_preview_2"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#image_selector").change(function() {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result.substr(e.target.result.indexOf(",") + 1, e.target.result.length);
$("#image_preview").html("<img src='" + e.target.result + "' />");
$.ajax({
url: 'https://api.imgur.com/3/image',
headers: {
'Authorization': 'Client-ID <?php $idClient = "abc12abc12abc";
echo $idClient ;?>'
},
type: 'POST',
data: {
'image': data,
'type': 'base64'
},
success: function(response) {
$("#image_preview_2").html("<img src='" + response.data.link + "' />");
}, error: function() {
alert("Error while uploading...");
}
});
};
reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>
What's the solution?
I am in a situation where I have to download a HTML page into PDF now. I know JSPDF is the best solution for this and I have implemented the following code but its not working...
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Invoice</title>
<link rel="stylesheet" type="text/css" href="/jspdf/examples/css/smoothness/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" type="text/css" href="/jspdf/examples/css/smoothness/css/main.css">
<script type="text/javascript" src="/jspdf/examples/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/jspdf/examples/js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="jspdf/dist/jspdf.debug.js"></script>
<script type="text/javascript" src="/jspdf/examples/js/basic.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
</script>
</head>
<body id="target">
<div id="content">
<h3>H3 tag</h3>
<p>a Para</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
</body>
</html>
Please help me with this situation...
The following is an example of how to implement the jspdf.js library in order to create PDF pages out of the current website.
The JS libraries needed can be downloaded here:
Please contact me or write down your comment if you find any bugs.
<script type="text/javascript" src='jspdf.min.js'></script>
<script type="text/javascript" src='html2canvas.js'></script>
<script type="text/javascript">
function genPDF()
{
html2canvas(document.body, {
onrendered : function(canvas)
{
try
{
var canvas1 = document.createElement('canvas');
canvas1.width = canvas.width; canvas1.height = canvas.height;
var context1 = canvas1.getContext('2d');
context1.drawImage(canvas, 0,0);
options = {orientation: "0", unit: "mm",format: "a4" };
var doc = new jsPDF(options,'p', 'pt', 'a4');
var number_needed_pages = canvas.height / 900;
if(number_needed_pages < 1) number_needed_pages = 1;
for(var x=0; x < number_needed_pages ; x++)
{
var canvas2 = document.createElement('canvas');
canvas2.width = 794; canvas2.height = 900;
var context2 = canvas2.getContext('2d');
context2.drawImage(canvas1, 0 , 0 + 900*x , canvas1.width, canvas2.height, 50, 0, canvas.width, canvas2.height);
doc.addImage(canvas2.toDataURL('image/png'), 'JPEG', '', '', '');
doc.addPage();
}
doc.save("output_file.pdf");
} catch(e){alert(e);}
}
});
}
In this code which I am posting i have one problem. I want my PHP variable to be stored in JavaScript variable but it shows error. The code is below.
<?php
$name="anurag singh";
echo '
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1=.$name.";"
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
';
?>
Now when I am assigning $name to the variable name1 than I get an syntax error. Please let me know what changes I have to make. So that I get the value of the PHP variable $name stored in JavaScript variable name1.
In javascript with echo version: var name1= "'.$name.'";
<?php
$name = "anurag singh";
echo '
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1= "'.$name.'";
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
';
?>
And you can use like var name1= "<?php echo $name; ?>"; seperated html and php
<?php
$name="anurag singh";
?>
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1= "<?php echo $name; ?>";
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
<?php
$name="anurag singh";
echo '
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1='.$name.'";"
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
';
?>
echo it into a script tag
echo '<script> var name = '.$name.';</script>';
You can do it this way -
<?php $name="anurag singh"; ?>
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1="<?php echo $name ?>";
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
You are pasing string $ame not variable as because you have used '...' this let the php know that its string no more variables inside this string.
<?php
$name="anurag singh";
?>
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1=<?pgp echo $name ?>;
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
try this
$(document).ready(function(){
var name1="'.$name.'";
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
you can assign this value like var name= "'. $name.'";
Hi i am able to get json data as a list in html page but i like to get as a list of link. Because when i click on the link it will show details.
What i have done in tenantlistmob.php
<?php
include('connection.php');
$result = mysql_query("SELECT * FROM tenanttemp");
while ($row = mysql_fetch_assoc($result))
{
$array[] = array($row['TenantFirstName']);
}
echo json_encode($array);
?>
Then my html page is
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" href="../jasmine-device_2/styles/main.css" />
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
jQuery.getJSON("tenantlistmob.php", function (jsonData) {
jsonData= eval(jsonData);//get json array
for (i = 0; i < jsonData.length; i++)//iterate over all options
{
for ( key in jsonData[i] )//get key => value
{
$("#getname").append($("<li></li>").html(jsonData[i][key]), document.all ? i : null);
}
}
});
});
</script>
</head>
<body>
<form name="index">
<div id="getname"></div>
</form>
</body>
</html>
The output is
Humayun
Sahjahan
Bayezid
Bayezid
Asaduzzaman
Mouri
I am getting the TenantFirstName as a list.But i like to get it as a list of link.Because when i click on a name it will show details of that name. How can i do both work(as a list of link and when click on a link it will show details in a html page query from mysql database)?
Please help.
use table like below
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" href="../jasmine-device_2/styles/main.css" />
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
jQuery.getJSON("tenantlistmob.php", function (jsonData) {
$("#user_spec").html("");//clear old options
jsonData= eval(jsonData);//get json array
for (i = 0; i < jsonData.length; i++)//iterate over all options
{
for ( key in jsonData[i] )//get key => value
{
//$("#user_spec").get(0).add(new Option(jsonData[i][key],[key]), document.all ? i : null);
//$("#getname tbody").append($("<li></li>").html(jsonData[i][key]), document.all ? i : null);
var tblRow = "<tr>" + "<td>" + "<a href='#'>" + jsonData[i][key] + "</a>" + "</td>" + "</tr>"
$(tblRow).appendTo("#getname tbody");
}
}
});
});
</script></head>
<body>
<form name="index">
<div>
<table id="getname" border="1">
<thead>
<th>Name</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
</html>
I was trying to create a notifications system for a website with the following code :
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
And the notifications.php :
$userid = $_SESSION[username];
$notifications = array();
$sql = "SELECT appreciation FROM ms_notifications WHERE email = '$userid' AND new = '1'";
$res = mysql_query($sql) or die(mysql_error());
if (mysql_num_rows($res)) {
while ($r = mysql_fetch_object($res)) {
$notifications[] = $r->appreciation;
}
$nb_result = mysql_num_rows($res);
}
$sql = "UPDATE ms_notifications SET new = '0' WHERE email = '$userid'";
mysql_query($sql) or die(mysql_error());
echo $nb_result;
Problem is that, as I'm new to jquery/Js, I don't know how to put the result inside of a div. For now it stays on the top of the page, above everything.
I tried that, inside the data function but not working... :
$('#test_app').html(data);
I guess it's a very stupid question but help would be really appreciated ! Thank you very much.
UPDATE : Here the HTML Code
<?php
session_start();
include ('connection/database.php');
include ('login_script.php');
include ('notifications.php');
if($logged_in){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Home</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ms.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/font_i/specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
<!-- FONT SCRIPT-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#container').easyTabs({defaultContent:1});
});
</script>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageHeight = 505; // Background image height
var headerHeight = 59; // How tall the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#main_logo').css("background-position","0 "+current+"px");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed)
</script>
<!-- NOTIFICATIONS_SCRIPT !!!!!! -->
<script type="text/javascript" charset="utf-8">
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
</script>
<style>
body{
font-family:SommetRoundedLight;
}
</style>
</head>
<body>
<div id="container">
<div id="header_contain">
<div id="test_app">
</div>
</div>
</div>
</body>
</html>
<?php }
else{
echo '<script language="javascript" type="text/javascript">
<!--
window.location.replace("connexion.php");
-->
</script>';
} ?>
Thanks again
Use .append() instead of .html()
Instead of
$('#test_app').html(data);
just use:
$('#test_app').html('<div>' + data + '</div>');
Seems to simple to be it. Am I missing something?