I am developing phonegap application using jQuery Mobile. Below the code I have used to changes page when click on Button
$(document).on('click', '#btn_new_register', function (e) {
$.mobile.changePage($("#newuserregister"), { transition: "slide"} );
});
My problem is when I click button it load registration page but within a second it load previous page (Login Page).
I have use single page structure using jQuery Mobile.
Please help me on this.
I have seen questions asked on the stack overflow but didn't find solution.
Related
I have a page with ASP.net MVC 5 with Bootstrap in that displays a table of many records. I have a popup that open when I click on a button that is located on each row, basically some CRUD. This works fine.
What I would like to do now is when a user enter a specific URL (like site/Proof/LoadSpecific/342) to open the page as usual, but also show the modal as if I clicked on a specific button.
I am faily new to MVC, JQuery and web in general. How would I do this ?
Thanks
If you're using bootstrap modals you can use the following functions (assuming you have the bootstrap js and jquery scripts included as well)
assuming myModal is the id of your modal element:
$('#myModal').modal('toggle'); //toggles the shown/hidden state of the modal
$('#myModal').modal('show'); //shows the modal
$('#myModal').modal('hide'); //hides the modal
so you would include a script on your page that shows the bootstrap modal on load such as the following:
$(function() {
$('#myModal').modal('show');
});
Here's a link to the bootstrap 3.3 documentation which has a good deal more information on these components and how you can use them.
I developed a project in jquery mobile which have fixed header. its working fine in laptop browser but when I run in mobile browser then after browse some pages my mobile getting stuck because jquery mobile keep cache of previous page. so to remove previous pages I added below code
$(document).on( "pageshow", function( event, data ){
$('div[data-role=page]:hidden').remove();
});
It also worked fine but now when i clicked on a link first time it remove previous page data as well padding-top from ui-page which was added for fixed header. now if I goes to next page and again comes on this page its work fine.
Please suggest, Thanks!!!
I am not sure if all Rails app behave the same or is it just within my app's setting. For my app when a page is loading (So the moment when a link is clicked until the content is responded from the server) there is no indication of page loading at all. In general website during the page load there would be a spinning wheel in the place of the favicon to show that the page is loading. I am using Rails 4.0.0 on Heroku.
From Turbolinks, something like?
$(document).on('page:fetch', function() {
// show spinner
});
$(document).on('page:change', function() {
// hide spinner
});
Update for Turbolinks 5
For Turbolinks 5:
$document.on('turbolinks:click', function() {
// show spinner
});
$document.on('turbolinks:load', function() {
// hide spinner
});
If you are using jQuery and your spinner is in the div.spinner, you can show and hide it with:
$(document).on("turbolinks:click", function(){
$(".spinner").show();
});
$(document).on("turbolinks:load", function(){
$(".spinner").hide();
});
Rails uses turbolinks by default.
Please take a look at turbolinks and how it works. It basically replace the body of the page instead of making a new request, that's why you don't see the loading indication in the browser.
If you want to see your page loading you can either disable turbolinks, removing it from application.js, or use a gem like this one: https://github.com/caarlos0/nprogress-rails to show the actual loading of the page.
I strongly suggest you to keep turbolinks and go with the second option I gave you.
Those sites are what we call Single Page Applications most of the time. Those sites use a lot of AJAX based content fetching mechanism, and this thing has to do with front-end programming and a little with back-end programming.
If you really want to achieve this functionality, you can use AngularJS, BackboneJS and like other framework who support Single Page Web Applications.
When you fetch another page form server, all of your HTML, CSS, and JS is gone, and the new content is fetched and rendered. So there is no way that you can show a loading-page in between unless you use AJAX based pages.
I'm building my first jquery mobile site and have run into a problem. When just doing a straightforward hyperlink from one page to another it seems like the page transition effect is stopping the
$(document).ready(function(){
alert("hello");
});
From firing. If I refresh the page or link to the page directly the event fires.
I've tried removing the data-transition from the hyperlink and even tried
<a data-role="button" data-transition="none" href="/otherpage/">link</a>
But still have the same problem.
Andy ideas please? Thanks.
This is by design, as jQuery Mobile loads pages in the background, then incorporates them in the current document before transitioning. This means the original page is not reloaded, so the document does not become ready again.
Accordingly, the documentation on events prominently says (emphasis from original):
Important: Use $(document).bind('pageinit'), not $(document).ready()
Therefore, you should write:
$(document).bind("pageinit", function() {
alert("hello");
});
Hi jQueryMobile has an event for on pagecreate but it doesn't work with the dialogs (dialog page embeded in the same page with data-role="page")
$(document).delegate("pagecreate", "#foo-dialog", function() {
console.log("dialog-opened");
});
I have working code where pagecreate/pageshow is being called when showing a dialog, maybe you have your JS in the wrong spot? If you AJAX transitioned to this page any JS in your head tags isn't pulled in.