Phonegap 1.8.1 -- Android API for 2.2 -- jQuery 1.7.1 -- jQueryMobile 1.0
I've made a very simple app to test this out and I just can't get it to work. Here it is.
INDEX.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TestApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
function onDeviceReady() {
document.addEventListener("backbutton", onBackButton);
}
function onBackButton(e){
console.log("C'mon guv! Gimme a chance!");
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script type="test/javascript" src='cordova-1.8.1.js'></script>
</head>
<body>
<div id="homepage" data-role="page" data-theme="a">
<div data-role="header">
<h1>Work with me here</h1>
</div>
<div data-role="content">
I am page 1.
Next
</div>
</div>
<div id="char-1" data-role="page" data-theme="a">
<div data-role="content">HAHAHA!</div>
</div>
</body>
</html>
AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="2" android:targetSdkVersion="14"/>
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<application android:label="#string/app_name">
<activity android:name="MyActivity"
android:label="#string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
ADDENDUM - I think the problem is that the 'deviceready' event either does not fire or fires before the code binds to the event. Not sure how to fix it.
Let me know if there's more information I need to provide.. I'm stumped.
As far as i know, back button press event is not working inside onDeviceReady. You have to trigger the event in the every page show. In my case, it works like this,
function onDeviceReady(){
/*Back event handler for all pages navigation*/
$(document).bind ('pageshow', function (e, data) {
if ($.mobile.activePage.attr('id') == 'index') {
document.addEventListener("backbutton", function () {
setTimeout( function() {navigator.app.exitApp();}, 100 );
}, true);
}
else{
document.addEventListener("backbutton", function () {
setTimeout( function() {$.mobile.changePage("#index");}, 100 );
}, true);
}
});
}
In my application, when you presses back button from first screen, it exits the application and if you presses inside any pages, it automatically comes to the first page.
I'm ashamed to admit this.
<script type="test/javascript" src='cordova-1.8.1.js'></script>
It's not test/javascript ... It's text/javascript.
:(
Related
i am trying to use accordion future in my android app . but that future is not working.Please
assist me
Below are my source code
activity_main
Below are my source code
Below are my source code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.muslim.bootstrap.MainActivity">
<WebView
android:id="#+id/mybrowser"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</WebView>
</RelativeLayout>
my java file
Below are my source code
Below are my source code
public class MainActivity extends AppCompatActivity {
WebView MyBrowser;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView MyBrowser = (WebView) findViewById(R.id.mybrowser);
MyBrowser.loadUrl("file:///android_asset/index.html");
}
}
html file
Below are my source code
Below are my source code
Below are my source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
<p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>
</body>
</html>
Below are my source code
Below are my source code
Below are my source code
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.muslim.bootstrap">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
i am trying to use accordion future in my android app . but that future is not working
please help
Modification in your Mainactivity
public class MainActivity extends AppCompatActivity {
WebView MyBrowser;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView MyBrowser = (WebView) findViewById(R.id.mybrowser);
// For allowing Javascript
WebSettings settings = MyBrowser.getSettings();
settings.setDomStorageEnabled(true);
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
MyBrowser.loadUrl("file:///android_asset/index.html");
}
}
and also make sure in XML. your web view's height and width should be match_parent
WebView MyBrowser = (WebView) findViewById(R.id.mybrowser);
WebSettings webSettings = MyBrowser.getSettings();
webSettings.setJavaScriptEnabled(true);
MyBrowser.loadUrl("file:///android_asset/index.html");
Try this ,you have to enable javascript
Is it a good way to use card in Materialize CSS as on click card popups it used for values to edit and save and it pops back i'm using it for android application using a Phonegap.
The real problem is i was not able to use modal in Materialize CSS as this is not responding well in my emulator.modal is pop up's without clicking.
Thanks in advance.
Sometime this will be happened when you use <a> tag. Instead of using<a> tag use <button> tag. I have added sample html code snippet. Try this.
HTML
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
Full Code in single html page.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" >
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
I am using phonegap for creating the apk file for android application. Below is the code of my index.html
<html>
<head><title>Test application</title>
<script src="Scripts/jquery.js"></script>
<script>
$(document).ready(function(){
$("#submitValue").on("click",function(){
alert("");
getServerResponse($("#userValue").val());
});
});
function getServerResponse(userValue){
var serverUrl="http://xxx.site.net/xxx/Hello/"+ userValue +"?format=json";
$.ajax({
url:serverUrl,
type:"GET",
contentType:"application/json",
dataType:"jsonp",
success:function(data){
alert("Success");
$("#serverResponse").html(data.Result);
},
error:function(){
alert("error");
}
});
};
</script>
</head>
<body>
<div>
<h3>Enter your name and click submit</h3>
</div>
<div>
<input type="text" placeholder="Enter your Name" id="userValue"/>
<input type="button" id="submitValue" value="Submit"/>
</div>
<div id="serverResponse"></div>
</body>
This works perfectly when i open using a browser, but when the app is opened and submit is clicked, i get the alert for click, but nothing happens after that. neither success alert not error alert comes when i click the submit button via android app
You need to give permission for INTERNET in AndroidManifest.xml file.
Include the line below to the AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
I am developing android apps using phonegap + Jquery mobile. My apps displaying the list in listview div but look and feel of listview not working on 2.3.3 and working fine on version greater than 3.0.
following is the my index.html page. please suggest me answer.
<!DOCTYPE HTML>
<html>
<head>
<title>ListView</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="js/jquery.mobile-1.4.1.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="cordova.js"></script>
<script src="js/jquery.mobile-1.4.1.js"></script>
</head>
<body>
<div data-role="page" id="courseList">
<div data-theme="a" data-role="header">
<h3>
Course List
</h3>
</div>
<div data-role="content">
<!-- <div class="example-wrapper" data-iscroll> -->
<ul data-role="listview" id="output" data-theme="b">
</ul>
<!-- </div> -->
</div>
</div>
</body>
<script>
$(document).ready(function() {
if(window.isphone) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
});
// device APIs are available
function onDeviceReady() {
// Now safe to use device APIs
$.ajax({
url:"http://www.cilibrary.ojaswitech.com/getLatestNews",
// crossDomain: true,
//type : "POST",
dataType: 'json',
async: true,
success: function (result) {
$.each(result, function(i, item) {
$('ul').append('<li><a href="">' + item + '<p></li>');
});
$('#output').listview("refresh");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
})
}
</script>
</html>
following is the two images. first is left side image 2.3.3 and second is right side image 4.2.2
This is a known bug which is introduced in version 1.4.1 and effects Android 2.3.x devices and IE8. The problem is in lines 3195 and 3222 of jquerymobile.js. There's a default property which happens to be a reserved keyword.
You can solve this problem either by modifying these two lines;
duration = $.fn.animationComplete.default; // this
duration = $.fn.animationComplete.defaultDuration; // to this
// and
$.fn.animationComplete.default = 1000; // this
$.fn.animationComplete.defaultDuration = 1000; // to this
or wait until version 1.4.2 is out with the fix for this bug.
Reference
Acctually there might be an even easier way. Try with replacing:
$('#output').listview("refresh");
with this instead:
$('#output').listview("create");
=) Good luck!
Danny
I have a simple application, sort of like a warm-up starter to jquery on phonegap.
I run it on my emulator and it runs just fine. The layout looks, good, like its supposed to.
But when i install the .apk on my device (which happens to be a GALAXY S), the html that i expect to see is ... off. What i mean to say is, on my device it has no colours, no transitions, just plain blue links in a white background.
Are my javascript files or css files not included properly? Im totally a newbie on this, please help me out.
I just followed http://jquerymobile.com/ where one is supposed to drag and drop a layout and download the html,css, js files for it and include in your project. I also followed http://docs.phonegap.com/en/1.8.1/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android to get started with PhoneGap.
My app name is 'Settling' and the java file looks like this:
package maddy.application;
import android.app.Activity;
import org.apache.cordova.*;
import android.os.Bundle;
public class SettlingActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/app.html");
}
}
My android manifest file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="maddy.application"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="8" />
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name" >
<activity
android:name=".SettlingActivity"
android:label="#string/app_name" android:configChanges="orientation|keyboardHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
And my 'app.html' looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="maddytheme.css" />
<style>
/* App custom styles */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<script src="my.js">
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h5>
Settlement
</h5>
</div>
<div data-theme="a" data-role="header">
</div>
<div data-role="content" style="padding: 15px">
<div data-role="navbar" data-iconpos="left">
<ul>
<li>
<a href="#page1" data-theme="" data-icon="">
Users
</a>
</li>
<li>
<a href="#page1" data-theme="" data-icon="">
Money
</a>
</li>
<li>
<a href="#page1" data-theme="" data-icon="">
My name
</a>
</li>
</ul>
</div>
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Divider
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
List here
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
List 1
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
List 2
</a>
</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<script>
//App custom javascript
</script>
</body>
I think you might forget to switch on your wifi internet connection or mobile network connection. I faced the same problem because of this only. Otherwise you just put js file locally into your application.
Did you whitelist the remote sites that you are loading your CSS and JS from? Looks like you'll need to add:
http://code.jquery.com
http://ajax.googleapis.com