How to exchange data with server from mobile web app - html

Hi I have to develop a mobile application using cross platform technology(HTML,CSS,JAVASCRIPT) wherein I need to send data to server and receive data from server.so I thought to use ajax so I tried below given code.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("http://10.16.10.188/login/Hello.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
The above code is working when I keep this html and text file on wamp server in same directory. but its not working when I keep this html file in my android asset folder and text file on server.it is not giving any response.could someone please help me to get this done.thank you so much

I was able to solve the problem by using jsonp in below given code.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.1.min.js">
</script>
<script>
$.ajax({
url:"http://10.16.10.188/login/loginValidator.php",
dataType: "jsonp",
success:function(data,status){
if(status=='success')
{
alert("Data: " + data.fullname + "\nStatus: " + status);
var val = data.fullname;
$("#imchanged").html(val);
}
}
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button id="imchanged">Get External Content</button>
</body>
</html>
Below is loginValidator.php code where my html points.
<?php
$array = array(
'fullname' => 'Jeff Hansen',
'address' => 'somewhere no.3'
);
$data = json_encode($array);
echo $_GET['callback']."(".$data.")";
?>
Using above given code I am able to invoke php file from mobile emulator and get the response from server.

Related

Google SaveToDrive code works only for localhost and does not respond for server/domain name

I am trying to add a saveto drive button to my website. Following sample code works if the url in the browser is typed as "localhost" and FAILS or nothing happens, no error when used with the server name or domain name.
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive of exported PDF: Async Load with Language</title>
<link rel="canonical" href="http://global.com">
</head>
<body>
File 1 Emp 5::
<div class="g-savetodrive"
data-src="./pdfGen.jsp?selEmp=5"
data-filename="Emp5.pdf"
data-sitename="Sample Application">
</div>
<BR/><BR/>
File 2 Emp 6::
<div class="g-savetodrive"
data-src="./pdfGen.jsp?selEmp=6"
data-filename="Emp6.pdf"
data-sitename="Sample Application">
</div>
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US'
};
</script>
<script>
window.onLoadCallback = function(){
gapi.auth2.init({
client_id: "<CreatedApplication Key>.apps.googleusercontent.com"
});
}
</script>
</body>
</html>
Have created a project in google console, Created credentials clientkey, set the project to Testing/developer mode.
When accessed the application as "http://localhost:8180/Sample/gDrive.html" or "http://localhost:8180/Sample/gDrive.jsp",It's working fine. But,
"http://devsys.mtv.global.com:8180/Sample/gDrive.html", the buttons are rendered and on clicking that, no error is thrown, nothing happens. Very disgusting.
Any help is appreciated. Thank
Be sure to add the Authorized JavaScript Origin
More information can be found here:
https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow

angularJS script file not working when called in html

Only the html output and the {{10 + 10}} of the web page is rendered. I'm not sure what what I'm doing wrong but I'm guessing it's some setup type issue in my visual studio project.
(function () {
var app = angular.module("ShipmentsHome", []);
var EditShipmentsController = function ($scope) {
$scope.message = "--Still need to create grid here--";
};
app.controller("EditShipmentsController", ["$scope", EditShipmentsController]);
}());
!DOCTYPE html>
<html>
<head>
<title>Shipments Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="../../lib/home.js"></script>
</head>
<body ng-app="ShipmentsHome" ng-controller="EditShipmentsController">
<h1>Product Transfers</h1>
<p>Create or modify a transfer below:</p>
<div> {{message}}</div>
<p>look above for message from controller</p>
<h2>{{10 + 10}}</h2>
</body>
</html>
I am not seeing any errors in the console. Below is what I am seeing:
Probably the problem will be with your relative path. I got it working when I replace the script source with the actual controller script. please check your path and correct it.
Issue was the project I was working with was setup to use .ts files and not .js files. I needed to create the project to work with angularjs not typescript.

ajax doesn't show any response to a list of json objects, as rest api response

I use Spring for running my rest API service, i cant get the list of json object that my service send from a sample html file and plz tell me how can i access to the first object.
this is the sample output of my rest API service:
[{"src_ip":"1.1.1.1","src_id":"98","date":1470527874000},
{"src_ip":"1.1.2.1","src_id":"25","date":1470527934000},
{"src_ip":"1.1.2.1","src_id":"25","date":1470527934000}]
and this the code that i used in my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing Results</title>
<!--TODO badan version e CDN e jquery use shavad-->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "http://127.0.0.1:8080/restapi2",
dataType: "jsonp"
}).then(function(data) {
$('.List').append(data);
$('.data').append(data[0]);
});
});
</script>
</head>
<body>
<div>
<br><br>
<p class="List"></p>
<br><br>
<p class="data"></p>
</div>
</body>
</html>
I should say that when i run the sample of this link on my html file, it worked Properly.
Updated part:
after fixing last error,still I didn't get any correct data to show in my browser, but this time, the console get something but i don't know how to use them. this is a snapshot of it and the left side show that two object were sent.
and this content of that object:
Based on the discussion on the comment the reason is you were trying to access the different domain than your page which is prohibited by browsers as a security precaution.
$(document).ready(function() {
$.ajax({
url: "http://localhost:8080/restapi2"
}).then(function(data) {
$('.List').append(data);
$('.data').append(data[0].);
});
});
"No 'Access-Control-Allow-Origin' header is present on the requested resource"

