panel malfunction
It might just be that I have my HTML setup incorrectly but... I am using jquery mobile 1.3.1, viewing my page in Chrome on windows, same issue with chrome on android 4.2 When I try to slide a panel with a button, I get an error that $el.data( page[0], "mobile-page" ) is undefined at line 10313. So I did a very little bit of poking around and console logging, and if I change line 10313 from var $theme = $el.data( page[0], "mobile-page" ).options.theme, to: var $theme = $el.data(); it seems to fix
Swapping out Video content on Click in a loop
hi guys, new to jqm and the forum. i have a simple app idea i'm trying to make work with jqm, i have a button which when tapped changes the content of a div with a video. they keep tapping to cycle through the videos. any ideas how to make this happen? is it even possibile with jqm? thanks in advance!! nat
Going Back More Than One Page.
Hi, is it possible to have a back button that will navigate back two pages instead of the usual one page. I only need this on one location. <a href="#" id="confirm_rep">Confirm Replacement</a>Thanks in advance, Lammie.
Loading spinner closes too soon
Hi Im trying to get the loading message to work with fetching data over JSONP, but i cant attach to the regular AJAX event, as that apparantly dosen't fire, when using JSONP. My problem is, if i Trigger the $.mobile.loading( "show") manually, it seems to end right when i hit the next function. Any ideas are very welcome. I'am doing the following in my code: $('#mybookings').live('pageshow',function(event){ showSpinner(); mybookings(); hideSpinner(); }); function showSpinner() { $.mobile.loading(
Show popup only when page itself receives a POST form submission on the server side?
This isn't strictly a jQueryMobile client side only app, but so far the problem appears to be on the jQueryMobile side. I debugged with developer tools (element explorer and network monitor) and it looks like the DOM gets updated correctly upon page POSTing back to itself and I see the correct intended HTTP response HTML sent back by the server. But page doesn't render with popup showing as desired upon form submission to itself. Form post back to itself done with PHP on the server side, manipulating
Panel Push Android
I'm using the latest JQM, 1.3.1 with the latest Cordova/Phonegap, jQuery 1.9.1. The new panel widget works great on IOS, but it doesn't push the content on Android, just overlays the header over the panel content. The fixed header content isn't pushed left like it's supposed to. Anybody else seeing this? I've tried all of the suggestions. Seeing this in the emulator and my Samsung Galaxy II.
Column toggle table : How to hide the 'Columns' button?
Column toggle table : How to hide the 'Columns' button? I am fine with additional columns showing up when the phone is in landscape mode. Is there a way to avoid the 'Columns' button? Thanks.
Newbie Alert ... Question regarding dialogs
Greetings, I am developing my first mobile website using jQuery Mobile. On my index page, I have a link to a calendar which I am opening in a dialog: <a href="#calendar" data-rel="dialog" data-transition="flip">Calendar</a> The code is located on the index page, enclosed in: <div data-role="page" id="calendar"> Yada, yada, yada </div> My problem is this: when the index page is first accessed, the calendar opens just fine. After that, it does not want to work. I'll click another
Getting the current page ID when a link/button is pressed.
Hi is it possible when a link is pressed to get the ID of the page the link is in? For example. <div data-role="page" id="lazy_summer"> <div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <a href="#page2" id="callEvent">Example</a> // When this link is clicked the page id (lazy_summer) is displayed before // The page transition. </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> I wish to return the the id="lazy_summer"; Thanks, Lammie.
need a grid plugin
Hi, I am looking for a jquery mobile grid for asp.net mvc4 platform(using Iphone emulator), which has features like column resizing, column hide/show, column drag/drop, setting column order on user preferences, multisorting, paging, filtering. I have looked for many grids on web but no one gives so many features. Does any one have any idea for such a grid? Thanks
Popup overlay on Android
I have a weird issue with the overlay for a popup on Android... I haven't had a chance to test this on iOS but I have a simple page with a left navigation panel, a header, and content. On the header I have a button to open the panel and a button to load a popup. Everything works but when I open the popup, the overlay has a large square in the upper-left corner of the window... the rest of the content fades as normal using the overlay. Does this have something to do with my panel or am I just not
Loading details on the index page
I'm developing an app in which I load all the pages in the index.html using jQuery. On the loaded pages, there is one particular page which comes along with links which when clicked takes you to another page to give you details about the link you clicked. Now I want to be able to load the details of the clicked link into a particular div in the index.html called news_details. How do I do that? This is the code I'm using for the links: <a href="index.html#news_details?<%= Server.HTMLEncode(MM_keepURL)
No real header for programmatically popup?
Hello, I want to programmatically open a popup but the header isn't shown properly, i.e. not centered and not with background: $("<div data-role='popup' data-overlay-theme='b' data-theme='c' class='ui-corner-all'><div data-role='header''><h3>My header</h3></div><div data-role='content' data-theme= 'd' class='ui-corner-bottom ui-content'>My Text</div></div>") .popup() .popup("open"); If I open an existing popup with header with .popup("open"); it will be shown but if I change it with $().html()
jQuery Mobile "latest" CDN not displaying header/footers right
Given a simple page with a header and footer, if you use these CDNs: <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> Then they do not display a dark background. I discovered that the 'latest' branch is pointing to 1.4pre. Is it the expectation that "latest" will equal something not release, ie Alpha/RC/etc,
jcarousel - adding swipe function for mobile
Hi everyone, I built my website 3 years ago, the portfolio gallery is built with jcarousel. I'm trying to find a fairly quick solution to build in the swipe functionality for mobile users. I just cannot find a solution that works anywhere. Sure there are a quite a few links when I do some Google searches but I've tried most of these ideas and none of them work. None of them create a swipe ability but they also disable other jQuery functionality on the page. My website is http://www.lemmondesign.co.uk
Injected html doesn't get jquery mobile CSS style applied
with reference to http://stuartmcintosh.com/test/index2.html http://stuartmcintosh.com/test/myJavascript.js http://stuartmcintosh.com/video_links_body.html versions used: http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css http://code.jquery.com/jquery-1.10.0.min.js http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js my basic html5 page is able to display a listview with the proper style, but if I try to load some html from a file using pagebeforechange to intercept the click
click on listview item
i searched lots of pages but could not get this simple question answered: How can i handle a click on a listview item? I have this listview: <ul id="menu" data-role="listview"> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> <li><a href="#">link4</a></li> <li><a href="#">link5</a></li> </ul> tried this function to handle my click: $("#menu").click(function () { alert("click"); }); my test-alert is not showing when clicking
Best way to create a single, app-wide panel
Hi all, I want to have an app-wide panel. However, the current framework does not allow this structure right now. Currently I was trying to do it by creating the fixed contents of the panel in one dedicated page, then load it on each panel programatically. I do not intend to have an overly large feature set, so I want to keep my HTML on a single file. My first attempt was to try to load the contents of another page in the panel using $.mobile.loadPage('#mainmenu',{pageContainer:$("#homepanel")});
Not strictly JQM but here goes.
Hi, this isn't strictly JQM but I read this forum a lot and have picked up some great tips etc, so here goes. ad=new Array(3); ad[0]=new Array(3); ad[0][0]=new Object(); ad[0][0].name="paul"; ad[0][1]=new Object(); ad[0][1].name="jones"; ad[0][2]=new Object(); ad[0][2].name="smith"; // How would I get the index of the name 'jones'? In this case 1 Thanks in advance.
jquery mobile's a href "performance" question
I have a jquery mobile's page，the code below <div data-role="page"> <script type="text/javascript"> $(function() { $('a#fastclick').on(clickEvent, function(e) { alert($(this).attr("href")); }); }); </script> <ul data-role="listview"> <a href="Device.html" id="fastclick">Device</a> <li><a href="Device.html" id="fastclick">Device</a></li> </ul> </div> When I put a href link outside the li(The red font)，the alert window when I clicked almost immediately pops! But when I put a href link placed within
jQuery Mobile Image Carousel not caching images
Hi, I am building a jQuery Mobile Responsive Portfolio website. It's all working fine apart from each time visiting the image gallery page and back to home page, all the images are reloading each time. The page is set to data-dom-cache="false" which is perhaps why. But, when i set the pages to data-dom-cache="true" the scripts for the image galleries no longer work. You can see it here: http://www.lb-digital.com/jqm/ How do I get the images to stop reloading each time the page is visited, and for
IE10: popup("close") causes the current page to be reloaded in the browser when using the FB Like widget.
Hi, IE10: popup("close"), or closing a popup in general using the GUI, causes the current page to be reloaded in the browser when using Facebook Like widget. Versions: JQM V1.3.1 JQ V1.9.1 A narrowed down Test page: http://www.videogamesvalley.com/tmp20130711/ie10.html Steps for IE10: 1. Open this url in the IE10 browser : http://www.videogamesvalley.com/tmp20130711/ie10.html 2. Click the anchor to goto ie10-page2.html 3. The page's popup opens automatically (okay). Now Click on the Close
jQuery Mobile script in not loaded in page (facelets jsf 2 - Android 3.2.6)
Hi, I have a page that use JSF 2 and I'm loading the JQM script with: <h:outputScript name="mobile-ui/jquery.mobile-1.3.1.min.js" library="js"/> Generally it works well but I was noticed that the script is not loaded on Android 3.2.6 mobile ZTE device. How can be solved this? Any hint?
Jumping fixed header after closing dialog (firefox)
i have a problem, you can see that here (with firefox) : http://fiddle.jshell.net/ckuskun/6rZxG/2/show/light/ when click to "open" link, a dialog is opening. after closing this dialog, fixed header is jumping to the top. how can i fix this problem
jquery mobile table reflow refresh issue(bug)
Hi i am trying to dynamically updating table reflow contents using demo given in link but it is behaving in weird manner . it is adding data to prevoius label like in this image (in mobile view only) anybody please check it and if anybody have tried this successfully share your experience
Using jQuery Mobile to build screens for ALL clients
Hi I know this has been asked before (and it was intimated that this would converge with jQueryUI) but can I reasonably build all my screens using this technology - for iPhones, iPads, desktop PCs, Surface etc? Thanks Michael
BRANCHES AS LINK TO MAP
DATA LINK NEED SOME BRANCHES WITH GOOGLE MAP TO TOUCH ME TO SHOW THE TIMES OF OPERATION OF THAT BRANCH
data-filter="true" checkboxes ?
Hi, Has anyone worked with filter within a group of checkboxes: <form> <fieldset data-role="controlgroup"> <legend>Vertical:</legend> <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a"> <label for="checkbox-v-2a">One</label> <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b"> <label for="checkbox-v-2b">Two</label> <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c"> <label for="checkbox-v-2c">Three</label>
Insertar html - Insert html string. I'm doing wrong?
¿Qué estoy haciendo mal? - I'm doing wrong? <head> ... <script language="javascript"> $(document).ready(function(){ var i=1; while (i<=10) { $("#news").html("<div id=n" + i + " data-role=page><div id=article" + i + "></div></div>"); i++; } }); </script> .... </head> <body> <article id="news"></article> </body>
Problem hide and show data-role = "page"
Hi! I have a problem I can not solve for several days. I have an application where I use jquery mobile. The problem is I'm trying to hide a data-role = "page" and display another, but when I show the other does not work jquery mobile (styles). Demo of my application: http://www.creanet.com.ar/jquery/index_limpio.html (please click on m1 or m2 and looks like the header disappears and does not work eg the data-role = "collapsible") My code: <html>
<head>
<title>Catálogo Messier</title>
<meta http-equiv="Content-Type"
Freeze header row of large table jQmobile
I see some plugins for this but they are for the desktop. I need a solution for mobile. My table is built using ajax and the header row is in a thead. How to arrange this? John
Change button color on current date
I would like to make something like my little jquery mobile calendar, and the first button should be highlighted with different color with today's date, tomorrow it will be the second button, and so on http://jsfiddle.net/rizardni/dbNVD/
VCLICK event (or touch) does not work with fieldset
Hello, I have a problem, here is my code: d.sorter = $(list).closest(":jqmData(role='page')").find(".listview-sorter"); d.sorter.delegate(".ui-radio", "vclick", function(t) { // DO STH... }); But it does not work, event is never fired... Same comes with "touch" event, only "click" event works, which is not enough for me since I develop it for mobile. I can't bind events to .ui-radio elements directly since they are not yet initialized (returns length 0). Any idea how to make it work?
Java Restful web service and jQuery mobile
I am new mobile application developer. I am currently working on a project where I want develop a mobile web app using jQuery mobile and Java which I will later convert to a native android application using PhoneGap. I currently develop Java Restful web service using JERSEY JAX-RS which allow my html page to communicate with my database. But when I change my html page to jQuery mobile page, it is not working. Please! can any help me with a tutorial that shows how Java Restful web service works with
Posts to Pages
Hello Everyone, currently I have Jquery Mobile bringing in posts instead of pages. I want to change that around and I changed the code, but was getting an error. Below is a sample of what I have in my index.php file <?php get_header(); ?> <?php include('searchform.php'); ?> <ul data-role="listview" data-inset="true" data-theme="e" data-dividertheme="d"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><br /><?php
Nearing completion - just a few queries.
Hi, at last I am nearing completion of my first app but I have a couple of loose ends to tie before showcasing to a greater audience! My first is how do i remove the active state of a link once it is clicked on: <div data-role="navbar" class="ui-navbar-custom"> <ul> <li><a href="#home" data-icon="custom" data-transition="slide">home</a></li> <li><a href="#away" data-icon="custom" data-transition="slide">away</a></li> <li><a href="#near" data-icon="custom" data-transition="slide">near</a></li>
Is it possible to use 'swipe' between content only and not pages.
Hi, I want to use the swipe (both left and right) so the end user can swipe between content not pages. Like a carousel effect with a slide transition. I can get it to work with pages by navigating to the next and previous but this is not what I really want. I want to keep the header and footer in place and navigate to display the next content - something similar to this: http://jsfiddle.net/a4poster/m6www/4/ Any help would be really appreciated. Thanks, Lammie.
Reloading the the data-role="page" after the json data is retrieved
Hi, I am using a JSON service to which I pass parameters like country="USA" and then it sends me the data in the JSON format. The result is great and I then append it to listview within a new page and then use the changepage("") function and show the results. This works fine but when I again go back and type say country="France" the results are still the same old one.. NOTE: Also URL//index.html#page2 is where i give the parameters to the which are used which calling the json service and then I show
1.3.1 - "Panel" data-display="push" not "pushing"
As the subject line says, the "push" is not changing the way it opens. It always uses the default. I know I must be doing something really, really dumb here but I cannot see it. here's a very simplified jsfiddle: http://jsfiddle.net/kmFxj/ EDIT: Of course a few minutes of doing something else gave me the answer: a data-role="content" is required to get the push to happen. Here's an updated fiddle: http://jsfiddle.net/R3BDj/
Expand collapsible div on validation
I have six JQM divs on the page that look like this: <div class="myDiv" name="accordion" data-role="collapsible"> the first div collapsible is set to false (data-collapsed="false") On validation I want to expand the next closest div. In my script I’m looking for the label with the class.error and getting the index of the closest div. My alert shows the myindex which displays the right number of the next error array however I can’t get the div with the next error to expand. I was trying to trigger
Next Page