I have a jQuery Mobile 1.3.0 app that is making Ajax calls to dynamically load data. I have seen various options for doing this in previous versions of jQuery Mobile (see Show Page Loading Spinner on Ajax Call in jQuery Mobile), but have not found an answer for 1.3.
The Ajax calls are similar to:
$.getJSON(url, function(data) {
console.log(JSON.stringify(data));
$.each(data.cards, function(index, card) {
$('#card-name').text(card.title);
});
});
What is the best approach for displaying the loading spinner for each Ajax call?
After some research and trying several options, I found that this worked well for every Ajax call in the app. I added the following code toward the top of my JavaScript:
// Load the spinner if an ajaxStart occurs; stop when it is finished
$(document).on({
ajaxStart: function() {
$.mobile.loading('show');
},
ajaxStop: function() {
$.mobile.loading('hide');
}
});
In this way, no matter how many places I load data via Ajax, the jQuery Mobile loader (spinner) is displayed by adding this snippet of code one time.
If anyone knows of a better approach, please let me know.
Related
I have a jquerymobile ajax based web app. not using ajax is no option.
On one page a new script is inserted by <script url="../script.js"></script>
Now i would like to load that script, after the page is loaded by ajax. Unfortunately it does not happen. I tried for example:
$(document).live( 'pageinit',function(event)
CODE HERE
{});
But it does not work. As well as
$(document).bind('pageinit', function()
Any ideas how i can manage to load the function after the page is loaded by ajax??
Found the solution with help of "OMAR". I put the function inside the page div. But the link is not working, so i put the code itself into the top of the div. now it is working. not the best solution, but it is working.
i've got an issue.
I'm a newbie in the world of jQuery Mobile, and with the ASP.Net MVC part I'm a little bit lost.
Here is my problem: In my mobile web site I want to change the navbar (that I use more like an appbar) buttons whereas I am on an Edit Page, or Home, etc....
So those pages (Edit, Show) are loaded in ajax, and on these pages I'm trying to fire an event like :
$(document).ready(function(){
alert("Hello !");
});
But after some researchs, i found that in JQM with Ajax, events doesn't work that way, but more like this :
$(document).bind('pageinit', function(){
alert("Hello !");
});
But this don't work for me (every page change the event is trigerred), maybe because in ASP.Net MVC Mobile we have only one data-role="page" and the rest of the content are loaded in ajax in the data-role="content", so I really don't know how I can fire an event when my "Ajax Loaded Kind of Page" is loaded ?
I had tried to live/bind on the listview of one of these pages but that does not work either :
$("[data-role='listview']").live('pageinit', function () {
alert("hello");
});
To be more precise about what i'm trying to do :
In ASP.Net MVC, my layout (who his common to all my pages) has a div with a data-role="page"attribute. This data-role is unique to my all app, and need to deal with it.
But the fact is, when I load an other ASP.Net MVC Page in my code :
<div data-role="page" >
<div data-role="content"> Here my ASP.Net MVC Page</div>
</div>
I cannot use the $(document).bind('pagenit') because i don' load a page (data-role=page) but just a part of a data-role="content".
If you have any idea I will be glad to hear (more read) it, thanks in advance and sorry if my english is not really "understandable".
Jquery Mobile gets the view through the AJAX and displays it. Due to this, the general events miss out since it is an AJAX call.
The best option is to disable Ajax for every form, you need to mention on each redirection call as well
data_ajax = "false"
Once it becomes a regular call, all Jquery events work normally!
I am struggling with a problem about automatic AJAX load of page. I have normal static page, where is a link. After click on this link I will call an AJAX request for loading a data.
This works me. I try now to add next functionality - I would like after load a normal static page to load that AJAX data automatically - is possible to do somehow?
I tried it to do whole afternoon, but I still don't know, how to do it...
So, I will very grateful for every hints, how to do it... Thank you so much.
Make your Ajax call in your jQuery ready function, e.g.:
<script>
$(function() {
$.ajax(...);
});
</script>
I am looking for a documented, cross-browser supported jQuery plugin that I can use to build a site like this:
http://redsquareagency.com/
As you can see, as you navigate through the site, the URL changes via a hash and all new pages are loaded via ajax calls instead of page loads. This allows for some neat animations to be used when a new page is loaded.
I've searched for a while trying to find a good plugin that provides this functionality. The best I can find is jQuery Ajaxy: http://balupton.com/sandbox/jquery-ajaxy/demo/
But, the documentation is lacking, and I found it incompatible with the latest jQuery version (1.6.0).
Anyone know of plugins that can accomplish this?
Hmmm I don't think there is ONE plugin that does everything. But you can pretty much do some jquery your self with combination of jquery history plugin.
What you do do is write some code make all your hrefs load via AJAX. Like this -
$(document).ready(function() {
$.history.init(loadContent);
$('#navigation a').not('.external-link').click(function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
And that's it. The jquery history plugin will take care of the rest. You should also read google's documentation on how to do this properly for them to index it.
What you looking for is swfaddress. It provides deep linking for flash and ajax sites (obviously your looking for the ajax feature). You basically just have to listen for a page change request and load content accordingly.
Here is the case.
I have a website built in asp.net mvc3 with custom CMS.
Is there any way by clicking a button from cms to reload the page of the website visitors?
For example, here in stackoverflow, if an admin from the backend pressed a button my page would reload automatically (or even a lightbox would appear, or redirect me to a different page).
Can we do that?
With HTML5 you can use web workers to do this for you: http://html5demos.com/worker
Without HTML5, you can set up some basic polling code in your javascript. It would call a method on the server that would tell it whether or not to reload. You can run this every 30 seconds let's say:
$(document).ready(function(){
var doRefresh = function(){
$.get('checkForRefresh', function (data) { ... handle response ... });
};
setInterval(doRefresh, 30000);
});
And then just have your checkForRefresh server side code read a value set by that CMS button.
Forcing a reload on a button click boils down to something like this (using jQuery and javascript):
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {
location.reload();
});
});
</script>
The first answer on the following question shows two ways to refresh the page, one forcing a reload like above, and the second, much like #Milimetric describes in his answer:
Refresh (reload) a page once using jQuery?.