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>
Related
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);
}
});
Hii i am doing a simple phone gap application.i want to display my data in list view in phonegap using ajax.but i am facing one problem in listview.my list view showing only one value at a time.means i want to show all titles in list view.but it showing only one title..how can i show all databse calumns value in listview.how can i loop it.pls help.
$.ajax({
url: 'http://url/display.php',
type: 'GET',
dataType: "json",
success: function(data){
$('#list').append('<li >'+data.title+'</li>');
$("#list").listview("refresh");
alert('Data successfully display');
},
error: function(){
alert('There was an error');
}
});
#html
<div data-role="content">
<div class="example-wrapper">
<ul data-role="listview" id="list" data-divider-theme="a" data-inset="true</ul>
</div>
</div>
php
<?php
include_once('config/config.php');
$sql="select * from myapp";
$result=mysql_query($sql);
while($row = mysql_fetch_array($result))
{
$array = $row;
}
echo json_encode($array);
?>
You are currently getting one row of data using your PHP code, I have modified your code,
<?php
include_once('config/config.php');
$sql="select * from myapp";
$result=mysql_query($sql);
while($row = mysql_fetch_array($result))
{
$array[] = $row;
}
echo json_encode($array);
?>
And ajax code like this,
$.ajax({
url: 'http://url/display.php',
type: 'GET',
dataType: "json",
success: function(data){
for(i=0;i<data.length;i++){
$('#list').append('<li >'+data[i].title+'</li>');
}
$("#list").listview("refresh");
alert('Data successfully display');
},
error: function(){
alert('There was an error');
}
});
You did not close <ul> tag. Change like this,
<div data-role="content">
<div class="example-wrapper">
<ul data-role="listview" id="list" data-divider-theme="a" data-inset="true">
</ul>
</div>
</div>
Check this too,
$.ajax({
url: 'http://url/display.php',
type: 'GET',
dataType: "json",
success: function(data){
var li_tag='';
$(data).each(function( index,value ) {
console.log( index + ": " + value );
li_tag=li_tag+'<li>'+value+'</li>'
});
$('#list').append(li_tag);
$("#list").listview("refresh");
alert('Data successfully display');
},
error: function(){
alert('There was an error');
}
});
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");
}
});
hope u guys will be able to help me. I'm relatively very new to phonegap. I've cracking my head on this for a week+ now on this subject. I have a dbase wcf rest service in C# and have built an android client to call this service. Everything seem to be working fine when I test this app in wp7 i.e call this service in json format. but when I migrated this app to eclipse android environment and configured relevant settings the app will not run successfully even after I changed the url: http//:localhost:1067/Service1 to http//:10.0.2.2:1067/Service1. I'm still using a demo app which I have modified to the following
index.html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=320 user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>PhoneGap WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="console.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="init.js"></script>
</head>
<body>
<div>
<h1 id="welcomeMsg">Welcome</h1>
<p>log in</p>
<p>Get Ajax</p>
<p>Post Ajax</p>
<p>Get Single Item</p>
<p>Delete</p>
<p>Update</p>
<p>Identify</p>
<p>Log via Form</p>
<p>log out</p>
<p id="errorMessage" class="err"></p>
<p id="loginCall"></p>
<p id="ajaxCall"></p>
<p id="postAjaxCall"></p>
<p id="getSingleCall"></p>
<p id="deleteSingleCall"></p>
<p id="updateSingleCall"></p>
<p id="identifyCall"></p>
<p id="logViaFormCall"></p>
<p id="logoutCall"></p>
<input type="text" id="myTest" value="1" name="myTest" />
</div>
</body>
</html>
and the init.js
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
jQuery.support.cors = true; //Cross-Origin Resource Sharing
});
// phonegap is initialised
function onDeviceReady() {
$("#welcomeMsg").append("...Ready");
}
function showAlert(msg) {
navigator.notification.alert(
msg, // message
alertDismissed, // callback
'Alert', // title
'Done' // buttonName
);
}
function showError(error, otherInfo) {
var element = document.getElementById('errorMessage');
element.innerHTML = "Errors: " + error.Message + "<br>" + (otherInfo ? otherInfo : "");
}
function getAjax() {
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/Service1/',
type: 'GET',
//headers:
beforeSend: function (xhr) {
//xhr.overrideMimeType('text/plain; charset=x-user-defined');
},
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: '{ "Idi":5, "Type": "mike" }'
})
.done(function (data) {
var element = document.getElementById('ajaxCall');
element.innerHTML = JSON.stringify(data, null, "\t");
})
.fail(function (xhr, status, error) {
showError(error);
})
.always(function () { showAlert("complete"); });
}
function postAjax(parameters) {
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/Service1/',
type: 'POST',
//headers:
//beforeSend: function (xhr) {
//},
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: '{ "Id":5, "StringValue": "jerry 22" }'
})
.done(function (data) {
var element = document.getElementById('postAjaxCall');
element.innerHTML = JSON.stringify(data, null, "\t");
})
.fail(function (xhr, status, error) { showError(error); })
.always(function () { showAlert("complete"); });
}
function login() {
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/login/',
type: 'POST',
//headers:
//beforeSend: function (xhr) {
//},
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: '{ "Username":"test", "Password": "test" }'
})
.done(function (data) {
var element = document.getElementById('loginCall');
element.innerHTML = "Login Succesfull ? " + data;
})
.fail(function (xhr, status, error) { showError(error); })
.always(function () { showAlert("complete"); });
}
function logout() {
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/login/logout',
type: 'POST',
//headers:
//beforeSend: function (xhr) {
//},
dataType: 'json',
contentType: 'application/json; charset=utf-8'
})
.done(function (data) {
var element = document.getElementById('logoutCall');
element.innerHTML = "Login Out Succesfull ? " + data;
})
.fail(function (xhr, status, error) { showError(error); })
.always(function () { showAlert("complete"); });
}
function getSingle() {
var longcentre = "3.355";
var latcentre = "6.602";
var locname = "hotel";
var searchrad = "10";
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/Service1/?lat1='+latcentre+'&long1='+longcentre+'&srad='+searchrad+'&lname='+locname+'',
// url: 'http://10.0.2.2/estatewcf/Service1/?lat1=6.602&long1=3.355&srad=2.5&lname=bank',
type: 'GET',
//headers:
beforeSend: function (xhr) {
//xhr.overrideMimeType('text/plain; charset=x-user-defined');
},
dataType: 'json',
contentType: 'application/json; charset=utf-8'
})
.done(function (data) {
var element = document.getElementById('getSingleCall');
element.innerHTML = JSON.stringify(data, null, "\t");
})
.fail(function (xhr, status, error) { showError(error); })
.always(function () { showAlert("complete"); });
}
function deleteSingle(parameters) {
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/Service1/88',
type: 'DELETE',
//headers:
beforeSend: function (xhr) {
//xhr.overrideMimeType('text/plain; charset=x-user-defined');
},
dataType: 'json',
contentType: 'application/json; charset=utf-8'
})
.done(function (data) {
var element = document.getElementById('deleteSingleCall');
element.innerHTML = JSON.stringify(data, null, "\t");
})
.fail(function (xhr, status, error) { showError(error); })
.always(function () { showAlert("complete"); });
}
function updateSingle(parameters) {
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/Service1/99',
type: 'PUT',
//headers:
beforeSend: function (xhr) {
//xhr.overrideMimeType('text/plain; charset=x-user-defined');
},
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: '{ "Id":99, "StringValue": "JERRY 22 " }'
})
.done(function (data) {
var element = document.getElementById('updateSingleCall');
element.innerHTML = JSON.stringify(data, null, "\t");
})
.fail(function (xhr, status, error) { showError(error); })
.always(function () { showAlert("complete"); });
}
function identify(parameters) {
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/login/identify',
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8'
})
.done(function (data) {
var element = document.getElementById('identifyCall');
element.innerHTML = JSON.stringify(data, null, "\t");
})
.fail(function (xhr, status, error) { showError(error); })
.always(function () { showAlert("complete"); });
}
function postAjax1(parameters) {
var id = "2";
var mysearchradius = "ope";
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/Service1/',
type: 'POST',
//headers:
//beforeSend: function (xhr) {
//},
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: '{ "IDn":"' + id + '","type1":"' + mysearchradius + '" }'
})
.done(function (data) {
var element = document.getElementById('postAjaxCall');
element.innerHTML = JSON.stringify(data, null, "\t");
})
.fail(function (xhr, status, error) { showError(error); })
.always(function () { showAlert("complete"); });
}
function logViaForm() {
var jqxhr = $.ajax({
url: 'http://10.0.2.2/estatewcf/login.aspx',
type: 'GET',
dataType: 'html'
})
.done(function (data) {
var eventVal = $(data).find('#__EVENTVALIDATION').attr('value');
var viewState = $(data).find('#__VIEWSTATE').attr('value');
//build post data
var postData = { __VIEWSTATE: viewState, __EVENTVALIDATION: eventVal, UserName: "test1", Password: "test2", LoginButton: "Log In" };
var jqxhr1 = $.ajax({
url: 'http://10.0.2.2/estatewcf/login.aspx',
type: 'POST',
dataType: 'html',
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
data: postData
})
.done(function (data, status, jqxhr1) {
//this works but we will get an error dues to the redirect to the home.aspx
//TODO: need to handle that
var element = document.getElementById('logViaFormCall');
element.innerHTML = "Login Succesfull ! " + jqxhr1.status;
})
.fail(function (xhr, status, error) {
showError(error, "TODO: Works but need to handle redirect!!");
//but it really works!
var element = document.getElementById('logViaFormCall');
element.innerHTML = "Login Succesfull ! Verify that Authenticated AJAX calls work!";
})
.always(function () { showAlert("complete login"); });
})
.fail(function (xhr, status, error) { showError(error); })
.always(function () { showAlert("complete"); });
}
cordova.xml
<cordova>
<!--
access elements control the Android whitelist.
Domains are assumed blocked unless set otherwise
-->
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<!-- <access origin="https://maps.googleapis.com/maps/api/js?key=AIzaSyDD353fOPh-KBUQ-2ekPCg75uxXRn0D9Tk&sensor=false" /> allow any secure requests to example.com -->
<!-- <access origin="https://10.0.2.2*" subdomains="true" /> such as above, but including subdomains, such as www -->
<!-- <access origin="*."/> Allow all domains, suggested development use only -->
<log level="DEBUG"/>
<preference name="classicRender" value="true" />
</cordova
as I have said earlier I have tested the wcf service locally withing vs2010 server and iis7
It seems to be working well, but Im not able to get it to work in android. Any help will be appreciated. Thanks in advance.
I found out that there is notting wrong with this code other than to un-comment the commented whitelist part i.e converting :
<!-- <access origin="https://10.0.2.2*" subdomains="true" /> such as above, but including subdomains, such as www --> to
<access origin="https://10.0.2.2*" subdomains="true" />
and that solved it.
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