Response title
This is preview!
- Screen name: cfjedimaster
- Blog:
cfjedimaster's Profile
17 Posts
23 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- This is truly odd. I've got an index.html file that uses a pageshow event to register a button handler:$("#mainPage").live("pageshow",function(event) {console.log("pageshow for mainPage");$("#submitButton").one("touchend",function(e) {This is used to handle login logic. When I run my app, this works perfectly one time. I only return to this page when I logout. I can confirm that when I return that the pageshow log shows up. But the submit button handler isn't registered. I can even doconsole.dir($("#submitButton"))just to confirm it is still in the DOM, and it definitely is. But it is like the one() refuses to register the event. Btw, I tried one() because I thought maybe my on() was registering the event twice.
- I've got what I think is a simple requirement. The first page of my JQM app is a login page. The second, and so on, are my 'real' pages. I'm trying to prevent the user from hitting the Back button so much they end up on the login page.According to the docs, pagebeforechange can be used to prevent navigation to another page. I've been able to confirm this. No big surprise there. But when I prevent the navigation, the URL in the browser still changes. Hitting back again performs another back and the user is sent to the initial page.You can see this here:Click to load page 2. Click back. Notice you DON'T go back visually, but the URL changes. Click back again and you are out of the site. Just view source on index.html for the code I'm using - you can see it at the bottom.
- 07-Jan-2012 12:36 AM
- Forum: Developing jQuery Mobile
I've got a JQM page that does an Ajax call to get a list of classes. I take that data and render a dynamic list. Each LI links toclass.html?id=Xwhere X is a unique ID. The pageshow handler that page parses window.location.search (the query string). This works on the desktop. It works in PhoneGap on the Android emulator. But it fails on a real device (again, wrapped in PhoneGap). Any ideas?- I've got two questions about dynamic checkboxes. My page has a div with a controlgroup role and an empty fieldset.
- <div data-role='fieldcontain' id="toFieldWrap" >
- <fieldset data-role='controlgroup' id="toField">
- </fieldset>
- </div>
- $("input[type='checkbox']").checkboxradio();
That worked, but each checkbox was it's own unit - as seen in the screen shot here:Obviously the red was added later. I was able to get around this by calling .page() on the fieldset:- $("#toFieldWrap").page();
That worked... kinda (see next issue), but where is .page() officially documented?The next issue is that calling page added a bgcolor to the fieldset that stretched below the actual content. See below - and hopefully it isn't too subtle to see.Any ideas?- 07-Dec-2011 06:03 PM
- Forum: jQuery Mobile
The docs for dialogs mention..."data-close-btn-text"as a way to configure the text for the close button. But dialogs do not have text on the close button, instead it simply has a "X" icon you can click to close it. Now that does have a tooltip which says close, but as that is useless on a mobile device, what exactly is this feature used for?- 31-Oct-2011 03:59 PM
- Forum: jQuery Mobile
On this page, http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-headers.html, the use of data-position="inline" for headers is used but not documented. What is the purpose of the attribute when used in this context?- I'm working on a demo involving PhoneGap and I wrote the following block for a page to handle demoing various events. Notice I trap the back button:$("#eventpage").live("pagecreate", function(event) {var page = this;backbuttonFunction = function(){$("#status",page).append("Back button clicked.<br/>");alert('confirm');}menubuttonFunction = function(){$("#status",page).append("Menu button clicked.<br/>");}searchbuttonFunction = function(){$("#status",page).append("Search button clicked.<br/>");}pauseFunction = function(){$("#status",page).append("Pause event.<br/>");}resumeFunction = function(){$("#status",page).append("Resume event.<br/>");}offlineFunction = function(){$("#status",page).append("Offline event.<br/>");}onlineFunction = function(){$("#status",page).append("Online event.<br/>");}document.addEventListener("backbutton", backbuttonFunction, false);document.addEventListener("menubutton", menubuttonFunction, false);document.addEventListener("searchbutton", searchbuttonFunction, false);document.addEventListener("pause", pauseFunction, false);document.addEventListener("resume", resumeFunction, false);document.addEventListener("offline", offlineFunction, false);document.addEventListener("online", onlineFunction, false);});The page linked with this code uses a back button in the header so folks can leave the page. But, when they go to other pages, they can't use the back button. So I figured - just listen for the pageremove event and remove the event listener.$("#eventpage").live("pageremove", function(event) {alert("testing");document.removeEventListener("backbutton",backbuttonFunction,false);});This is not working. It's like pageremove never executes.
- 26-Sep-2011 04:14 PM
- Forum: jQuery Mobile
In earlier builds of JQM, my site would have an index.html page that included jQuery+JQM. When I linked to other pages, I could simply use the div page wrapper and be done with it. Since the URL always included index.html, if you book marked so sub page, you still got a proper display.Now that pushState is used to update the URL in the browser. I found that if I went to some sub page, bookmarked the url, and returned, I'd get an unstyled display. That kinda makes sense - but I'm wondering now if the "best practice" is to always include the full header? Actually I'm not sure I'd call it a "best practice" - it would be required.- I could probably test this quicker than I can write the question, but if page A has a link to page B and uses data-prefetch, and page B has N more links like that, will they also be prefetched? Or are they only loaded when B itself is actually rendered. I'm assuming so - but I want to be sure.
- 12-Jul-2011 09:40 PM
- Forum: jQuery Mobile
This has to be something simple. I've got a simple button that has an event listener...<div class="addToFavoritesDiv" ><a href="" data-role="button" data-artid="#art.id#">Add to Favorites</a></div>and the listener...//When clicking the link in details pages to add to fav$(".addToFavoritesDiv a").live('click', function(event) {var id=$(this).data("artid");$.mobile.changePage("addtofav.cfm", {role:"dialog",data:{"id":id}});event.preventDefault();});On the desktop, this works fine. On a mobile device, clicking the button does nothing at all. Tested on iOS and a HTC Inspire.Any ideas? You can see this in action here:- So, I've got an interesting problem. I want to manipulate a list on a page every time the page loads. If I use pageShow as my event listener, it's run BEFORE the page's controls are initialized and therefore will throw an error if I do something like listview('refresh'). If I use pageCreate, it works perfectly. But that's only run once.So what's the best way then to handle updating controls every time the page is viewed, bur AFTER the initial creation?
- In my core file I've got the following code to listen for a page to load:$(document).ready(function() {$('div#homePage').live('pageshow', function(event, ui){console.log("running homepage");});});This seems to work just fine. Within my page I'm going to have a listview that I need to manipulate. When I'm done, I know I need to refresh, so I added this so I wouldn't forget:$("#favoritesList").listview('refresh');However, when I do this, I get:While it kind of makes sense - I don't get why the listview isn't initialized by the time pageshow is run.
- I'm using changePage to load up a dialog and passing along some data - like so:$.mobile.changePage("addtofav.html", {role:"dialog",data:{x:2,"y":3}});Right now the data is hard coded while I test. My question is - how do I access the data values from within my page? My page uses a div with a specific ID and I added an event listener for it loading:$('div#addToFavoriteDialog').live('pageshow', function(event, ui){console.log("loaded add to fav dial");console.log($(this).jqmData("y"));console.log($("#addToFavoriteDialog").jqmData("y"));});But I can't seem to access the data passed to it. You can see my two attempts there.
- I've noticed that a form within a page loaded as a dialog seems to reload the animation. What I mean is - I get an ajax post, as expected, but it's like the dialog goes away and re-appears. Is there a way to disable that? I know I could simply write my own code to handle my form post, but I'm hoping there is a simple solution.
- I've got a simple jqm demo that shows off paging of search results. You can see it here:If you search for "e" you will get a lot of results. The Prev/Next buttons work fine, but what I'm playing around with is swipe left and right events. I thought it might be cool if you could paginate using swipe events. In my index2.cfm file I added the following simple code:$(document).ready(function() {$('#searchPage').live('swipeleft swiperight',function(event){console.log(event.type);if (event.type == "swipeleft") {var prev = $("#prevlink");if (prev.length) {var prevurl = $(prev).attr("href");console.log(prevurl);}}if (event.type == "swiperight") {var next = $("#nextlink");if (next.length) {var nexturl = $(next).attr("href");console.log(nexturl);}}event.preventDefault();});});As you can see, I'm just logging now, not actually moving the user yet. Anyway, what's weird is that the URLs I'm picking up are being cached. If I swipe right I see the proper next url. But if I click the button to go to the next page and swipe right again, I'm seeing the same URL.Hopefully that makes sense. Any idea why?
- 23-Feb-2011 04:35 PM
- Forum: jQuery Mobile
I've got a simple page I built to demonstrate tap events and swipes. I began by making a page to listen for tap events.<!DOCTYPE html><html><head><title>Tap and Swipes</title><link rel="stylesheet" href="../../jquerymobile/jquery.mobile-1.0a3.css" type="text/css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script><script src="../../jquerymobile/jquery.mobile-1.0a3.js"></script><script>$(document).ready(function() {$("#intro").live("tap", function() {$("#testArea").html("You did a tap event.");});$("#intro").live("taphold", function(e) {$("#testArea").html("You did a tap hold event.");});});</script></head><body><div data-role="page" id="intro"><div data-role="header"><h1>Taps</h1></div><div data-role="content"><p>Try a tap and a tap hold...</p><p id="testArea">p</p></div><div data-role="footer">Copyright 2011.</div></div></body></html>This worked fine. So I then added a button so I could test a swipe event over it. Unfortunately, the second I added the button (even with the event handler comment out), my tap events completely stopped working.<!DOCTYPE html><html><head><title>Tap and Swipes</title><link rel="stylesheet" href="../../jquerymobile/jquery.mobile-1.0a3.css" type="text/css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script><script src="../../jquerymobile/jquery.mobile-1.0a3.js"></script><script>$(document).ready(function() {$("#intro").live("tap", function() {$("#testArea").html("You did a tap event.");});$("#intro").live("taphold", function(e) {$("#testArea").html("You did a tap hold event.");});/*$("#mybutton").live("swipe", function() {$(this).val("You swiped me. Swiper no swiping!");});*/});</script></head><body><div data-role="page" id="intro"><div data-role="header"><h1>Taps</h1></div><div data-role="content"><p>Try a tap and a tap hold...</p><p id="testArea">p</p><p><input id="mybutton" type="button" data-theme="e" value="Swipe Me!"></p></div><div data-role="footer">Copyright 2011.</div></div></body></html>- 15-Feb-2011 02:22 PM
- Forum: jQuery Mobile
I've noticed that when doing a simple form post on a page that uses a "large" select (ie, a select that loads a new page to let you pick the item) that my form posts no longer work. I end up with a 404 error instead. This only happens if I make use of the large select. If I leave it alone I can post the form just fine.Known issue?
© 2012 jQuery Foundation
Sponsored by
and others.