I'm trying to get a value from external url using jquery at phonegap application.
but it's not work, this is my code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.6.2.min.js">
</script>
<script>
$(document).ready(function(){
jQuery.support.cors = true;
$("button").click(function(){
$.ajax({
type: "GET",
url: "http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Cube').each(function(){
var usd = $(this).find('Cube type=["currency"]').text();
$("#d").html(usd);
});
}
});
});
});
</script>
</head>
<body>
<div id="d"></div>
<button>Get External Content</button>
</body>
</html>
is there any way to load / post / get data from/to external url by using:
phonegap, jquery, jquerymobile, ....... ?
Instead of the xml file you can use your url. Since I tried it from browser I created the xml file.
$.ajax({
type: "GET",
url: "../res/exData.xml",
dataType: "xml",
success: function (xml){
$(xml).find('Cube').each(function(){
$.each(this.attributes, function(i, attrib){
var name = attrib.name;
var value = attrib.value;
if (name === "currency")
$("#d").html(value);
});
});
},
error: function(model, xhr, options) {
alert("error");
}
});
Related
Why does my html page does not run into my javascript block? I add some alert lines and they dooesn't pop-up.. I try to make a ajax get call to load a table with sql data..
EDIT
I added the code to autoload it but that seems not to work.
Here is the code:
<ion-view style="" title="scorebord">
<ion-content class="has-header" overflow-scroll="true" padding="true" style="background: url(img/EYC8SNR0QEuE8C0rKDBQ_menu3.png) no-repeat center;">
<body onload="httpCall2()">
<p>tip</p>
<script type="text/javascript">
function httpCall2() {
alert("datasdsd");
$.ajax({
type: 'GET',
url: 'scorebord_data.php',
contentType: "application/json; charset=utf-8",
data: {data: data},
dataType: "json",
complete: function (data) {
//alert(data);
//alert(JSON.stringify(data));
//alert(data.toString());
//alert(data[1]);
var array = data.responseJSON;
alert(array);
}
})
}
$(document).ready(function httpCall() {
alert("datasdsd");
$.ajax({
type: 'GET',
url: 'scorebord_data.php',
contentType: "application/json; charset=utf-8",
data: {data: data},
dataType: "json",
complete: function (data) {
//alert(data);
//alert(JSON.stringify(data));
//alert(data.toString());
//alert(data[1]);
var array = data.responseJSON;
alert(array);
}
})
})
</script>
<at-pagination at-list="list" at-config="config"></at-pagination>
</body>
</ion-content>
</ion-view>
I newbie in Phonegap Android App Development. I am trying to connect my App with remote MS SQL Server Database, I wrote an ASP.Net Web-service also to connect these two.
But when I call this Web-service via JQuery ajax() method it returns "Internal Server Error".
Code :
<html>
<head>
<title>PhoneGap Example</title>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<link rel="stylesheet" href="css/jquery.mobile.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
<script type="text/javascript" >
function button_clicked(){
var name = $.trim($("#txtName").val());
var contact = $.trim($("#txtContactNumber").val());
var type = $.trim($("#txtType").val());
if(name.length > 0)
{
$.ajax({
type: "POST",
url: "http://my-domain.com/DocNote_WebService/DoctorMaster.asmx/insertDoctor",
data: "{doctorName: "+ name + ",contactNumber: "+ contact + ",doctorType: " + type +"}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success : function(data) {
alert('Record Saved Sucessfully.....!!!!');
},
error: function(xhr, ajaxOptions, thrownError) {
alert('ERROR: '+thrownError);
}
});
}
}
</script>
</head>
<body>
<section id="page1">
<header><h1>DocNote</h1></header>
<div class="content" data-role="content">
<h3>Enter Doctor Info</h3>
<div data-role="fieldcontain">
<input type="text" data-clear-btn="true" name="txtName" id="txtName" placeholder="Enter Name"/>
<br/>
<input type="text" data-clear-btn="true" name="txtContactNumber" id="txtContactNumber" placeholder="Contact Number"/>
<br/>
<input type="text" data-clear-btn="true" name="txtType" id="txtType" placeholder="Type"/>
<br/>
<button id="btnSubmit" class="ui-btn ui-btn-inline ui-corner-all" onclick="button_clicked()">Submit</button>
<button id="btnCancel" class="ui-btn ui-btn-inline ui-corner-all">Cancel</button>
</div>
</div>
</section>
</body>
</html>
My Web-service Method :
[WebMethod]
public void insertDoctor(String doctorName, String contactNumber, int doctorType) {
using (SqlConnection connection = ConnectionFactory.getConnection())
{
SqlCommand sqlCommand = new SqlCommand("Insert into DOCTOR_MASTER (DOCTOR_NAME, DOCTOR_CONTACT_NUMBER,DOCTOR_TYPE) values (#name,#contact,#type)",connection);
sqlCommand.Parameters.AddWithValue("#name", doctorName);
sqlCommand.Parameters.AddWithValue("#contact",contactNumber);
sqlCommand.Parameters.AddWithValue("#type", doctorType);
sqlCommand.ExecuteNonQuery();
}
}
Tell me what I am doing wrong .....
Thanks in Advance .........
Pass the data as an object, not a string...
$.ajax({
type: "POST",
url: "http://my-domain.com/DocNote_WebService/DoctorMaster.asmx/insertDoctor",
data: {
"doctorName": name,
"contactNumber": contact,
"doctorType": type
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success : function(data) {
alert('Record Saved Sucessfully.....!!!!');
},
error: function(xhr, ajaxOptions, thrownError) {
alert('ERROR: '+thrownError);
}
});
Finally, I found Solution Here.
data: "{ firstName: 'Aidy', lastName: 'F' }"
Then, I modified my Code and it Worked.
$.ajax({
type: "POST",
url: "http://my-domain.com/DocNote_WebService/DoctorMaster.asmx/insertDoctor",
data: "{doctorName:'" + doctorName + "', contactNumber:'" + contactNumber + "', doctorType:'" + doctorType + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success : function(response) {
alert('Record Saved Sucessfully.....!!!!');
},
error: function(xhr, ajaxOptions, thrownError) {
alert('ERROR: '+thrownError);
}
});
Hello I am stuck with an android application I am trying to build using phonegap. The application I try to build retrieves a feed from a wordpress site which i have installed locally. I have already installed and tested JSON-API plugin and it worked correctly.
But when i created an android application using phonegap with eclipse I do not get the feed loaded via javascript.
I have created an html file under projectfolder/assets/www folder where the code is
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.js"></script>
<script src="cordova.js"></script>
<script>
jQuery.support.cors = true;
var target_div = "#contents";
var nextID = null;
var prevID = null;
var api_read_url = "http://127.0.0.1/wordpress_phonegap/?json=get_post&dev=1&id=";
var init_url = "http://127.0.0.1/wordpress_phonegap/?json=get_post&dev=1&p=1";
function getID(url) {
var str = new String(url);
var x = str.split("=");
var id = x[1];
return id;
}
function readSinglePost (url,target_div) {
var URL = url+"&callback=?";
console.log(URL);
jQuery.ajax({
url: URL,
dataType: "json",
jsonp: null,
jsonpCallback: null,
success: function(data) {
alert(data);
jQuery(target_div).html("");
try{
jQuery(target_div).append("<h1>"+data.post.title+"</h1>");
jQuery(target_div).append(data.post.content);
jQuery(target_div).append("<small>"+data.post.date+"</small>");
} catch (e){
console.log("error console");
}
try {
nextID = getID(data.next_url);
}
catch (e) {
;
}
try {
prevID = getID(data.previous_url);
}
catch (e) {
; // you should include some of your own error-handling code or
}
} ,
error: function(error){
console.log("error console");
}
});
}
//Renew next and previous buttons
function getNext(){
jQuery("#next").click(function(){
var id = nextID;
var nextURL = api_read_url + id;
readSinglePost(nextURL, target_div);
});
}
function getPrevious(){
jQuery("#previous").click(function(){
var id= prevID;
var prevURL = api_read_url + id;
readSinglePost(prevURL, target_div);
})
}
jQuery(document).ready(function() {
readSinglePost(init_url, target_div);
getNext();
getPrevious();
});
</script>
</head>
<body>
<div id="main">
<button type="button" id="previous">Previous</button>
<button type="button" id="next">Next</button>
<div id="title"></div>
<div id="contents"></div>
</div>
</body>
</html>
When I open this file using firefox and firebug I obtain the following error in the console.
SyntaxError: invalid label
"status": "ok",
I understand what has happened. As it is a crossbrowser interaction json gets sent in jsonp format and thus the json value gets sent wrapped in a function. How can i get the value correctly?
I have read several threads and articles but unfortunately I have found no solution. The example comes from the tutorial included in the book "WordPress Mobile Applications with PhoneGap"
I am trying to create a index with navigation that when clicked will load the pages through ajax instead of going to another html
this is my javascipt:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function getPage(){
$.ajax({
type: 'post',
url: 'places.html',
success: function(html)
{
$("#response").fadeIn("slow");
$("#response").html(html);
}
});
return false;
}
</script>
i have a href that calls this
get page
this worked for xampp local host but seems to generate error in phonegap
Uncaught ReferenceError: $ is not defined at file:///android_asset/www/index.html:129
which is the line where the $.ajax is located
You have to wait till the device is ready to make an ajax call.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
function getPage(){
$.ajax({
type: 'post',
url: 'places.html',
success: function(html)
{
$("#response").fadeIn("slow");
$("#response").html(html);
}
});
return false;
}
}
well ajax worked at last needed the complete file address and put it inside documentready
$.ajax({
type: 'post',
url: 'file:///android_asset/www/.html/places.html',
success: function(html)
{
$("#response").fadeIn("slow");
$("#response").html(html);
}
});
another method i found was
$("#getProfile").click(function() {
var ajax = new XMLHttpRequest();
ajax.open("GET","file:///android_asset/www/places.html",true);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && (ajax.status==200||ajax.status==0)){
var theHTML = ajax.responseText;
document.getElementById('response').innerHTML = theHTML;
}
}
});
thanks for the help Malek
I'm learning Android development with PhoneGap and Facebook Javascript SDK. I keep on having this error everytime I launch my application and I don't know exactly what's wrong. Could you please help me?
These are the following details :
Project Location :
D:\Android Dream\FacebookExercise\assets\www\index.html
Localhost Location :
C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\ROOT\
I'm very sure my APP_ID is correctly set. These are some settings of my FB :
Website with Facebook Login
Site URL: http://localhost:8080/
Mobile Web
Mobile Site URL: http://localhost:8080/
index.html
<html>
<header>
<title>Kissa Android App</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</header>
<body>
<div id="fb-root"></div>
<div id="user-info"></div>
<script type="text/javascript">
var isLoaded = false;
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'The App ID', // App ID
channelUrl : 'http://localhost:8080/res/channel.html', // Channel File
//channelUrl : 'http://10.0.2.2:8080/assets/www/channel.html',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
isLoaded = true;
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//window.location = "http://www.google.com";
} else if (response.status === 'not_authorized') {
// not_authorized
//alert("You are unauthorized to access this page.");
} else {
//document.getElementById('name').innerHTML = '';
}
});
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
document.getElementById('name').innerHTML = 'Name : ' + response.first_name;
var fbLoginBtn = document.getElementById('fbLoginBtn');
fbLoginBtn.innerHTML = '<fb:login-button autologoutlink="true" perms="email"> </fb:login-button>';
FB.XFBML.parse(fbLoginBtn);
});
} else {
// cancelled
}
});
FB.Event.subscribe("auth.logout", function() {window.location = 'index.html'});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<script type="text/javascript">
function isLoaded(){
alert("heuy!");
if(isLoaded)
alert(isLoaded);
else
alert(isLoaded);
}
</script>
<fb:login-button autologoutlink="true" perms="email"> </fb:login-button>
<div id="fbLoginBtn">
<fb:login-button autologoutlink="true" perms="email"> </fb:login-button>
</div>
<div id="name" style="font-family : arial"></div>
<div id="email"></div>
<input type="button" onclick="isLoaded()" value="hey"/>
</body>
You cannot simply use the JS SDK in phonegap environment. You have to use the phonegap facebook plugin, which provides the same api. I have just wrote a little tutorial... http://pjsdev.blogspot.de/2013/03/phonegap-build-facebook-connect-part-2.html