how can I change the current page without reloading by pressing a button, something like history.push in react.
Is there an analogue in vaadin router?
In most cases, you want to navigate with normal <a href=""> links. Vaadin Router will intercept those and update the page content without a reload.
You can also navigate programmatically with Router.go('path').
Related
I'm using phonegap and jquery mobile to build an app.
Until now the "all pages in one html file" was being used, but the project is going to be really big and will be bad to have all in one file.
All the pages are in the file index.html
Only one called mentions in mentions.html.
When going from the page "dashboard" from index.html to "mentions" on mentions.html is ok, the transiction go well.
But when the back button is clickd, it goes to the dashboard page with No transiction .
here's my button:
Dashboard
Use jQuery Mobile's back button link.
Dashboard
"Back" button links If you use the attribute data-rel="back" on an
anchor, any clicks on that anchor will mimic the back button, going
back one history entry and ignoring the anchor's default href. This is
particularly useful when generating "back" buttons with JavaScript,
such as a button to close a dialog. When using this feature in your
source markup, although browsers that support this feature will not
use the specified href attribute, be sure to still provide a
meaningful value that actually points to the URL of the referring page
to allow the feature to work for users in C-Grade browsers. If users
can reach this page from more than one referring pages, specify a
sensible href so that the navigation remains logical for all users.
Also, please keep in mind that if you just want a reverse transition
without actually going back in history, you should use the
data-direction="reverse" attribute instead. Note:
data-direction="reverse" is meant to simply run the backwards version
of the transition that will run on that page change, while
data-rel="back" makes the link functionally equivalent to the
browser's back button and all the standard back button logic applies.
Adding data-direction="reverse" to a link with data-rel="back" will
not reverse the reversed page transition and produce the "normal"
version of the transition.
I currently focus on an iOS web app using Apache Cordova and JQuery Mobile.I want to implement a tableview-like style page (it is called listview in JQuery Mobile). I implement a initial list view in html and I'd like to: when I click the different rows, the html will send message to the iOS, and then I create a request with native code. After that, I return the successful result to js and js will update the list view which looks like you click a row in a tableview and a new page is pushed in.
The problem here is:
how to add the click event?
in the click event, how can I know which row is clicked?
how the tableview-like pushing animation is implemented when I use JQuery Mobile to update the list view?
I'm fresh to the web app and it costs several hours to implement dynamicly creating a list with the request result. And I totally do not know how to go further.
thanks for your help.
I. and II. Here's an example for your first and second question:
This is a code example:
$('ul.listview-example[data-role="listview"] li').bind('click',function(event, ui){
alert($(this).attr('id'))
});
First code line will bind a click event on every listview li element. $(this) is a selected li element.
If you are using never version of jQuery us .on( instead of .bind(, in older version you can also use .live( .
EDIT :
III. I think this should cover your third question: http://jsfiddle.net/Gajotres/YShLE/
I have an MVC4 mobile project that I want to add a desktop (non mobile) page to for some users.
I have added a new desktop master page and assigned my view to use it.
The first time I navigate to the page it renders using jquerymobile which appears to somehow be cached from the previous screen.
If I hit F5 to refresh the page it displays using the assigned desktop masterpage correctly.
Can anyone tell me how to fix this? Any insight appreciated
I'm still not sure the cause of this but found a work around.
Instead of creating the button to link to the next screen like this:
View Pots Orders
I changed it to be:
<a href="#" onclick="window.location.href='#Url.Action("ReviewTeamOrders", "Team")'" data-theme="b" data-role="button" >View Pots Orders</a>
Seems to do the trick!
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.
I am having the link button and when i clicked on the link button the popup will be open (with in the page itself like a modalpopup. now i have to get the popup feel using jquery and inside the div text should come from database.
How is it possible for getting the message from the backend.
means open a div in a modal popup feel using jquery
or opens the html page in a popup in the same window using jquery
Thanks and Regards
Vara Prasad.M
Take a look at the Facebox jQuery plugin. It does pretty much exactly what you're asking for. For example you can have a link like this to some remote page like so
text
then just call the facebox plugin when your content is loaded like so
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
});
and your content will render in a modal window. You can also take a look at Fancybox or ThickBox which provide very similar functionality.
There are two steps to your problem:
Open a modal popup using jQuery
Fetch server side content and display it in the modal dialog
Use jQuery Dialog (http://docs.jquery.com/UI/Dialog) for popping open a modal dialog, and then use jQuery load (http://api.jquery.com/load/) for loading the content from the server.
The server page you call will make the database query and output the contents to the response buffer.