load used to work with former versions of this library:
$("#myTabs").tabs("load", index);
According to the docs, this should load the remote tab. Yet once the tab has been loaded it doesn't load anymore.
Also, disable the cache doesnt' work anymore:
$( "#myTabs" ).tabs({ cache: false });
How may i emulate this former behaviour?, this breaks a lot of code in my app
The answer is in the changelog:
http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event
Related
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 currently working on a mobile version of a website, the desktop version is working perfectly. On mobile, after the first navigation (random internal page), all jQuery scripts stop working. Even when I navigate back to index, it doesn't execute previously working scripts.
I have included html parts, for example:
$(".header").load("header.html");
And lots of different in-page scripts or slideshows, toggle buttons.
I'm aware of the DOM loading issue, tried all solution, none of them fixed the bug.
So how can I fix this without creating a completely different mobile version of the website?
Try this instead of load().
$(document).ready(function(){
$.ajax( {
url: "header.html",
type: "GET",
cache: false,
success: function(html) {
$(".header").html(html);
}
});
});
I've got a website that I'm converting into an app using JQM. I've read about Pages and how the DOM loads but I'm still uncertain how to architect the site.
The main page of the application is based on the Google Maps API which uses JS to load. There are 150+ target pages so I don't want them to load until the user taps the link. All of the target pages also require JS to initialize. When they return to the main page the cached state should be the default but I also need the option to run JS if the query string changes. Content doesn't change often so my preference would be to cache data once loaded but there would need to be some way to flush the cache.
I converted the site to JQM. The target page JS didn't run so I added rel='external' to the links. The JS now runs on the target but when I link back to the main page it reloads the page without running initializing the JS. The obvious solution would be to add rel="external" but then I'd be defeating all performance value. Any recommendations on how I should structure it?
Using rel=external your links will not be loaded with Ajax and you will lose animated page transitions. If you want to run some script when a page displays, use this page event:
$(document).on("pageshow", "#selector", function(event, ui) { /* your code */ });
This and other useful events are described in jQuery Mobile API Documentation.
For example, pagecreate (the now deprecated pageinit) is called once when the page initializes.
About getting query string parameters, see this answer.
There are a few questions on this site and others similar to this, but none work for my implementation on Phonegap 2.9, jQuery 2.0.3, and jQM 1.3.2.
The general consensus is that you need to incorporate jQuery UI and a small library called jQuery UI Touch Punch to 'fool' jQuery UI's mouse events for touch events. You can see that approach on this blog: http://forresst.github.io/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/. Basically, you just include the jQuery UI and Touch Punch libraries and use this syntax:
<script>
$(document).bind('pageinit', function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
<!-- Refresh list to the end of sort to have a correct display -->
$( "#sortable" ).bind( "sortstop", function(event, ui) {
$('#sortable').listview('refresh');
});
});
</script>
But, alas, this doesn't work when I use it within my Phonegap Build app. I can clearly drag and drop a listview <li>, but the listview never refreshes to actually finish off the drop. The maddening part is that there's a demo at http://forresst.github.io/demos/sortable/en/index.html that works perfectly fine on my test mobile browsers. All of them, but it just doesn't work when embedded into Phonegap.
I have found through trial and error, that if the page has a RESET button on it, when I press the RESET button the listview item snaps into place. So, logically I tried to simulate this with .click(); calls, but those haven't worked. I've searched the interwebs and tried my best to follow the stacktrace within the phonegap app, but I haven't found a solution. Also, I'd love to not have to incorporate jQuery UI into my jQuery Mobile app.
Has anyone found a working solution for the current versions of Phonegap and jQuery Mobile for a user to drag and drop a sortable list?
I've found that, in general, reducing the dependency on jquery's sortable functionality while constructing a Cordova/Phonegap environment is time well spent. Sorting html table elements in a mobile app work great with https://rubaxa.github.io/Sortable/
i'm working on a jquery mobile web site. and am trying to use the mobiscroll plugin for the date picker.
I'm using jquery validate plugin for my validation. I've used this all over other projects with no problems at all.
The issue is, the mobiscroll modal popup comes up, and the set / cancel button works fine, but the scrolling and/or +/- buttons do not function.
firebug isn't showing any errors, and IE Developer tools script debugger doesn't either.
If i take the jquery Validate reference out, it works fine. removing the $('form').validate(); does NOT fix it.
for reference i'm using:
jquery 1.7.1
jquery mobile 1.1.0
jquery validate 1.6
mobiscroll 1.6 or 2rc2 (both have the issue)
How i have mobiscroll configured doesn't seem to matter, leaving all the options out, or setting some doesn't seem to make a difference.
Having other inputs with or without validation on them doesn't make a difference either.
Here is my setup code:
$('#DateVolunteered').scroller(
{
preset: 'date',
theme: 'default',
display: 'modal',
mode: 'scroller'
}
);
and the input:
I tried making a jsFiddle, but am having some issues with getting the various libraries referenced and all the css and whatnot. I will keep working on it and post a link when i get it up and running.
EDIT:
I can't get a fiddle to work. BUT I have discovered that updating to 1.9 fixes it. very strange. but i'll take it
updating to jquery validate 1.9 fixed it.