I am a newbee on this jquery mobile platform.
I have a splitview in my application... As in left page(which is 20%) and right page(which is 80%).
I have states coming from the database in the left panel and when one of the state is clicked... their corresponding information in the right panel....(the information too is coming from the database).
Now the problem is... when I click on any state for the first time.. its information gets displayed on the right panel...
But when I click any state for the second time... the previous state information only stays.. the right panel is not getting refreshed as and when I click on the other states...
Thanks in advance....
$('#main').live('pageshow', function(event, ui) {
console.log("States show");
onDeviceReadyStates();
});
$('#content').live('pageshow', function(event, ui) {
console.log("Content show");
onDeviceReadyContent(sid);
console.log("contentsid: " + sid);
});
Made use of the router plugin....to pass the parameters....
Related
I'm developing jQuery Mobile (jQm) app.
I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.
I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.
I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)
As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?
$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).
This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.
I hope this helps.
I am developing a PhoneGap apps and have the following page flow.
registrationPage > areaSelectionPage > orderDetailPage > areaSelectionPage
I would like the back button only appear on the last areaSelectionPage. If areaSelectionPage is coming from registrationPage, the back button should not appear. How can I do it?
I haven't tested the code, but you can take the following approach.
pagebeforeshow receives two arguments, event and ui. To get the previous page use, ui.prevPage and then apply the check.
$("#areaSelectionPage").on('pagebeforeshow', function(event, ui) {
if (ui.prevPage.attr('id') === 'registrationPage') {
//hide back button here
$('a[data-rel="back"]').hide();
}
});
I have a jQuery UI tooltip and whenever I click the select inside of the tooltip it closes the tooltip.
Maybe it's related to this: mouseenter mouseleave and a select
this doesn't work:
$(".select_test").on("click", function(ev) {
ev.stopPropagation()
});
JSFiddle: http://jsfiddle.net/bXxdH/2/
I know that it is clearly visible that the select is bigger expanded than the tooltip high is.
Here is a screenshot from my site: http://prntscr.com/1dvgy3
It is also happening on my site even though the select is not too big.
Thanks.
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.
I have a panel and am trying to always show the panel when the window is wide. I don't need to have a close button at all - just always show it for wider windows.
jQuery Mobile Responsive Panel Dismiss issue helped, along with others, but no luck. I can get everything to almost work, but everytime I navigate to a new page, the panel animates in, which looks weird.
I am now looking at using a fixed div on the left that is not a jquerymobile panel. I can do this from the server. But it seems like a lot of effort to just keep a panel open.
Any hints?
Did you try something like this:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
I also encounter such a problem. Here is my solution:
add the following javascript into your header:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
and in your panel add two attributes:data-swipe-close="false" , data-dismissible="false"
then the panel will be always shown in your html