Im just learning PhoneGap and I have some problems conserning the databases...
SO I want to connect to my localhost databse and simply display the items from the table.. With the ripple emulator everything works, but when I install the app on my device the data is not displayed, but im not getting any errors either.
So I am using the PhoneGap Desktop App. The server is running on http://88.216.170.246:3000
So in my ajax I do this:
$(document).on('click', '.show', function (e) {
$.ajax({
type:"GET",
url:"http://88.216.170.246/Test/www/getData.php",
success: function(result) {
if (result) {
$(".show_data").html(result);
}
else {
alert("error");
}
}
});
});
});
This renders everything perfectly on the emulator, but on my phone, nothing happens... Does the url not work? Maybe I cant access localhost on my device?
Please read:
Top Mistakes by Developers new to Cordova/Phonegap
https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md
READ #1, #4, #5, & #10
#4 reads
In the code, did not listen for the 'deviceready' event.
This is listed MULTIPLE times in the documentation, and is include in every example where it is appropriate. It is still missed. Brian Ford - an Angular developer, points to the section of documentation we need.
This is a very important event that every Cordova application should use.
Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.
Please read the FAQ and follow the links. You have made many bad assumptions.
Best of Luck
Jesse
Related
I have made a progressive web app. One part of it should update a mysql database and prepare to send a SMS. It seems to work well on Android but is erratic on iPhone. When it goes wrong, the iPhone shows "sms:+4412345678?&body=1" in the browser address bar instead of opening the SMS app.
The html is
<button class="1">Going to RV</button>
<button class="2">Going to Station</button>
<button class="3">Delayed but Attending</button>
<button class="4">On Scene</button>
<button class="5">Not Attending</button>
Then I have a Jquery function
$(function(){
$('button').click(function(){
var callsign = "<?php echo $callsign ?>";
var response = $(this).attr("class");
$.ajax({
url: 'myresponse.php',
type: 'POST',
data: {callsign: callsign,
response: response}
}).done(function() {
$("#beforeresponse").css("display", "none");
$("#tresponse").css("display", "block");
$("#teamresponse").load("allresponses.php div#teamresponse");
});
});
});
I think perhaps the two tasks are tripping over each other and causing a problem depending on which starts or finishes first. Does that sound feasible?
I am wondering whether I can disable the links
<button class="1">Going to RV</button>
and then trigger the SMS with a .done function after the existing .done is completed. If so, how?
Or am I completely wrong?
Well I finally worked out the answer. I hope this may be of use to someone else.
The link "sms:+4412345678?&body=1" works when the page is opened in a browser window, but not when it is installed as a web app. So for this particular app where the SMS message is a fundamental part of the functionality, I have to steer iPhone users to just place a shortcut on their home page, while Android users can install the app in the normal proper way.
It feels a bit hacky, but it's a solution.
I am new to phonegap. I want to call server side web service from phonegap application to get data. I have tried it on browser it working fine and also on Phonegap developer app for Android. Both are working fine. But if i make .APK from PhonegapBuild console and installed on android device, it doesn't work anymore.
I have used AJAX to call web service. I also tried other solutions related this but all are fail.
Solution 1:
Changed in config.xml
< access origin="*"/> with
< access origin="http://mywebserviceipaddress"/>
Solution 2: Changed AJAX call with .get() method. For this added image where i have added two methods for code.
Solution 3: Added
$.ajax({
...
crossDomain: true,
async: false,
cache : false,
...
});
in AJAX call
Here is my both code. Please tell me if missing any parameters.
enter image description here
I'm building a meteorjs app and deploying it as a native (cordova) app for Android and iOS.
I need to deep link to my app, so I can launch it by following a link on a website.
I've implemented URL Scheme using the cordova plugin by Eddy Verbruggen (https://github.com/EddyVerbruggen/Custom-URL-scheme) and I managed to get my app launched by following a link of the "myapp://" format.
The problem is that, even though the app is getting successfully launched, the handleOpenUrl hook is not getting triggered.
Meteor.startup(function() {
handleOpenURL = function handleOpenURL(url) {
console.log("received url: " + url);
// parse url and proceed accordingly
}
});
Nothing gets logged. So I have no way of passing any parameters to my app, or even detect that the app was launched via a link that follows the 'myapp://' URL scheme.
Also, I noticed that even though my app is already open, if I switch to the browser and click on a special "myapp://" link, instead of switching to my (already open) app, a new instance of the app is getting launched.
[edit] Turned out the two problems were related. Once I prevented a new instance of the app from being initialized, the handleOpenUrl function was triggered successfully.
I'm using the Android emulator for all my tests. I haven't had the chance to test on iOS yet.
[edit] iOS didn't give this problem at all. It was only an Android problem.
If anyone out there has any experience on implementing custom URL scheme in meteorjs, your feedback is much appreciated!
I managed to fix the issue I was facing. Here is the solution, for anybody else who is facing similar problems.
First of all, it was only occurring on Android. iOS had no problem whatsoever to launch the app and trigger the handleOpenUrl function.
The two issues that I was facing on Android turned out that there were related to each other. The fact that a new instance of the app was triggered every time, prevented the handleOpenUrl function from being triggered.
Both problems were fixed by adding a single line of code on the mobile-config.js file:
App.setPreference("AndroidLaunchMode", "singleTask");
I'm having trouble getting jPlayer to play tracks on iOS and Android devices. It does work on Windows Phone. I need to download a tracklist as JSON over AJAX call. Doing so, causes Android Chrome to cancel the GET request to the set track.
This is making my head hurt since it works on desktop & windows phone :-)
Below is a small snippet of the code with similar idea.
$('.container').on('click', '.start', function(){
$.ajax({
url: "json/jsondata.json",
dataType: "json",
type: "GET",
cache: true,
context: document.body
}).done(function(response){
// while-loop through response
// put track names in array etc...
var mp3file = trackarray[0];
App.$jmlPlayer.jPlayer("setMedia", {
mp3: mp3file
});
// This doesn't work on iOS / Android
$('.jmlPlayer').jPlayer("play");
});
});
$('.container').on('click', '.next', function(){
if(something){
var mp3file = trackarray[nextIdx];
App.$jmlPlayer.jPlayer("setMedia", {
mp3: mp3file
});
// This does work on iOS / Android
$('.jmlPlayer').jPlayer("play");
}
});
I believe this is due to both iOS and Android needing the initial play on an HTML5 audio element to be driven by a user click event - this is to prevent pages auto-playing audio.
Even though a user has initiated the play, as your actual call to play is inside the AJAX callback, the browser thinks this is not user-driven as the AJAX call could have been initiated by anything.
The workaround is, as you found, to trigger a play of some kind while inside the user click event context. Any additional calls to the player should then work from that point onwards as expected (wherever they originate from).
Alternatively setting async: false in your ajax call options seems to work as well, I guess this keeps the AJAX callback in the user click event context.
Ok, after "few" hours of debugging this on iOS and Android devices, I found it to be easiest to play an empty .mp3 file on first user click/touch gesture. This way it works from there on out.
I have on idea why this works, but it just does.
I have a page (jobs.php) which has all the mobile features like call, sms and email. I am accessing this page as an iframe in the main index.php page.
I have made a function such that before making a call or sms or email, it logs the entry into the database.
jobs.php code
Javascript (all variable are defined and working)
<img src=\""+imgpath+"email_logo.png\"onclick=\"setMailLog('"+installername+"',"+customerId+",'"+email+"')\" id=\"mimg_"+customerId+"\"/>
function setMailLog(installerName, customerId,email){
console.log("Email Attempted:");
$.ajax({
url: 'functions.php',
type: 'POST',
dataType:'text',
data: 'elogins='+installerName+'&elogcid='+customerId,
success: function(result){
console.log(result);
$("#mimg_"+customerId).wrap('<a id="mhrefid_'+customerId+'" target="_blank"></a>');
$('#mhrefid_'+customerId).attr('href','mailto:'+email);
window.location.href=$("#mhrefid_"+customerId).attr('href');
}
});
}
This is working perfectly fine on all desktop browsers. Its working fine on default browser in Android but breaks on Chrome in Android which is important because these are mobile features and should work on mobile device on every browser.
When I click on the mail icon in Chrome on Android, it says
The web page at mailto:email might be temporarily down or it may have removed permanently to a new address
Error 302(net::ERR_UNKNOWN_URL_SCHEME): Unknown error
The error page shows up only in particular iframe and not on the whole index.php file.
Call and sms functions the same way, just the error changes to tel:5225 or sms:5114
This is all in an iframe, may be that's what causing the problem?
Looks like a bug to me. I've created a ticket to track it https://code.google.com/p/chromium/issues/detail?id=223146
To work around the issue, replace
window.location.href=$("#mhrefid_"+customerId).attr('href');
with
window.top.location.href=$("#mhrefid_"+customerId).attr('href');
That changes the location of the top-level page rather than the iframe, which works fine in Chrome.