I am writing a PhoneGap app using JQuery Mobile.
I change pages based on buttons and links that are clicked within the app. All of my views are encapsulated in a single index.html page. Different pages are broken up by div data role like so:
<div data-role="page" id="view1"></div>
<div data-role="page" id="view2"></div>
When a button is clicked the app moves the next view with:
$.mobile.changePage("#search2_1");
The problem is when a user is typing in a text box. The keyboard pops up with either the "Go" or "Search" buttons available. If the user clicks this, they bypass the javascript function that moves them to the next page and are inadvertently sent back to the root of the app.
Is there anyway to disable or remove these buttons or even have these buttons trigger the change page function?
*note: since this is a PhoneGap app I am limited in what I can do in Objective-C and I am focusing on doing this within the web page.
Since your elements are inside a form element the user submits the form by pressing the search or go button, which will reload the page.
you need to cancel the form submit.
This would look something like this in jquery:
$("yourform").submit(function(){
return false;
});
To answer the second part of the question, this is what I did:
$('#form').submit(function(e) {
e.preventDefault();
$('#button').trigger('click');
return false;
});
This prevents the default submit, and instead triggers the action you want.
Related
My scenario is this: I am using WL.NativePage.show(nativePageClassName, backFromNativePage, params) to navigate to an activity. Once returning back to the WebView, I need to navigate directly to other page(Div) in html, rather from the page I originally navigated from to the activity, which is developed using jQuery-Mobile.
See the below example code.
WL.NativePage.show("com.example.SignatureActivity", function(data) {
if(data.goToPage == "example2"){
$.mobile.changePage('#example2-page',{transition: 'none'});
}else{
$.mobile.changePage('#example1-page',{transition: 'none'});
}
});
Here I am using WL.NativePage.show() In example1-page, I have two buttons in activity, one is save and one is back, while saving I need to navigate to example2 and while back, its example1.
I am able to navigate to example2, but example1-page is executing and displaying first and then displaying example2-page.
Please give me suggestions on how to navigate directly to example2-page without displaying example1-page.
You can't navigate directly from the activity to a different place in the DOM which is in the WebView from which you navigated to the activity.
What you could do, is open displaying the activity, also hide the current content in the WebView. I assume it is a DIV essentially - so you could do something with display:none or any other standard method.
That way when the user returns back to the WebView from the activity and the code to change page is executed, you could then play again with the visibility of the DIV to display it when needed.
This way what you don't want to be seen will not be shown.
I'm using CSS for a dropdown menu on a site I'm building. When you hover over a parent tab, the dropdown menu fades in using CSS3's transition-property. The problem I'm having is the parent tab links off to another page, so when you tap a parent tab on the iPad, it takes you to the page instead of displaying the dropdown menu - which causes usability issues.
Is there a way to make it so the dropdown appears on the first tap, and the second tap takes you to the parent page?
Here's the HTML I'm using to display the menu:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Team
<ul>
<li>Our Workers</li>
<li>Join Us</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
And here's a jsFiddle link: http://jsfiddle.net/A64QU/197/
Thanks in advance, I appreciate any help.
You're on the right track with a design that invokes the menu on the first tap and the parent page on the second tap. This will work on touchscreen-only or touchscreen-sometimes devices where the user cannot always 'hover', and is critical for users who have difficulty holding the cursor steady over the menu, so I recommend it over a hover-to-show-menu design regardless of whether this is Mobile Safari, Internet Explorer, or any other browser.
To do what you ask, handle the click event on the <a> tags (for example use jQuery: http://api.jquery.com/click/) and hide/show the menu that way (you could use jQuery's toggle, or show/hide.) Then extend the code to consider whether the menu is shown or hidden to determine whether it should prevent <a> tag's default behavior and show the menu (for example jQuery's preventDefault: http://api.jquery.com/event.preventDefault/) or allow the default behavior of click on <a> to occur: navigate to the <a href> URL.
Consider that with this approach you may also need to provide a way for the user to dismiss the menu once it's open (and blocking some part of the page.) Often this is done with a click handler at the document level.
I do not recommend trying to implement a touch-hold instead, as this is not well-known to users. In my experience with user testing most will not try this, even on things that look as if they are a menu.
There is no "hover" in the touch UI metaphor, although there is a counterpart event which has been called touchhold in the jQuery Mobile UI; it is fired when the finger remains pressed down on the touch-screen for a certain amount of time, e.g. 500ms, 700ms, whatever. Something similar happens on the virtual keypad of the iPad when you hold a finger down on certain keys, the [a] key, for example: you get a popup of variant forms of [a] (umlauted, accented, and so forth).
You could wire things up so the menu-open code would be called on touchhold rather than on the tap event, and then have the individual menu-items listen for the tap event. You would either have to override the touchevents of Mobile Safari yourself by writing the required javascript, or install a UI library that implements this behavior.
I m new to Jquery I have created example jquery mobile in this if back and login button is used once then next(>>) and prevoius(<<) button display the same page not that which is refferd using href tag. Before using Back button and login button it work fine afterusing those button it works abnormally.
edit and to view demo http://jsfiddle.net/khushbujoshi/JERG4/5/
DOM Element IDs are unique don't use them twice.
You don't need to do the page change on your own with jQuery. Let jQuery-mobile handle it.
I would like to make a google chrome extension. I want to add a function, so when i click on it's icon, it will open a new tab with a specific URL. How can I do that?
Sorry for bad english, I'm just learning that language ;)
If you want to open a link in a new tab when you click on a page action icon you can use the onClicked method of the pageAction: http://code.google.com/chrome/extensions/pageAction.html#event-onClicked
So, in the background page or script add the following lines:
chrome.pageAction.onClicked.addListener(function(tab) {
windowObjectReference = window.open("http://google.com/", "DescriptiveWindowName", "resizable=yes,scrollbars=yes,status=yes");
});
Note, that onClicked event is NOT fired when page action has a popup page that is displayed when page action is clicked. So in order to use onCLicked event you should NOT have a page action popup page
Using jQuery Mobile (jquery.mobile-1.0b3.min.js). If i apply a click event to a form, the back button seems to get the click event binding as well. It does this no matter how specifically targeted to an element the selector is. For example:
Using this to set the back button:
Copy code
<div id="pagename-page" data-role="page" data-add-back-btn="true" data-back-btn-theme="b">
And this in a script file:
Copy code
$('#awards-details-page').live('pagecreate', function(event){
$('#awards-details-page input[name=submit]').bind('vclick', function() {
console.log('I'm going to be hijacked by the back button.');
});
});
Clicking on the back button will produce the message in the console when tested in a browser.
Every time you visit the page with the script, it will add another duplicate binding. Attempts to unbind the click event on the pagehide event worked with the targeted element, but back button's bindings persisted.
Can anyone shed some light on this?
Thank you in advance.
dont use vclick you will ge ghost, they have improved CLICK so just use that
also live is not bind... bind is to an element that exist, live is for all elements that have that shared property, before after and during. you past pages exist so you have a set of binded items now not just one for the page you are on. i would scrap the whole back button element and have your own clickable item, for this you can do your own back code and add attributes like data-backto = "#page1", you can then control better what happens when a back button is clicked, especially as android phones have there own back button too.