I have the following problem: When I use either the jQuery Mobile back-button or the changePage function of jQuery Mobile to return to the previous page it doesn't show any data on the page. All javascript gets executed but page remains empty..
Any ideas?
This was a problem I faced when I was removing pages from the DOM via javascript to prevent the first page from sticking into the DOM. All it would show was a blank page when clicking the back button.
Are you removing previous pages from the DOM in your javascript?
And when you say the page "remains empty", is it just the data within the content tags, or is nothing appearing on the page at all (including jquery mobile enhancement markup)?
You should post your changePage function here so that I and others can help you out.
Related
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.
Im developing an HTML generator using jQuery through a drag & drop interface. Currently the user drags "block" elements onto an invisible div overlaying an iFrame (so that it appears to be dropping onto the iframe). When the element is dropped on this invisible div, the corresponding HTML is appended to the iFrame body.
Next, i want to give the user the ability to select an element in the iFrame, and change the properties of the selected element.
I have appended CSS imports and the jQuery/jQueryUI scripts into the iFrame head.
The issue I am facing is when the appended iFrame element is clicked, the jQuery select lasso only appears when the mouse leaves the iFrame, and on it appears outside of the iframe.
The reason I am using the iFrame is so when the code is "generated" for the user, i can just append the iFrame body content to a dialog box.
Has anyone faced issues with the iFrame and jQuery before? and is there any documentation/javaScript library that can assist me in this process?
Thanks!
Rory
The "fix" around this issue is convoluted, but works in my situation.
I created a click event on each added element in the iframe like so:
$('iframe').contents().find('.elem'+blockVal).on('click', function(){
$('iframe').contents().find('.selected').removeClass('selected');
$(this).addClass('selected');
//alert('you have selected the block with class element'+ blockVal);
});
blockVal is a variable passed in from the function that appends the html to the iframe. The above function just adds a click listener to each element appended to the iframe. When any of the elements are clicked, they are given a class of 'selected', and any other element that already has that class, loses it.
Im sorry if that doesn't make any sense.
My advice to anyone doing something similar: Don't use an iframe.
I have an html page which has some html form elements and jquery
if I open the html page as a standalone page, everything seems fine, however, if I open the page as jquery ui dialog whithin an aspx web forms page (I get the contents of the html page through jquery ajax method), the input elements text and textarea are not enabled, but select lists are enabled.
The problem is coused by modal property.
If the modal is false, then the fields are editable
Any ideas why this happens this?
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"
I have a jQuery dialog box on my website. I give a div on the page the "dialog" id it's contents become the contents of the dialog box. However, when the page is loading, this div appears at the top of the page and looks bad. Does anyone know how to deal with this?
Just hide your div via your CSS file:
#dialog {display: none}
This will not affect its actual display when the dialog is opened.
I tested to be sure, and this method worked with jQuery UI 1.7.2
Assuming that the dialog is changing the 'display' style [eg using .show() and .hide()] then all jQueryUI is doing is setting the display style. thus, you can set the div with the display:none by default, and that way it won't show when you load.