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');
}
});
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>
Hello I'm developing a project in which I need to fetch image from JSON link.
now what I want is, that image wil be save first time in external storage in my android phone and after that image will fetched from my external storage not from json file. I want my app to give offline support if data connection is not there.
I'm able to load image but don't know how to save it on external storage in my mobile device. I'using Phonegap with Eclipse.
This is My Json file
[
{
"image":"timthumb.php?src=newsimages\/14351244224.jpg&w=125&h=90", "news_id":"411"`,"news_title":"JEE (\u090f\)","added_date":"2015-06-24"},
{"image":"timthumb.php?src=newsimages\/2015\/06\/143434188770.jpg&w=125&h=90","news_id":"404","news_title":"\u092e\\u0947 ","added_date":"2015-06-15"}
This is My Code that access Image and other data from Json :
<script type="text/javascript">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
function fetchfromJsonfile() {
$.ajax({
type: "GET",
dataType: "json",
url: "URL_here,
cache: false,
beforeSend: function() {
$('#res2').html('loading please wait...');
},
success: function(jsondata) {
var i=1;
$.each(jsondata, function(idx, obj) {
var str = '';
var img='';
var latestNews='';
var date='';
date += obj.added_date;
str += obj.news_title;
img += "<img src='URL"+obj.image+"'/>";
$('#image'+i).html(img);
$('#latestNews'+i).html(str);
$('#date'+i).html(date);
$('#res2').html(' ');
$('#button').hide();
i++;
});
}
});
}
<div>
<h3 id="image1"></h3>
<strong id="latestNews1">Loding...</strong>
<div class="decoration"></div>
<h3 id="image2"></h3>
<strong id="latestNews2">Loding...</strong>
<em id="date2"></em>
<div class="decoration"></div>
<h3 id="image3"></h3>
<strong id="latestNews3">Loding...</strong>
<em id="date3"></em>
<div class="decoration"></div>
<h3 id="image4"></h3>
<strong id="latestNews4">Loding...</strong>
<em id="date4"></em>
<div class="decoration"></div>
<h3 id="image5"></h3>
<strong id="latestNews5">Loding...</strong>
<em id="date5"></em>
<i class="fa fa-chevron-right"></i>
</div>
You can use this link for adding file permissions in your application. You need to add some plugins which information you can get from above link I have mentioned.
Basically when you download file it gets saved in your mobile gallery for Android.
Here is Code for downloading file:
var file_url = 'http://aws_s3_or_any_other_url';
var filePath = 'local/path/to/your/file';
var downloadFile = new FileTransfer();
var encoded_url = encodeURI(url);
downloadFile.download(
uri,
filePath,
function(success) {
console.log("download complete: " + success.fullPath);
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
},
false,
{
headers: {
"Authorization": "Token XXXXXXX*"
}
}
);
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);
}
});
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery Mobile loadPage() Method</h1>
</div>
<div data-role="content" id="content_container">
<form id="my_form">
<input type="text" id="name" />
<input type="text" id="surname"/>
<input type="button" id="yes">
</form>
</div>
</div>
<script>
var storePageLoaded = false;
$(document).on('click', '#yes', function() {
$.ajax({
type: "POST",
url: "searchresult.php",
data: $("form#my_form").serialize(),
success: function(data){
$.each(data, function(i, elem) {
nic_list.push({label: elem['p_nic']});
});
}
}).done(function (data) {
$.mobile.changePage('next-page.html',{transition:"slide"});
}).fail(function (jqXHR, textStatus) {
alert(error);
});
return false;
});
</script>
I created this page to send some form data to php file and print the data in a another page.But when i try this i get following error .I have change the code little bit to retrieve the data .It works fine but i need to populate the data next-page.html
10-14 11:10:05.108: E/Web Console(9066): Uncaught TypeError: Object #<Object> has no method 'jqmData' at http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js:2
$(document).on('click', '#yes', function() {
$.ajax({
type: "POST",
url: "searchresult.php",
data: $("form#my_form").serialize(),
success: function(response){
alert(success);
}
}).done(function (data) {
$.mobile.changePage('next-page.html',{transition:"slide"});
}).fail(function (jqXHR, textStatus) {
alert(error);
});
return false;
});
I am developing one application in PhoneGap in that application i want to share text-message in Facebook,twitter and LinkedIn. for ANDROID-LinkedIn i am searching many Google links but i am getting good one. please help me i am struck here
I am implementing this sample:
<html>
<head>
<title>OAuthSimple w/ LinkedIn</title>
<script src="OAuthSimple.js"></script>
<script>
/*
You must edit the two following lines and put in your consumer key and shared secret
*/
var consumer_key = "ibmay1qostgk";
var shared_secret = "4HqeDRZ2ZKAvASlM";
/*
Nothing below here needs to be edited for the demo to operate
*/
var oauth_info = {};
var oauth = OAuthSimple(consumer_key, shared_secret);
function parse_response(response, callback)
{
response.replace(new RegExp("([^?=&]+)(=([^&]*))?", "g"), function($0, $1, $2, $3) { oauth_info[$1] = $3; });
callback.call();
}
function authorize_url()
34{
set_url("https://www.linkedin.com/uas/oauth/authenticate?oauth_token=" + oauth_info.oauth_token, document.getElementById("au"));
}
function access_token_url(pin) {
oauth.reset();
var url = oauth.sign({action: "GET", path: "https://api.linkedin.com/uas/oauth/accessToken", parameters: {oauth_verifier: pin}, signatures: oauth_info}).signed_url;
set_url(url, document.getElementById("at"));
}
function fetch_profile_url() {
oauth.reset();
var url = oauth.sign({action: "GET", path: "https://api.linkedin.com/v1/people/~", signatures: oauth_info}).signed_url;
set_url(url, document.getElementById("fp"));
}
function set_url(url, element) {
element.value = url;
var span = document.createElement("span");
span.innerHTML = " <a href='" + url + "' target='_blank'>Open</a>";
element.parentNode.insertBefore(span, element.nextSibling);
}
window.onload = function() {
var url = oauth.sign({action: "GET", path: "https://api.linkedin.com/uas/oauth/requestToken", parameters: {oauth_callback: "oob"}}).signed_url;
set_url(url, document.getElementById("rt"));
}
</script>
</head>
<body>
<h1>OAuthSimple w/ LinkedIn</h1>
<label for="rt">Request Token URL:</label> <input type="text" size="100" name="rt" id="rt" >
<br><br>
<label for="rtr">Request Token Response:</label><br><textarea rows="5" cols="75" name="rtr" id="rtr"></textarea>
<br>
<button onclick="javascript:parse_response(document.getElementById('rtr').value, authorize_url)">Parse Response</button>
<br><br>
<label for="au">Authorize URL:</label> <input type="text" size="100" name="au" id="au">
<br><br>
<label for="vp">Verifier PIN Code:</label> <input type="text" size="100" name="vp" id="vp">
<button onclick="javascript:access_token_url(document.getElementById('vp').value)">Get Access Token URL</button>
<br><br>
<label for="at">Access Token URL:</label> <input type="text" size="100" name="at" id="at">
<br><br>
<label for="atr">Access Token Response:</label><br><textarea rows="5" cols="75" name="atr" id="atr"></textarea>
<br>
<button onclick="javascript:parse_response(document.getElementById('atr').value, fetch_profile_url)">Parse Response</button>
<br><br>
<label for="fp">Fetch Profile URL:</label> <input type="text" size="100" name="fp" id="fp">
</body>
</html>
thanks in advance
Heres a full example of login and sending msg linkedIn using Phonegap
ref = window.open('https://www.linkedin.com/uas/oauth2/authorization?response_type=code&client_id=APIKEY&scope=w_messages r_network r_emailaddress r_fullprofile&state=APISECRET&redirect_uri=SOMEACTIVESITE','_blank','location=no');
ref.addEventListener('loadstart', function(e){
$.mobile.loading( 'show' );
if(e.url.indexOf('?code=') >=0 ){
if(e.url.match(/=[^]+&/)){
var code = e.url.match(/=[^]+&/)[0].substring(1).replace('&','');
window.sessionStorage.setItem('code', code);
ref.close();
$.ajax({
url: 'https://www.linkedin.com/uas/oauth2/accessToken?grant_type=authorization_code&code='+code+'&redirect_uri=http://janbeeangeles.com&client_id=jwwwdjplwubu&client_secret=ygMy3EpVcs6IAORE',
success: function(a){
$.ajax({
url : 'https://api.linkedin.com/v1/people/~/mailbox?oauth2_access_token='+a.access_token,
type: 'post',
headers : {
'Content-Type' : 'application/json',
'x-li-format' : 'json'
},
data: JSON.stringify({
"recipients": {
"values": [
{
"person": {
"_path": "/people/~",
}
}]
},
"subject": "asdasdasd on your new position.",
"body": "You are certainly the best person for the job!"
}),
success: function(a){
alert(2222)
},
error: function(a){
alert(JSON.stringify(a))
}
})
},
error: function(a){
alert(JSON.stringify(a))
}
})
}
}
});