I am trying to implement a switch element using onsen ui to enable/disable BT and having trouble talking to the controller js.
<script>
var app = angular.module('app', ['onsen']);
app.controller('Controller', function($scope) {
$scope.item=[{selected:true}];
$scope.enBT = function(){
var Checked = BTSwitch.isChecked();
alert(Checked);
}
}
</script>
Below is my HTML code.
<div class="app">
<h1 >Apache Cordova using Onsen</h1><br /><br />
<ons-span id="enBluetooth" style="font-size: 40"> Enable bluetooth
<label class="switch">
<input type="checkbox" var="BTSwitch" ng-model="item.selected" ng-change="enBT" class="switch__input">
<div class="switch__toggle"></div>
</label>
</ons-span><br />
</div>
The switch UI displays but I cannot get it to respond to ng-change nor does it show the startup state as true, which is set in JS. Please can someone tell me what I am doing incorrectly? Thanks for your help!
First, you need to set ng-app attribute in the wrapper element, or call angular.bootstrap(document, ['app']), to run the app.
Second, you need to set ng-controller attribute in the wrapper element to bind the controller to the view.
Third, $scope.item doesn't need to be an array. Just $scope.item = {selected: true} is enough.
And there are a few other mistakes in your code. Try below snippet.
var app = angular.module('app', ['onsen']);
app.controller('Controller', function($scope) {
$scope.item= {selected:true};
$scope.enBT = function(){
var Checked = $scope.item.selected;
alert(Checked);
};
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<div ng-app="app" class="app" ng-controller="Controller">
<h1 >Apache Cordova using Onsen</h1><br /><br />
<ons-span id="enBluetooth" style="font-size: 40"> Enable bluetooth
<label class="switch">
<input type="checkbox" var="BTSwitch" ng-model="item.selected" ng-change="enBT()" class="switch__input">
<div class="switch__toggle"></div>
</label>
</ons-span><br />
</div>
Related
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'm developing my first phonegap application. I am trying to get some datas from a web server and then show them in the collapsible list. However, I couldn't add datas to list dynamically. Additionally, the list structure is shown in web page but i couldn't see anything on the android emulator. I just see black page on it. How can solve these problems? Can anyone help about that? Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.
mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"
></script>
</head>
<body>
jQuery Mobile Collapsibles
<div id = "outer" data-role="content">
<div id="list" data-role="collapsible-set">
<div id="first" data-role="collapsible">
<h3>Güvenlik</h3>
<p id="guvenlik">I'm the expanded content.</p>
</div>
<div id="second" data-role="collapsible">
<h3>Sağlık</h3>
<p id="saglik">I'm the expanded content.</p>
</div>
<div id="third" data-role="collapsible">
<h3>Diğer Servisler</h3>
<p id="diger">I'm the expanded content.</p>
</div>
</div>
<button id="Sorgula">Sorgula</button>
</div>
<script>
$(document).ready(function()
{
...
});
</script>
</body>
</html>
You can insert items from list like I did, or you can just write it as inside the each function.
The find call at the end is just to close them when it ends.
$.each(list, function(index, value) {
$("#container").append('<div data-role="collapsible" data-iconpos="right" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child ui-last-child">'+
'<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">'+value.name+
'<ul data-role="listview">'+some_li_list+'</ul>'+
'</div>');
});
$('#container').find('div[data-role=collapsible]').collapsible();
I am using mobile Jquery, phonegap to develop a mobile application.
Upon selectioin of item, I am generating a new dynamic page;
with data-role="page" and id="bar"
So my code becomes like this.
<script type="text/javascript" >
function showCategory( urlObj, options )
{
var alphaName = urlObj.hash.replace( /.*aplha=/, "" ),
var $page = $('<div data-role="page" id="bar">
<div data-role="content"> <a href="#bar?aplha='+previous+'>'+previous+'</a>
<img src="img/alphabets/'+alphaName+'.png" onclick="playAudio('+alphaName+')" />
'+next+'
</div> <div data-role="footer" data-position= "fixed"> <h4>
Back to Categories</h4> </div> </div>');
}
</script>
I have tried almost everything to get the alert on alphaName on onclick=playAudio but all in vian. I know the problem is in giving qoutes, but somewhow I cannot figure the right way.
If anyone could help please
Try "on" bind method
As of Jquery 1.7+ the better approach is to use on method.
$(document).on('click', 'img', function ()
{
alert('image is clicked')
});
Thanks
AB
I am trying to make a JSONP call in my PhoneGap application. It works fine in my desktop browser, but not in the device. I thought it might be an issue with the jQuery Mobile, so I even tried disabling it, but doesn't help.
Android version: 3.0
This is my code:
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.0.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script src="cordova-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function cancelclicked() {
window.location.href="index.html";
}
function jsonp_call()
{
// The call request here
}
function parseRequest(response)
{
// Parse the response here
}
</script>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="b">
<h1>Login</h1>
</div>
<div data-role="content">
<div class="content-primary">
<div data-role="fieldcontain">
<label for="name">Username:</label>
<input type="text" id="uname" />
</div>
<div data-role="fieldcontain">
<label for="name">Password:</label>
<input type="password" name="name" id="pass" />
</div>
<div data-role="fieldcontain">
<label for="name" id="invalidlogin"></label>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<button type="submit" onclick="return jsonp_call()" data-theme="e" rel="external">Login</button>
<!--</form>-->
<button type="submit" onclick="cancelclicked()" data-theme="d">Cancel</button>
</fieldset>
</div>
</div>
</div>
What am I missing here? It works fine on a browser, so I'm quite sure that the JSONP code is correct. It fails on the emulator and the device as well.
Did you add the domain name into the Cordova config file? It is under res/xml/config.xml
<access origin="bla.bla.domain.com" />
For me the access origin setting was already set.
But still i got the problem.
It turns out to be a couple of missing closing HTML tags.
(in my case closing A HREF tags )
When i only changed this, it was working again on Android.
Chome automatically fixed the missing closing tags.
Quite a headache, because i had no problems during testing in my webbrowser, and i thought it had to do with the jsonp implementation, or security/signing issues.
I am creating a Phonegap/Jquery Mobile App in Android using a WebViewClient and when user clicks on the button I want to show a spinner while I load a JNI/javascript function. However I am unable to do so with the code below.
NOTE: If I remove the call to the JNI/Javascript function then the spinner showed up as expected. Helper is a java class that is registered from DroidGap onCreate() method as appView.addJavascriptInterface(helperObject, "Helper");
Also if copy pasted as .html and browsed through browser will work (offcourse I am not calling the JNI/Javascript function that time as well) meaning it shows the spinner provided I have a sleep() time. However when I am using Android it doesn't show. The index.html is in assets/www folder.
<head>
<title>Employee Finder</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="http://fgnass.github.com/spin.js/spin.js"></script>
<!-- <script src="phonegap-1.3.0.js"></script> -->
<script>
$(document).ready(function() {
$('#findemp').click(function() {
var empNumber = $("#employeenumber").val();
showSpinner();
var empdetail = JSON.parse(window.Helper.getEmpDetails(empNumber));
//Above call takes 3-4 sec and is a JNI call meaning calling a java function.
hidespinner();
});
});
function showSpinner()
{
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var spinner = new Spinner(opts).spin();
$("#loading").append(spinner.el);
}
function hidespinner(){
$('.spinner').hide();
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Find Employee Data</h1>
</div>
<div data-role="content" id="searchDetails">
<input name="employeenumber" type="text" id="employeenumber" placeholder="Employee Number" min="13"/>
<input type="button" id="findemp" data-theme="b" value="Find Employee"/>
<div id="loading" ></div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" data-theme="b" data-add-back-btn="true" id="page2">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div id="empDetails">
<p><b>Name: </b></p><p id="name"></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Spin.js is ok, but if you're already using JQuery mobile, you're better off using the built-in spinner.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
in the header, and then:
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "please wait...";
$.mobile.showPageLoadingMsg();
shows the built-in jquery mobile spinner.
$.mobile.hidePageLoadingMsg();
hides the mobile spinner.
So using a timeout function seems to be sort of working. Its not a solution but at least I see the spinner for some time and then the function executed.
$('#findemp').click(function() {
showSpinner('#loading');
setTimeout(function() {
getempData();
hidespinner();}, 1000);
});
function getempData()
{
var empNumber = $("#employeenumber").val();
var empdetail = JSON.parse(window.Helper.getEmpDetails(empNumber));
//transition to a result page here
}