I am trying to send the data I've received using javascript to the localhost but the PHP file doesn't run when I build it as an android application.I've tried running it normally in XAMP before building it and it seems like the PHP connects even tho the data doesn't get sent, however after building it as an ionic android application it doesn't even connect. What is going wrong here?
Index.HTML
<?php
include "main.php";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- START OF GEOLOCATION -->
<center><div class="round-button"><div class="round-button-circle"><a onclick= "getLocation()" class="round-button">HELP</a></div></div></center>
<p id="demo"></p>
<script src="js/jquery.js"></script>
<script>
var glob_latitude = '';
var glob_longitude = '';
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";}
}
///send to ip
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
glob_longitude = position.coords.longitude;
glob_latitude = position.coords.latitude;
$.post( "main.php", { latitude: glob_latitude, longitude: glob_longitude } );
}
</script>
<!-- END OF GEOLOCATION -->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" background="css/style.css">
</body>
</html>
Main.php
<?php
echo "ok";
//$dbConnection = mysqli_connect("160.153.162.9", "Musab_Rashid" , "zaq123wsx" ,"Musab_Rme");
$dbConnection = mysqli_connect("localhost", "root" , "" ,"info");
echo "connected";
if($dbConnection)
{
echo "connected";
if(isset($_POST['latitude']) and isset($_POST['longitude'])){
$latitude = $_POST['latitude'];
$longitude = $_POST['longitude'];
if($latitude != '' and $longitude != '')
$query = mysqli_query("INSERT INTO info VALUES (NULL, '{$latitude}', '$longitude')");
}
}
else
die();
mysqli_close($dbConnection);
?>
Allright, couple of things:
It is not possible to make an ionic app with php logic when u execute the php on your localhost. The php must be executed on a external server. The simple reason is, when you export your app and try it on your phone, the application can't access your localhost. To be more specific:
<?php
include "main.php";
?>
In combination with the ajax request:
$.post( "main.php", { latitude: glob_latitude, longitude: glob_longitude } );
What i tried to say to you in my comment, is that your dataflow you look like this:
App sends data by ajax request -> PHP executes incoming data -> php echo's json object or string -> retrieve string or json object -> show data to user
Have a look at this source, helped me to get me started. http://www.nikola-breznjak.com/
Goodluck!
Related
I wanted to perform jquery post to php and get the data and post to the console log. But however i cant find data on the console.log after performing post the data. my code is found below...........please help me...
student html page
<html>
<head>
<title>NEW AJAX GET</title>
<script type="text/javascript" src="/Cesium-1.34/ThirdParty/jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
showData();
function showData()
{
$.post("student.php",
{
PostLastName: "Abdullah",
PostLastReligion: "Muslim"
},
function(data)
{
console.log(data);
});
});
</script>
</body>
</html>
student.php script
<?php
if ((empty($_POST["PostLastName"])) && (empty($_POST["PostLastReligion"])))
{
//Return "Posted Values are empty" if the values is empty
$post_string = 'Posted Values Are Empty';
//echo "<script>console.log(".$post_string.");</script>";
echo $post_string;
}
else
{
//Return the Post Data
$post_string= 'Post Last Name = '.$_POST["PostLastName"]."\n".' Post Last Religion = '.$_POST["PostLastReligion"].'';
//echo "<script>console.log(".$post_string.");</script>";
echo $post_string;
}
?>
I have test your code. i think check first check your loaded jquery included in header.
After change some code like below mention and test your browser console.
<html>
<head>
<title>NEW AJAX GET</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script type="text/javascript">
showData();
function showData()
{
$.post( "student.php", { PostLastName: "Abdullah", PostLastReligion: "Muslim" })
.done(function( data ) {
console.log(data);
});
};
</script>
</body>
</html>
I hope u resolve u r issue.
The following code should add 100 to an existing number in a mysql table if the button gets clicked. If I click the button nothing happens, but if I reload the page the function adds 100 to the number. What is wrong with my code?
<?php
define('DBHOST', 'localhost');
define('DBUSER', 'root');
define('DBPASS', '123');
define('DBNAME', 'dbtest');
$conn = mysql_connect(DBHOST,DBUSER,DBPASS);
$dbcon = mysql_select_db(DBNAME);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
</head>
<body>
<a id="button" class="waves-effect btn deep-orange darken-1">Button 1</a>
</body>
<script>
$("#button").click(function(){
<?php
mysql_query("UPDATE users SET test = (test + 100) WHERE userId=1");
?>
});
</script>
</html>
You cant call PHP code from a jQuery function like that. All the php runs when the page loads and thats it. You can however use jQuery and Ajax to send a message to a php script that processes that message then returns a response. The script can even be in the same actual file like you have (or in a different file altogether) something like this would do:
<?php
define('DBHOST', 'localhost');
define('DBUSER', 'root');
define('DBPASS', '123');
define('DBNAME', 'dbtest');
$conn = mysql_connect(DBHOST,DBUSER,DBPASS);
$dbcon = mysql_select_db(DBNAME);
if(isset($_POST['updateTest']){
$val = $_POST['test'];
$id + $_POST['userId'];
// validate inputs and such....
mysql_query("UPDATE users SET test = (test + 100) WHERE userId=1");
// send success or error response...
echo json_encode(['success'=>true]);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
</head>
<body>
<a id="button" class="waves-effect btn deep-orange darken-1">Button 1</a>
</body>
<script>
$("#button").click(function(){
var count = 100;
var userId = 1;
var dataObject= {updateTest: true, test: 100, userId: 1};
$.ajax({
type: "POST",
// url: "page.php", // add this line to send to some page other than the this one
data: dataObject,
success: function(response) {
if(response.success){
alert('test worked');
}
else{
alert('there was an error')
}
},
error: function(xhr, status, error) {
console.log(xhr);
}
});
});
</script>
</html>
As mentioned by the previous poster PHP is server side and Javascript client side so what is actually happening is the following.
When the page is returned back to the user your piece of javascript just looks like the below..
Your MySQL statement here has executed already it can not interact with client side code in this way
<script>
$("#button").click(function(){
// nothing here.. But your MYSQL statement has executed anyway
});
</script>
I have seen questions and answers regarding this issue. For example How to return a HTML file as the response to a POST request? but am having problems implementing the solutions. Here is a sample of some php code in a directory called websiteIssue that does not work, and I am not sure why.
index.php
<?php
if(isset($_POST['page']))
{
$page = $_POST['page'];
}
else
{
$page = "";
}
include 'case.php';
?>
case.php
<?php
$testLog = 'testLog.txt';
$fileHandle = fopen('testLog.txt', 'a');
fwrite($fileHandle, '$page = '.$page."\n";
switch($page)
{
case "screen2":
include 'screen2.php';
fwrite($fileHandle, 'including screen2.php'."\n");
break;
default:
include 'screen1.php';
fwrite($fileHandle, 'including screen1.php'."\n");
break;
}
fclose($fileHandle);
?>
screen1.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>screen1.php</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<button type="button" onClick=dataSubmit({page:"screen2"})> Screen 1 => Screen2</button>
<script>
function dataSubmit(data)
{
var xmlRequest = new XMLHttpRequest();
var formData= new FormData();
for(name in data)
{
formData.append(name, data[name]);
}
xmlRequest.open('POST', 'http://localhost/websiteIssue/');
xmlRequest.send(formData);
}
</script>
</body>
</html>
screen2.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>screen2.php</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<button type="button" onClick=dataSubmit({page:"screen1"})> Screen 2 => Screen1</button>
<script>
function dataSubmit(data)
{
var xmlRequest = new XMLHttpRequest();
var formData= new FormData();
for(name in data)
{
formData.append(name, data[name]);
}
xmlRequest.open('POST', 'http://localhost/websiteIssue/');
xmlRequest.send(formData);
}
</script>
</body>
</html>
On initial load it works as I expected, the html in screen1.php is shown in the browser, but when the button on the page is pressed the html remains the same, rather than changing to that in screen2.php
The output to testText.log is something like:
$page =
including screen1.php
$page = screen2
including screen2.php
As is might be obvious, I am a newbie to this, and hopefully there is some basic thing I have not done. The browser I am running it on is Firefox. Any help would be much appreciated.
Small note:I retyped the code by hand for this post, and have not run it (the machine running the webserver is not connected to the internet), hopefully there are no syntax errors, but I may have made a typo somewhere.
By including the php file you are responding to the javascript, but you arent actually using that response for anything. If redirecting to that page is what you want, you need to use location.assign on the response. To do that:
function dataSubmit(data)
{
var xmlRequest = new XMLHttpRequest();
var formData= new FormData();
// Redirects user to response when received.
xmlRequest.onreadystatechange=function{
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
location.assign(xmlRequest.responseText);
}
};
for(name in data)
{
formData.append(name, data[name]);
}
xmlRequest.open('POST', 'http://localhost/websiteIssue/');
xmlRequest.send(formData);
}
Based on the answer given by Felipe Souza I made the following modifications to allow the page to be dynamically modified rather than being a redirect. Thought I would share as it is another solution which some might be interested in.
index.php
<?php
if(isset($_POST['page']))
{
$page = $_POST['page'];
include 'case.php';
}
else
{
include 'base.php';
}
?>
case.php
<?php
switch($page)
{
case "screen2":
include('screen2.php');
break;
case "screen1":
include('screen1.php');
break;
default:
include('screen1.php');
break;
}
?>
base.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>base.php</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container" style="width:100%; height:100%">
<?php
if(!isset($_POST['page']))
{
$page = "";
include 'case.php';
}
?>
</div>
<script>
function dataSubmit(data)
{
var xmlRequest = new XMLHttpRequest();
var formData = new FormData();
xmlRequest.onreadystatechange=function()
{
if(xmlRequest.readyState==4 && xmlRequest.status==200)
{
document.getElementById("container").innerHTML = xmlRequest.responseText;
}
}
for(name in data)
{
formData.append(name, data[name]);
console.log(name + ":" + data[name]);
}
xmlRequest.open('POST', 'http://localhost/websiteIssue/');
xmlRequest.send(formData);
}
</script>
</body>
</html>
screen1.php
<button type"button" onClick=dataSubmit({page:"screen2"})> Screen 1 => Screen 2</button>
screen2.php
<button type"button" onClick=dataSubmit({page:"screen1"})>Screen 2 => Screen 1</button>
There seem some potential advantages in that the amount of data sent for the new screens is smaller, and (not sure if it is useful) the structure of the website is more disguised. Anyway, it is based on the answer given by Felipe Souza and supplements it (shows a dynamic approach rather than a changing pages one). Just thought I would mention it, if that was what some were looking for.
Below is my Geo Redirect Code that needs change,**What I would like is to add a meta redirect if possible so an eg would be:-
<html>
<head>
<title>GEO Redirect- Working Demo</title>
<!-- GEO Redirect -->
<script type="application/javascript">
function getgeoip(json){
if(json.country_code == "US"){
window.location = "http://msn.com/"
<!-- Can the above line be replaced to: <META HTTP-EQUIV='Refresh' CONTENT='0; URL=msn.com'> -->
} else {
window.location = "http://google.com/"
<!-- Can the above line be replaced to: <META HTTP-EQUIV='Refresh' CONTENT='0; URL=google.com'> -->
}
}
</script>
<script type="application/javascript" src="http://www.telize.com/geoip?callback=getgeoip"></script>
</head>
</html>
Guys any help would be highly appreciated, thanks again.
If using jquery;
$('head').append('<META HTTP-EQUIV="Refresh" CONTENT="0; URL=msn.com">');
or javascript:
var meta = document.createElement('meta');
meta.httpEquiv = "Refresh";
meta.content = "0; URL=msn.com";
document.getElementsByTagName('head')[0].appendChild(meta);
However, the rendering mode is fixed when the page is loaded, so this will most probably not work as you want it to...
If you're trying to redirect after some time, then you could do this:
<html>
<head>
<title>GEO Redirect- Working Demo</title>
<!-- GEO Redirect -->
<script type="application/javascript">
function getgeoip(json){
if(json.country_code == "US"){
// will redirect to this page, but only after 2 secs.
setTimeout(function () { window.location.href = "http://msn.com/"; }, 2000);
} else {
// will redirect to this page, but only after 2 secs.
setTimeout(function () { window.location.href = "http://google.com/"; }, 2000);
}
}
</script>
<script type="application/javascript" src="http://www.telize.com/geoip?callback=getgeoip"></script>
</head>
</html>
I am following a tutorial online (http://mycodde.blogspot.co.uk/2013/12/typeaheadjs-autocomplete-tutorial-ajax.html#comment-form) which invloves typeahead.js and a simple MySQL DB and I cannot get it to work.
Using typeahead.js v10.2 jQuery v1.9.1 and Bootstrap v3.2.0
I have included the necessary css and js files, I have also created a connection.php file, which successfully connects to my localhost db.
The problem is that the auto-suggest box doesn't auto-suggest anything. I am possibly doing something silly as I am new to js and programming.
I have included my files below if anybody would be kind enough to point me in the right direction I would appreciate it.
index.php
<!DOCTYPE>
<html lang="en">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<title>Typeahead.js Tutorial with Mysql Database</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
</head>
<body>
<input type="text" name="search" id="search"></div>
</body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/bloodhound.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.bundle.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.jquery.js"></script>
<script>
$("document").ready(function(){
$("#search").typeahead({
name : 'sear',
remote: {
url : '/connection.php?query=%QUERY'
}
});
});
</script>
</html>
connection.php
<?php
$con=mysqli_connect("localhost","myuser","mypassword","mydb");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT first_name,last_name FROM actor");
while($row = $result->fetch_object()){
$user_arr[] = $row->first_name;
$user_arr2[] = $row->last_name;
}
mysqli_close($con);
?>
When I check the firebug console I get an Uncaught TypeError: undefined is not a function appears at line 22 which is;
$("#search").typeahead({
Can anybody lend some assistance?
Thanks
You need to add the following code in your .js file:
var search = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('sear'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
remote: {
url: '/connection.php?query=%QUERY',
filter: function(list) {
return $.map(list, function(search) {
return {
name: sear
};
});
}
}
});
The json file contains an array of strings, but the Bloodhound
suggestion engine expects JavaScript objects so this converts all of those strings.
Check you jquery DOM Ready bind handler syntax here:
$("document").ready(...
It must be
$( document ).ready(...
Read more:
http://learn.jquery.com/using-jquery-core/document-ready/