Issue regarding html 5 input tag date on jeally beans os.
I am using jQuery mobile 1.2.0-rc.2. In many pages and popup i am using html 5 tag date and time its working well on all version when i run application on android jelly bean 4.1 or greater (OS) the date picker is not working it can stuck my app .what is the issue for that can any one help me.
Applying theme to all page elements
Hello, Using this simple code: <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" data-theme="b"> <div data-role="header">
jQuery Mobile Event problem (code not being executed)
Hi everybody... I am testing Andy Matthews' autocomplete and it works only if I reload the page. I've taken the code from his examples: http://andymatthews.net/code/autocomplete/callback.html Here's the code: <script> $("#mainPage").bind("pageshow", function(e) { var data = ['C', 'Clojure', 'Java', 'Scala', 'Objective-C', 'C++', 'PHP', 'C#', '(Visual) Basic', 'Python', 'Perl', 'JavaScript', 'Ruby', 'Visual Basic .NET', 'Transact-SQL', 'Lisp', 'Pascal', 'Bash', 'PL/SQL', 'Delphi/Object Pascal', 'Ada',
Autocomplete with ajax works, but no with local data.
Hi everyone! I've decided to use local data instead of bring the data through ajax for the autocomplete because is to slow to do it that way. Using ajax all works properly, slow but works, but If I try to use a .js file with all my strings it doesn't work, here the example working: <script> $("#inicio").on("pageshow", function(e) { var sugList = $("#suggestions"); $("#searchField").on("input", function(e) { var text = $(this).val(); if(text.length < 1) { sugList.html("");
Javascript does not run on android and ripple emulator
i have this script i've include on my page from source which work perfectly in browswers but fails to work on android emulator: $(window).load(function(){ var url = window.location.search.substring(1); $('#mydiv').load('real_news.asp?'+url); }); and this is my html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.3.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
Converting .live to .on
Hi, I implemented some sample code that uses jqm to swipe navigate between pages. It was working fine, then I read an article that said .live was deprecated, and to use .on instead. Below is my attempt, but it isn't working. Can somebody tell me what I did wrong in my implementation? [code] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Multi-page template</title> <!--link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css"
Dynamic listview
hi, i have the following code: <script type="text/javascript"> $(function() { $("#text-ricerca").keyup(function(event) { if (event.keyCode == 13) { $.ajax({ url : 'ricerca.clienti.php', type : "POST", data : "id=" + $('#text-ricerca').val(), success : function(response) {
Change default font, remove text shadow and box shadow throughout
Is there any straight forward way of changing the default font, removing all text shadows and removing the box shadow throughout all elements on JQM rather than having to go through each one and change it. I noticed on a few other threads that it was said you can add * { text-shadow:none } But I've tried that and it doesn't do anything?!
Header button to do something else
I'm wanting to use the following code, so that when the header data button is clicked it shows a div in the main content area. Clicking it again will close that div. Not sure how to do this so that it works, due to the way that the head buttons seemingly function in JQM. Sorry if this a silly and obvious question! <div data-theme="a" data-role="header"><div data-type="horizontal" data-role="controlgroup" class="ui-btn-left" > <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
Displaying page details fails to load in emulator
i'm trying to this details of a headline when a link is click. it works perfectly in the browser but fails to load in ripple emulator. here's my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.3.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body,td,th { font-family: Tahoma, Geneva, sans-serif;
Problem in displaying Google map in jquery tab.
Hi, i am using jquery mobile . i have 4 jquery tabs. In the last tab i am displaying google map. For the first click it is showing correctly and it is taking full width whatever i mentioned,but when i click second time it is showing only a part of the map. Even i used resize() option in google map. so anybody can help me out to get out of this problem. <link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
jquery mobile popup is not working in blackberry z10 device.
Hi , I am using jquery mogile 1.3. i have to display the map in pop up. so i have written the code like.. <link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script> <div data-role="page" id="booknowpage" data-theme="a"> <div data-role="header"> <div data-role="content" style="padding: 0 15px;"> <div data-role="popup" id="popupMap"
is there a way to align the icon to the left in a listview?
is there a way to align the icon to the left in a listview? I have tried data-iconpos="left" but it does not work. would appreciate any assistance.
need to cut down load time of a booking system with JQM and ajax disabled
Hi, I'm trying to mobilise a hotels web booking site. I've got everything working although i had to disable the mobile ajax to do so. I had to do this as our site keeps a session id within the url bar and uses it every time you navigate to a new page to retrieve relevant information, whether a member logged in or just the current details. However with this disabled the load time between pages is about 20 seconds longer than if I wasn't using JQM at all. From what I've read, with the ajax disabled,
JQuery callback functions fired before event
I don't know if I am doing some silly mistake here but facing this problem of firing callback functions on page init before actual event happens. Here is the code $(document).on("pageinit",function(){ $("#discInvitePopUp").popup({ transition: "slidedown", history: false, afterclose: function( event, ui ) { activeDiscInviteCloseHandler(); }, afteropen: function( event, ui ) { openDiscFrmInvite();
Themeroller theme doesn't seem to work properly?
Hi all, I've just attempted to use the themeroller for the first time, but it doesn't seem to render a few things correctly. Here is the theme > Click here Notice the background is not black, and also the collapsibles (Click 'Gallery' and 'Shop') don't seem to show properly and aren't coloured/styled. Is there something obvious that I've missed? The header, footer and top menu buttons seem fine... Using latest jqery mobile. Here's a link to check > Clicky here Here's my header code. EDIT: Ah, think
Correct way to manipulate elements/widgets via JS
Hi, we have many elements on our pages e.g. <li> etc and are using jqms css classes to render them as lists etc. However if we want to change a value with in a list (or other jqm widgets) via javascript (NOT via server call), what is the correct way to change values of the generated jqm elements ? i.e. without having to do lots of nasty stuff like .attr().siblings() etc which aswell as being complex would no doubt make or app unupgradable to new versions of jqm if jqm changed the dom structure of
Panel and the scrolling problem
This is my code with jquery mobile <div data-role="content"> <ul data-role="listview"> <li><a href="#panel-nav1">Subject 1</a></li> <li>Subject 2</li> .....a lot of </ul> </div> <div id="panel-nav1" data-role="panel" data-display="push" data-position="left" data-swipe-close="false"> <ul data-theme="d" data-icon="false" data-divider-theme="d" data-inset="false" data-filter="true" data-filter-placeholder="keywords" data-role="listview" style="overflow:scroll;" id="ulid1"> <li>Subject 2</li> .....a
Injecting JQM Pages on the fly and swiping through left & right.
Can anyone help me on how I can add extra JQM pages to my DOM on the fly and then use the swipe method on the newly injected pages to loop through them? To give you some idea I have created a fiddle: http://jsfiddle.net/a4poster/nMR85/1773/ - Hope this helps. Thanks, Lammie.
jquery mobile json listview - all the list loaded at one time
i have a problem with json parsing listview as all the list loaded at one time so take many time as its big so i hope to find a way that make it loaded as how a webpage loaded one by one here is the code i use $.getJSON(url1, function(json) { $('#blogList li').remove(); $.each(json.posts, function(i,dat) { output='<li data-icon="false">'; output += '<a href="singlePost.html?id=' + dat.id + '">'; output +='<div class="ui-li-aside">'; output+='<h3
Scroll only listview
Hi everyone, <div data-role="page" id="RecipelistPage" data-iscroll="enable" > <div class="line" id="line"></div> <div data-role="header" data-theme="a" data-position="fixed" id="RecipeListPageHeader" > <h1 id="RecipeListPageHeaderName">Recipes</h1> <a href="#" data-role="button" data-rel="popup" id="ButtonSync" data-iconpos="notext" data-theme="c" data-iconshadow="false"></a> <a href="#popupMenu" data-role="button" data-rel="popup" id="ButtonMenu" data-iconpos="notext" data-icon="gear" data-theme="c"
Spurious load errors in Rails production
In a large application built with Rails 4 I have been getting load errors in production but not development. When I check my production log there is no request received at the server. I have tried turning off data-ajax but the the resulting page will not load in Chrome. Does anybody have any ideas how to fix either of these errors? I have just changed my front menu page from a multi page to a single page and so far the error has not been repeated but may crop up elsewhere. Every time i load my app
Customizing navbar to different look and feel?
Is it possible to customize navbar as per their design requirement? I am looking to customize the jQuery mobile default navbar looks to different look & feel as per the design requirement. So, any help example would be appreciated.
Compatibility issues with Android - JQMobile 1.30
Hello, I have been working on this site lately as a student. http://www.spokanecounty.org/crimereport/ We are really trying to get as much compatibility as possible out of this site and have found only one problem set so far. These modern phones below are not working with Chromes Installed JellyBean Browser, although they are listed as a grade A experience. Droid Razr HD: Chrome Browser - 27.0.1453.90 (Most recent release to my understanding) Android JellyBean 4.1.2 Kernel Version 3.0.31 System Version
jQM and Google Visualization - PHP Issue
Doesn't matter what browser I use: I have created a Visualization Table for the sorting functionality. Upon initial page load, the DIV 'table_div' does not populate. If I reload the page, then everything works fine. Also if I right click on the link and say open in new tab, all the data loads successfully. I feel it has something to do with jQM caching the CDN files, but am not certain. I am hosted on Rackspace, so I don't feel that the server is taking to long to request the CDN versions of
Draggable with select list on android
Hi There After searching the web for hours, I finally made the decision to post my question. I'm using the jQuery draggable function to let the user drag and drop a <li> from a <DIV> to the another <DIV>. In the <li> is a select list, connected to PHP with ajax. Everything works fine on most Browsers, Windows, Mac, iPhone (thanks to jquery.ui.touch-punch.min.js). But I can't get it working on any android browser (I tried FF and built in browser). The select list can be clicked, but I can't chose
Issues reloading pages within navbar
Application Specs: ASP .NET, Jquery Mobile 1.3.1 When navigating between pages that utilize the data-role "navbar", I am having issues with page reloads. It seems to be loading the page out of the DOM and not firing any functions on page load. I have a page that contains an element that needs to be updated on page load but when transitioning between pages on the navbar and then back to the original page, the page load functions do not fire. However, accessing that same page via an ordinary button
Simple jquery code working sometimes when refreshing page
Guys I am really going totally crazy. I load a list with data coming from my database. I have decided to let the user change the year to he can see a detailed list regarding that year. As soon as I've thrown this new function my page started working random. One refresh it's working and the other not. I've understood that it was because the variable year (anno in Italian) was undefined so I've prepared a little code to define it if undefined. If I run this code sometimes it works and sometimes not.
Jquery Mobile Page reloading problem on user scale feature...
Hi, I'm making a mobile website and for some reason i have enabled user scale option. So by doing this i'm facing a problem, that when i scale the page on iPhone the page looks like, it reloading several times or may be blinking or something. Can any one tell me what is this problem and how can i fix it...? This is the link for that page... http://horizonwebsolutions.net/testing/test/3-hour-inclusive-cruise.html
Rangeslider rendering badly in some IE (JQueryMobile 1.3.1)
This very basic page: http://www.marianotomatis.it/test.php does not render correctly in "some" IE versions. <!DOCTYPE HTML> <html> <head><title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js"></script> </head> <body> <div id="A" name="A">
Text Input - Can be used as Notes in App?
Hi guys, I'm trying to build in a notes feature to my app using JQM. How can i make the notes stay on the device when the user comes out of the app? Cheers, Nat
executing specific javascript on specific pages
Hello and good morning everybody. I am developing a mobile version website with JQM 1.2.0, and I need to execute some specific javascript only on specific pages. My problem is: how do I get JQM to recognize which page it is on and so having it execute only the javascript specific to that page? In the desktop version I used a page template with a main div whose ID is "page" (literally): <div id="page" data-role="page"> ... main content, generated by PHP, accordingly to URL path ... </div> So, strategy
JQuery Mobile too too slow !!
Dear Friends, I am developing a Mobile template for my custom php based website using JQuery Mobile. After developing few pages, when I tested the system in my and my friend's Android Mobiles and Tabs, I realized that it is running hell slow. I mean, its running slower than the desktop version of the website !!! Sometime it loads, sometime it doesn't. Sometime the links open, Sometime doesn't. Sometime it gets stucked at the loading. http://98.130.200.34/ayan/mobile/dir/ (Open the site in real Mobile
Transition to large page
Hi. I have multipage template. I load data in it before any action can be performed and have a link with transition to page, which I already loaded to DOM, the page contains large listview. So, tested with tablet (Android 4.1), I get transition to page, containing listview, to take about 5, 6 seconds, which is not normal behavior, as I expect to not waste any time on navigation, why so I loaded all content at the beginning. What can improve the performance with transitions to large pages? is it bad
declaring and running universal functions with iScroll & JQM
I'm trying to initiate the iScroll function as a universal function so that way, what ever element that has the class of .scroll, the element will be effected by the iscroll plugin. Here's the script that I use to declare the iScroll $(document).delegate('#home','pageload', function(){ var myScroll; myScroll=new IScroll('.scroll' , { scrollbars: true, mouseWheel: true, interactiveScrollbars: true}); }); Now this works the first time I load a page with that element, but when I try to load the second
Does Jquery Mobile Load Entire Files to Each Client?
I am just looking at the file sizes of Jquery and Jquery Mobile both of them total around 450kb - so does each client load this "half Meg" on load of your webpage? or is the remote file called on functions incrementally? I am just wondering because of the speed and lag of mobile phones it might not even be all that practical to use..?
Attaching a change listener to a listview data-filter
I just started using JQM this week, and I want attach a input change listener to the data filter on a listview. I know there is a method to override the filter, but that is actually not what I am looking for. The filter is fine as it is. What I want to do is perform a search after the filter input hasn't change for ~1/2 second. I've implemented this in an ugly way by changing the filter so that it will search the data and return the results while preserving the filter functionality, but it's not
data-filter on li not formatting correctly question
I'm using the following to show results within a list search, but the formatting always seems to get ugly near the search field after searching. Anyone have any ideas on as to why its displaying like this? Any help would be greatly appreciated. <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search for an extension..." data-inset="true" data-theme="a"> <!--Phone Extension List --> <li><a href="tel:+00000000000,100">User One - 100</a></li>
Researchers say that over a third of iPhone apps still access a device’s unique identifier
Researchers say that over a third of iPhone apps still access a device’s unique identifier In 2011, Apple advised that iPhone and iPad apps should stop logging the unique identifiers of users’ devices, a practice that can be exploited to build up profiles for ad-targeting purposes. But a new study by researchers at the University of California, San Diego, suggests that many apps still do so. At the MobiSys conference in Taiwan this week, the researchers will present data gathered from 225,000 apps
Google Map vs Collapsible list
I want to use google map and list on two different tab. The real example is Here. The problem is: if you load the map page "map.php" first, The map can display correctly, but the listview will collapse after you dismiss the dialog window (which is wrong). If you load the listview page "error.php" first, the listview will keep open after you dismiss the dialog window (which is correct). But the map.php can not be loaded correctly. I post the full code below. Thanks a lot for the help. -------------------------
Next Page