I have a few simple jquery mobile pages set up. But when I navigate from one page to another, the extra CSS I added to the destination page doesnt take affect.
jQuery("#home").click(function(){
jQuery.mobile.changePage( "/home.html", { transition: "slideup", changeHash: false });
});
I looked around and found this
$('#form').trigger("reset");
But my page is mainly HTML right now so Im not sure how to reset all the elements in one go. Im pretty sure the transition is calling the problem.
Would anyone have any suggestions?
Related
I'm trying to get my Three.js app to work with JQuery Mobile and have run into a little issue. I'm new to JQuery mobile, but everything I have read says that I should use:
$(document).on('pageinit', function(){
});
instead of
$(document).ready() {
});
my problem is that if I move my initialization code from document ready to to pageinit, then nothing is being displayed even though the rendering loop is running.
I have looked at the html and discovered that the canvas element that Three.js/WebGL reders to has a width of 0 when using pageinit, and a width matching the display with when using document ready.
Everything I have read about JQuery Mobile warns against using document ready, so I'd really like to get this to work with page init. Can anybody help me figure out why the canvas element has a zero width when using pageinit?
For a JQuery Mobile site, I need an new image to load on page navigation. The image only displays on the homescreen.
So for example, you load m.smellyeggs.com which has image_A.png as the top banner. You select menu item 1, then press back and now image_B.jpg is showing as the top banner.
I was able to get it working using cookies. I get an array of potential images, then use cookies to traverse the array. This works on page reload, but any cache loading of a page (e.g. href="/" or using "Back" in mobile or the browser) would not call the javascript. Thus the image would not actually alternate.
var images = new Array();
<% banner_mobile_uris( controller.conference ).each do |url| %>
images.push( "<%= url %>" );
<% end %>
inc_banner_cookie();
load_banner();
To fix this, I use the following code, which deletes the image, forcing an image refresh whenever the homepage is loaded.
$( 'a' ).live( 'click', function( ev ){
var banner = $('#m_banner').load(htm_file);
banner.empty().remove();
});
This code removes the "Back" button from any subsequent page navigation that occurs.
Well that's unacceptable! Any advice on a better approach? I'd rather not implement my own "Back" button unless that is absolutely necessary.
Thanks for reading (and hopefully helping ).
The answer lies in using pageinit to detect successful JQuery Mobile page loads...
$(document).on('pageinit', function(){
inc_banner_cookie();
load_banner();
});
This will not disable the back button. And cause image reloads on any type of page navigation. Well almost any type...
As it turns out, this appraoch is fragile when AJAX redirects occur, and subsequent pageinits may not work. See my question concerning this issue.
All of the JQuery Mobile documentation I can find about navigating backwards assumes I am going to do this using an anchor tag and suggest I add data-rel="back" to the tag.
I'm not navigating from a tag, I'm mixing with PhoneGap which means I'm calling javascript functions like PhoneGap.something(goForwardOnSuccess,goBackwardsOnFailure);
where
function goFowardOnSuccess()
{
$.mobile.changePage('#next', { transition: 'pop' });
}
function goBackwardOnFailure()
{
$.mobile.changePage(/* I HAVE NO IDEA WHAT GOES HERE */);
}
One of the main things I'm using this sort of thing for is putting up a "Busy Doing Something In Native Code Don't Touch Me..." click shield screen with the "loading" stuff and then closing it in the completion functions.
However, I find when I try that from a button on a screen I "popped" into place, I find myself back at the home page (goes back two levels).
The documentation is maddeningly vague about how to navigate backwards from pure javascript. Any clues would be very nice.
Notice also that I tend to pop these busy screens from everywhere so explicitly coding a transition back to the screen I want isn't really an option.
It's definitely not clear in the documentation, but there are small allusions to it.
Try using:
$.mobile.back();
it makes sense to use data-rel="back" for something like that:
<a href="#" data-rel="back" ...
but it is better to use history.back(); inside javascript code blog i.e
.....
.....
var cId = $(this).val();
// do something with control ID then
.....
.....
goBackParent();
}
function goBackParent(){
history.back();
}
Why not just use data-rel="back" as an attribute to your back button, this will take the user back 1 page.
Also equivalent to history.back()
You are going back "two levels" because if you fire changePage programmatically via
$.mobile.changePage('#next', { transition: 'pop' });
and omit all the other options, you are triggering two functions:
changePage
hashChange
Normally on a regular transition, the hashChange is blocked, while on backwards transitions, the changePage should be blocked (not sure here...). So in your case you have your (wanted) hashChange and an unwanted (changePage) transition.
Check the JQM docs for the options you can pass along in your changePage call or look in the 1.0 source code #3140 for all available options. I would try also passing changeHash:false or fromHashChange:true along in your function call and see what happens.
If you want to dig deeper you will have to look for ignoreNextHashChange and how its value changes though JQM.
A call to history.back() will do that.
Add changeHash: true from where you are redirecting.
And then use 'history.back()' or 'history.go(-1)' from your current page. It will only take you 1 page back.
$.mobile.changePage("yourpage.html",{ transition: "flip", changeHash: true});
This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.
I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)
Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.
The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.
I tried event.preventDefault(), which does not work at all.
I tried event.stopPropagation(), which gives the partially working behavior.
and I tried return false, which worked the same way as stopPropagation.
I was wondering if anyone could provide any insight on this issue.
I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.
Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.
Thank you.
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
active: false,
change: function(event, ui) {
var id = ui.newHeader.find('input:last').val();
$("#status").text(id);
ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());
ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());
ui.newHeader.find('div.headerContainer span').hide();
ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();
ui.oldHeader.find('div.headerContainer span').show();
ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
}
});
$('input.name, textarea.desc').click(function(event){
event.stopPropagation();
});
$(".delButton").button({
icons: {primary: 'ui-icon-trash'},
text: false
}).click(function(event) {
//Display user friendly text
return false;
});
});
If someone is facing this issue, this is a little trick that worked for me.
PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.
The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.
SOLUTION: Just declare this in your document ready function
$(function() {
//some code ...
$("input, textarea").click( function(){
$("input, textarea").blur();
$(this).focus();
});
//more code ...
});
Confirmed (by me) working on IExplorer, Firefox and Chrome.
Seems to work fine in Chrome. This might be browser dependent.
"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"
Also fine in Chrome.
I'm using using jQuery mobile. Testing my web page on iPhone.
Here is the issue:
I am on http://www.mywebsite.com/here.html and I have an anchor on that page that points to
href="http://www.mywebsite.com/some/folder/there.html", I'm navigated to
http://www.mywebsite.com/here.html#/some/folder/there.html
If I remove jQuery mobile js file, everything works as expected. So it looks like jQuery mobile is intercepting my 'tap' event and modifies url to the link. Weird. Why is it doing that?
Looks like this is done on purpose to help you with animated page transitions and such.
I can turn it off by adding this attribute to the anchor data-ajax="false"