JSON - CORS confusion

I am having a problem with retrieving JSON feeds to use in a widget.
I have googled the hell out of it and just seem to be confusing myself more.
I have this code
function insertReply(content) {
document.getElementById('holder').innerHTML = content.result;
}
// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);
from this post - Get JSON data from external URL and display it in a div as plain text
Which works great. However if I change the URL i get no response and no errors in the console.
new URL: http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOG
Why does one work and not the other?
EDIT #Amit
Amit Sorry for being retarded but I am really new to JQuery and javascript. Where do you put these? I have
<!DOCTYPE html>
<html>
<head>
<title>Widget Holder</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</style>
</head>
<body>
<form runat="server">
<div id="holder"></div>
</form>
<script type="text/javascript">
$().ready(function () {
$.get("http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOG", function (data) {
debugger;
$("#holder").html(data);
});
});
</script>
</body>
</html>
But still get this error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOG. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
I managed to fix the issue using a PHP proxy to fetch the data. The proxy I have used can be found here http://benalman.com/code/projects/php-simple-proxy/examples/simple/
Thank you for all your help on this subject.
The script:
$().ready(function () {
$.get("http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOG", function (data) {
debugger;
$("#holder").html(data);
});
});
The html:
<form runat="server">
<div id="holder"></div>
</form>
is working for me.

Mysql data in a tooltip

I´m using the tooltip script qtip2. I want to show inside the tooltip informations from a Mysql database.
For that im using a ajax.php
$var = mysql_real_escape_string($_GET['var']);
//connection to the database
$dbhandle = mysql_connect($localhost, $XXXXX, $XXXX)
or die("Unable to connect to MySQL");
//select a database to work with
$selected = mysql_select_db("tester",$dbhandle)
or die("Could not select examples");
//execute the SQL query and return records
$result = mysql_query("SELECT information FROM data_table WHERE value='$var'");
//fetch tha data from the database
while ($row = mysql_fetch_array($result)) {
echo $row{'Name'};
echo $row{'Beschreibung'};
}
//close the connection
mysql_close($dbhandle);
And the test.html
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.css" />
<!-- /stylings -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.js"></script>
<!-- /scripts -->
</head>
<body>
<a href="test/ajax.php" class="ajax_TT">
Enterprise hosting</a>
<script type="text/javascript">
$(function () {
$(".ajax_TT").on("click",function (e) {
e.preventDefault(); // normalized for IE
var $this=$(this);
var link = $this.attr('href');
$.ajax({
url: link,
cache: false,
data: {
html: "<p>Text echoed back to request</p>"
},
method: 'post'
}).done(function (html) {
$this.qtip({
content: {
text: html
},
style: 'qtip-wiki',
show: {
ready: true
}
});
});
});
});
</script>
</body>
</html>
On the test.html everything works, but if i use the test.html code inside a Joomla article, the tooltip just show the code from the ajax.php, and not the Mysql data.
Here is a screenshot, how it looks like in a Joomla article.
(http://s14.directupload.net/images/130810/8dicx7la.jpg)
Thanks for the help.
This is because Joomla is escaping the PHP code. I'm guessing the file is in the same directory as Joomla. Try moving the PHPfile outside of Joomla.
If you are on CPanel, you could probably create a different subdomain that would still have access to the DB. Another alternative is to use a Joomla plugin that allows you to execute PHP code like the following but I'm not sure how that would work out.
http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content/4470
I'm not a Joomla expert but hopefully that points you in the right direction.