Hi In my android phonegap app,i have used jquery autocomplete feature.I need to get the keyvalue pair in autocomplete
Here is my example code:
var Person = [{"Prateek":"hello"},{"James":"android"}];
$(".searchbox").autocomplete(Person);
When i type 'j' in the textbox i need to get android instead of james in the autocomplete textbox.But i am getting error and result is not shown in textbox.And i am using autocomplete js which can be used also in asp.net
Please guide me where i am wrong.Thanks In Advance
make sure you have the following links, the ordering does matter
<link rel="stylesheet" type="text/css" href="jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-ui-1.9.2.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>
then use autocomplete like this
$(".searchbox").autocomplete(source: Person)
jquery ui can be download here http://jqueryui.com/download/
EDIT:
you can also look at listviews at jquery mobile docs
Related
I want to enable touch input in fullCalendar and make a fullcalendar website to work in Android ADB and localhost as well. I can access my site in ADB and in localhost, but I can't touch in calendar boxes in android ADB.
I try to include in site header the jQuery UI Touch Punch (punch.js), without success.
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/punch.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css.map">
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<link rel="stylesheet" type="text/css" href="css/fullcalendar.print.css" media="print">
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/fullcalendar.js"></script>
<script type="text/javascript" src="js/script.js"></script>
The script.js contains my calendar and i declare it that way:
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
defaultView: 'month',
editable: true,
selectable: true,
allDaySlot: false,
displayEventTime: true,
slotDuration: '03:00:00',
contentHeight: 'auto',
Then I use functions like:
eventClick: function (event, jsEvent, view) {
endtime = $.fullCalendar.moment(event.end).format('h:mm');
starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
var mywhen = starttime + ' - ' + endtime;
$('#modalTitle').html(event.title);
$('#modalWhen').text(mywhen);
$('#eventID').val(event.id);
$('#calendarModal').modal();
},
I also use Bootstrap style in HTML Declaration:
<div class ="row">
<!-- add calander in this div -->
<div class="container">
<div id="calendar">
</div>
</div>
</div>
In PC Web browser this work as expected, but in android web browser won't react when I touch on calendar event boxes.
Is there any way to make my site to recognize touch on the calendar event boxes?
UPDATE: Drag And Drop Works when I update to latest chrome version in Android 7.0 ADB, but the event clicks and click on blank boxes to add events not work.
To trigger the "select" callback (in order to select an empty space), you must press down on the empty slot on the calendar for 1 second, not just tap. You can adjust the selectLongPressDelay setting if you want to alter that, e.g.
selectLongPressDelay: 25
Meanwhile, eventClick should just work on touch devices without any further adjustment. Here is a demo which illustrates that.
See https://fullcalendar.io/docs/touch for more details.
in an empty HTML page,i try to display a banner including the link of my app
I used this as tutorial:
http://www.dunnsolutions.com/content/application-development-blog/-/blogs/smart-app-banners-for-ios-and-android
For the moment, i just try to make it work locally, in an empty page. This is my page:
<html>
<head>
<title>Hulu Plus</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="Hulu LLC">
<meta name="google-play-app" content="app-id=MyAppIdIsHere">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function () {
$.smartbanner({
title: 'Audience Opinion',
author: 'Dunn Solutions Group'
});
})
</script>
</head>
<body>
</body>
</html>
My html page and the js/css files are located in the same folder. there is no problem of path.
Does anyone know why this code does not work ?
Thanks in advance!
The default option is to only display the bar on a either an Android or iOS device. If you open the page on a desktop, nothing appears. You can set the 'force' option to 'windows' in order to have it appear on your desktop.
$(function () { $.smartbanner({ daysHidden: 0, daysReminder: 0, title:'Hulu', force:'windows' }) })
All of the other options can be found on the github page: https://github.com/jasny/jquery.smartbanner
I spend quite some time everyday on stackoverflow. This place is really great!
But this is my very first question, so every advice about it is very welcome :)
I'm working on a mobile app using phonegap. I use less css and it works fine on my nexus 5, but I have an error related to less on my old htc desire under android 2.2 :
undefined_methodError: Object function(a,b){return b instanceof
Array?a=this.flatten(b,a):a.push(b),a} has no method 'bind'
in index.less on line null, column 0:
1 // Constants
The last line is the first line in my index.css file.
I've been looking on google and here for two days and I don't find anything.
Here is my index.html code:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet/less" type="text/css" href="app/index.less" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="lib/async.js"></script>
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="lib/handlebars.js"></script>
<script>
less = {
log_level: 1
}
</script>
<script type="text/javascript" src="lib/less-1.5.0.min.js"></script>
<title>Kwali.to</title>
</head>
<body>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>
I need to "compile" the less code on the client because I have many sizes that are dependent to the screen resolution.
I really have no idea how to solve this and I hope it's not just a matter of incompatibility with my too old android...
How to solve this? What can I do to make my code work? Any help will be appreciated :)
Thank you guys!
See "Less Browser Support". I.e. Less requires an ES-5 compatible JavaScript environment to run in. You can use es5-shim polyfill which will add the JavaScript features that Less requires.
When trying to use jqplot in my Android PhoneGap application I get this error:
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'jqplot' at file:
The graph is supposed to show after pressing a button.
I have exactly the same code running properly on a webpage in Chrome, which shows that the code is correct.
The link below has the same problem but nobody has answered it, so I thought i'd see if anyone has since found a work around.
How to plot jqplot chart inside phonegap app for Android
Includes:
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
<script type="text/javascript" src="jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/jqplot.canvasTextRenderer.js"></script>
jqplot code:
function makegraph() {
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
}
HTML:
<div id="chartdiv" style="height:400px;width:300px; "></div>
Thanks
Found the answer:
put data-ajax="false" in the href tag to force a page reload and the jqplot script will be loaded.
Otherwise put the jqplot script and css files after the data-role="page" tag and the script will be loaded each page transition.
I have a web app for quiz and I have converted into Android app using phonegap but the problem I have is that the app takes 1-2 minutes to load which I think is because of the javascript and css being loaded. The JS and CSS files used in my quiz app are:
<link rel="stylesheet" href="css/jQueryMobilemin.css" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jQueryMobilemin.js"></script>
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/slickQuiz.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/master.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/slickQuiz-config.js"></script>
<script src="js/slickQuiz.js"></script>
<script src="js/master.js"></script>
Is there any solution by which I can reduce the loading time of my app. I read that async JS load is better but will it help in the final android app