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
Related
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>
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 multiple pages in my one html file.
I trying to implement the pageinit event handler on the second data-role="page".
So I declared pageinit inside it's specific data-role="page".
<div data-role="page" id="foo3" data-dom-cache="false">
<script>
$(document).on('pageinit','#foo3' , function(){
abcsong_file_path = '/android_asset/www/audio/abcsong.mp3';
my_abc = new Media(abcsong_file_path);
my_abc.play();
var i =0;
var time;
function my_loop(){
setTimeout(function (){
var my_alphabets = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
$('#content_loop2').append('<img src="img/alphabets/'+my_alphabets[i]+'.png" />');
i++;
time = 700;
if(i<26)
{
my_loop();
}
}, time)
}
my_loop();
});
</script>
<div data-role="header" data-theme="b">
</div>
<div data-role="content" >
<div id="content_loop2" data-inset="true">
</div>
</div>
<div data-role="footer" >
</div>
</div>
What I expected was that it would initialize everytime I visit this page. But it runs correctly only the first time I open it. Every other time it just show the output of previously executed code.
Please help me how to go about it.
Pageinit should run only once, it was made to be just like document ready.
If you want your code to run every time page is visited then use pageshow or pagebeforeshow.
Read more about it here.
Pageinit should fire only once, according to the docs, but at least in previous versions that was not the actual truth.
I am currently using jQM 1.3.2 and no longer experiencing this problem on Android or in desktop browser. Pay attention to it though, especially if you are also using Phonegap.
Document pageinit fires more than once on iOS (jQueryMobile)
I am new to web dev and android and am trying to develop a web app with phone gap and also using jquery mobile for that.
I am trying to view and display my webpage within the mobile screen with headers and footers also added through jquery code.
The code which i have written to display the webpage does display for eg http://www.msn.com but when i give for eg http://46.137.... (obviously thats a incomplete address) it does not work . Bytheway the alert is shown in both the cases. Below is the code
<div id="cnt" data-role="content">
<script>
$("#cnt").load("http://46.137....", function() {
alert('Load was performed.');
});
</script>
<!-- <iframe src="http://46.137...."></iframe> -->
</div><!-- /content -->
Hey #LivingThing try like this,
...
<div id="video1" data-role="content">
<iframe id="cnt" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
...
<script>
function l() {
document.getElementById('cnt').src = "http://www.cnn.com/US/index.html"
}
$(window).load(function() {
l()
alert('Load was performed.');
});
</script>
All this into <div data-role="page">
I hope this helps. :)
I'm developing an app for Android using Phonegap and JQuery. One of the tasks is to dynamically add some content to the list. In the first time, when I add a first element and call .listview() everything seems to be fine, but when I add some content, its styles doesn't work properly, and listview('refresh') and other commands don't help at all. I'm using jquery mobile 1.0a1. Here is the code for two buttons:
$("#nextDay").click(function(){
$("#SheduleList").append('<li><h3 class="ui-li-heading">ololo1</h3></li>');
$('#SheduleList').listview('refresh');
});
$("#prevDay").click(function(){
$("#SheduleList").append('<li><h3 class="ui-li-heading">ololo</h3></li>');
$("#SheduleList").listview();
});
The first Button is "prevButton". Here is some HTML:
<body onload="init();">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Расписание группы 04-322</h1>
<h1 id=hday>День недели</h1>
</div>
<div data-role="content" data-theme="b">
<ul id="SheduleList">
</ul>
<button id="nextDay">Следующий день</button>
<button id="prevDay">Предыдущий день</button>
</div>
</div>
</body>
You are not alone.
This seems to work the best for me:
refresh = function (selector)
{
try
{
//this may throw an exception:
// call methods on listview prior to initialization; attempted to call method 'refresh'
$(selector).listview('refresh');
}
catch (e)
{
}
}
refresh("#SheduleList");
Add data-role="listview" in your <ul> in HTML.
<ul id="SheduleList" data-role="listview" data-inset="true"></ul>