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
});
Related
I am new to this select2 multiple,
I have a select2 multiple code for selecting multiple in my project as show below,
$('.itemName').select2({
//data: data,
placeholder: 'Select a Language',
ajax: {
url: '/User/LanguageSelect/',
dataType: 'json',
delay: 250,
processResults: function (data) {
//console.log(data);
return {
results: data
};
},
cache: true
}
});
this is in the partrial view, it works fine in the fisrt time but when partial view get refreshed i can not type anything in the box,
i tried adding this line of code too..
$(document).ajaxComplete(function () {
$('.itemName').select2();
});
But when i added this the select2 is not working in the first place either, what did i do wrong??
this is the view i get one first load
First
and after partialview load i get like this
Second
please help
When your partial view is loaded (there could be an event for that) you must (re-)bind all your jQuery objects.
You're on the right track as far as I can see, but the first select2 instantiation is different and besides that I suspect that you're not hooked onto the right event (ajaxComplete).
Can you share how you load your PartialView?
If you don't know any of this; just add this to your PartialView:
<script>
$(function(){
$('.itemName').select2({
// add stuff
});
});
</script>
In the JQuery mobile documentation I can read the following:
The loader widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. It can also be displayed manually for custom loading actions using the $.mobile.loading helper method (See the global method docs).
What does that mean 'pulls in content via Ajax'?
I understand the following; JQuery mobile displays the loading dialog on Ajax calls.
But this isn't working, when I do a simple Ajax get call, the loader doesn't show. (http://jsfiddle.net/QcE8G/).
$.get("http://echo.jsontest.com/key/awesome/number/five", function(data) {
var json = {
json: JSON.stringify(data)
};
$("div").html(JSON.stringify(data));
});
I can only set the loader widget programmatically like this:
$(document).ajaxStart(function() {
$.mobile.loading('show');
});
$(document).ajaxStop(function() {
$.mobile.loading('hide');
});
What am I doing wrong? Is there some built in logic to show and hide the loader widget or should you always show it programmatically?
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'm having trouble with a dialog on Jquery Mobile. On the index page I would like to have a dialog to the terms & conditions. The dialog works, I click accept and it goes away. Then when moving to another page it pops up again, and repeatedly pop's up even after clicking accept.
<script>
$(document).bind('pageinit', function (){
$.mobile.changePage("terms.html", "pop", false, false);
});
</script>
pageinit is triggered when page a page is initialized. Because you used $(document).bind('pageinit', function (){}); this means that you are binding to all pageinit's instead of just one. Use
$("#page1").bind('pageinit', function (){
$.mobile.changePage("terms.html", "pop", false, false);
});
Where page1 is the id of your first page.
Or
$(document).bind('pageinit', function (){
if(!termsAccepted) {
$.mobile.changePage("terms.html", "pop", false, false);
}
});
The second is better if you have multiple entry points into your app (like a mobile web page) as opposed to a single entry point (like a mobile app, always starts at index.html)
Edit:
This might be even better
$(document).one('pageinit', function () {
$.mobile.changePage("terms.html", "pop", false, false);
});
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();
}