I'm using jQuery mobile with PhoneGap, and would like to show a login page the first time the app is used, and show the index page on subsequent loads.
My current solution is to use the following on deviceready
if(!localStorage.registered){
$.mobile.changePage( "#login", { transition: "none"} );
}
However, my issue with this is that you still see the page transition. I would like the login page to be the first page that is visible.
Any advice? Thanks!
This Q is a few months old, it remains unanswered, I don't have any experience with phone gap but I do jQM, so I figured this may help.
I current employ a solution to this on my app by delaying auto initialisation of jQM.
This is an example of how you could based loosely on how my application does it.
(function() {
#stop jQM from auto initialising
$(document).on("mobileinit",function() {
$.mobile.autoInitializePage = false;
});
var my_app = new MyApp();
# custom afterinit event is triggered on the app instance
$(my_app).on('afterinit',function() {
var initial = 'login';
if(localStorage.registered) {
initial = 'home';
}
# set the page hash to our start page
window.location.hash = initial;
#initialise jQM
$.mobile.initializePage();
});
})();
Make sure you secure the thing that decides if login is allowed, in my application I have a data structure that is required by the app ajax in to MyApp.appdata it will only be there if login was actually successful.
Another solution may be to have a proxy page.
A different approach that I employed on another app.
An initial "loading" step, which is just a dummy page.
Make a page in your doc as the first page, eg.
<div id="loading" data-role="page">Loading</div>
in the mobileinit step bind to the pageshow event.
$(document).on("mobileinit",function() {
$('#loading').on('pageshow',function() {
# ...
# do login check here
# ...
var initial = 'login';
if(localStorage.registered) {
initial = 'home';
}
# change to our initial page
$.mobile.changePage(initial);
});
});
What about hiding #registration and #login then do:
if(localStorage.registered){
$('#login').show();
} else {
$('#registration').show();
}
Related
How does one go about displaying a controller action inside of jquery modal dialog?
Firstly you'll need your Javascript to load a url via ajax, this will depend on which kind of modal you are using etc, there's a ton of libraries out there. I will assume you are using the basic JQuery UI dialog Modal.
Example Link
<!-- this points to your action below.. -->
<a class="some-link" title="title here" href="mycontroller/test">testing</a>
Example Javascript (quick example found on google, many examples out there..)
$(document).ready(function() {
$('.some-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
});
Now you need to make sure your action doesn't render the main layout when providing the content for the modal via the ajax request.
Here's a really simple method of doing that by replacing the base layout with an empty view for ajax requests. This isn't the best method but it's the simplest for this case ;)
Example Action
public function testAction()
{
if($this->getRequest()->isXmlHttpRequest()) {
$this->layout('application/layout/ajax-layout');
}
return new ViewModel(array()); // ..
}
application/layout/ajax-layout.phtml
<?php echo $this->content ?>
I think you want this kind of code http://jqueryui.com/dialog/#modal-message
inside the just display your action
Otherwise it's about to open an url into your modal it's like that http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
I want to refresh a page without using data-ajax="false" in anchor tag and i want to show the loading spinner while linking the pages in jquerymobile.pls help me.
reloadPage (boolean, default: false)
Forces a reload of a page, even if it is already in the DOM of the
page container. Used only when the 'to' argument of changePage() is a
URL.
Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
So basically you can use $.mobile.changePage() to change pages and you can pass it the preloadPage : true option when you want to reload a URL.
Here is a quick example of how to use $.mobile.changePage() for links that have the reload class:
$(document).delegate('a.reload', 'click', function () {
$.mobile.changePage('myPage.html', { reloadPage : true });
return false;
});
The default loader in jquery mobile appears while linking to pages, by adding the following code:
$("a").click(function() {
$.mobile.showPageLoadingMsg();
//Other things you want to do
});
I'm using grail's webflow to manage a multi-stage registration process on my site. A link triggers an event for the start state, and the intention is to load the corresponding view in a fancybox iframe. I used grail's link tag to resolve the URL for the view, but the iframe just displays a '404'.
trigger:
<g:link controller="registration" action="register"
event="enterStandardDetails" class="register" />
The URL resolves to /mysite/registration/register?_eventId=enterStandardDetails.
webflow:
def registerFlow = {
enterStandardDetails = {
on("next") {
// capture mandatory user details
}.to("enterOtherDetails")
}
enterOtherDetails = {
on("next") {
// capture optional user details
}.to("categories")
on("previous").to("enterStandardDetails")
}
registrationComplete = {
// display finished state
}
}
javascript:
$("a.register").fancybox({
'width' : '65%',
'height' : '90%',
'type' : 'iframe'
});
Is it possible to intercept the URL corresponding to the view state before grails renders it? Or, am I over engineering this? Can I just simply pass in the URL of the view corresponding to the start state, whereby the flow is started when the user clicks "next"?
Any ideas, or thoughts would be much appreciated.
Thanks, -Tom
The problem was that I forgot to import fancybox script.
I have forms located in multiple areas in my layout page (not nested).
I have a partial view which performs a post to controller action.
What action result do I return in that post to keep the user on the current page?
Is jquery/ajax my only option? I would rather a solution that didn't depend on javascript, maybe even a solution that degrades nicely.
You can use the Request.Referrer property to see what page the user has come from and then just use that to redirect them back there.
This does introduce other issues, e.g. losing ModelState, so you'll have to design for that. Also note that some users can block sending referrer information in their requests to the server - so the Referrer property can be null.
I would recommend using AJAX and then falling back on this.
You just need to do a RedirectToAction("") back to your main view.
To post a form without submitting the whole page, which refreshes the browser, you need to use Ajax/jQuery. The degraded solution is to submit the whole page like you would with a normal form.
Here's how I do it with jQuery.
Html:
<div id="RequestButtonDiv">
<button id="RequestButton" name="Request" type="button">Request</button>
</div>
This calls AddToCart on my Request controller when the RequestButton button is clicked. The response is placed inside the RequestButtonDiv element.
<script type="text/javascript">
$(document).ready(function () {
$('#RequestButton').click(function (event) {
$('#RequestButton').text('Processing...');
$('#RequestButton').attr('disabled', true);
submitRequest();
});
});
function submitRequest() {
$.ajax({
url: '<%: Url.Action("AddToCart", "Request", new { id = Model.RowId, randomId = new Random().Next(1, 999999) } ) %>',
success: function (response) {
// update status element
$('#RequestButtonDiv').html(response);
}
});
}
</script>
Controller action:
public ActionResult AddToCart(int id)
{
var user = AccountController.GetUserFromSession();
user.RequestCart.AddAsset(id);
return View("~/Views/Assets/Details_AddToCart.ascx");
}
The controller returns a partial view. You could also return Content("some stuff") instead.
Holler if you have questions or need more detail.
I am looking to standardize the processing of ajax #anchors at the server side, using MVC.
Before a controller action is invoked I want to convert every request with ajax anchors into a request without ajax anchors, so that the controller code does not know there were anchors in the request:
For example:
1) /user/profile#user/photos should be treated as /user/photos
2) /main/index#user/profile/33 should be treated as /user/profile/33
What is the best technique in MVC to accomplish that?
This should necessarily be done on the client side, probably using jquery as everything that follows the # sign is never sent to the server.
I too struggle with same issue and I solved this problem after looking at Visual Studio 11 Developer Preview template code. I added following code in my _layout.cshtml, please note we must load jquery.mobile*.js file after following script tag:
<script type="text/javascript">
$(document).bind("mobileinit", function () {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page, or when clicking "back"
// after a form post), hence disabling it. http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
#{
if (ViewBag.JqueryMobileAjaxEnabled != null && ViewBag.JqueryMobileAjaxEnabled == true)
{
#: $.mobile.ajaxEnabled = true;
}
else
{
#: $.mobile.ajaxEnabled = false;
}
}
});
</script>
**<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>**