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);
}
});
});
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'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.
I have a simple form that is working just fine with Firefox 26 (latest version as of 12/26/2013) but when I run this form with Internet Explorer 11 I am not seeing the values from my two jQuery autocomplete controls being updated in my ViewModel. All other controls are working just fine. My autocomplete controls are of type but I have several other controls on the form that I have no issues with, just the autocomplete. Are there any known issues with jQuery autocomplete in a ... rendered in IE 11?
I have also tested this with the latest Google Chrome and I have the same issue as IE 11. This only works in Firefox :-( I have no idea why.
I had a similar issue when used IE, because IE cached my request so I did this:
$.ajax({
type: 'GET',
url: 'url',
cache: false,
success: function(response){
/* ... */
}
});
Hope this can help to you.
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
There are several ways to force an external load (data-ajax="false", rel="external"), but what if I have an external link that will serve me a jquery mobile page and I want it to load via ajax with transitions (without the page reloading)? Anyone have a straightforward solution?
The reason I'm asking is that I'm building a PhoneGap IOS app and the index.html file is no longer on the same path as the pages that are being fetched.
Thanks
You can use framework such as jQTouch or jQuery Mobile. These frameworks have built in functions which can help you in call cross domain AJAX calls with in the application it self.
For example:
$.get("test.php",
{ name: "micky", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
See demo here: http://jqtouch.com/preview/demos/ but make sure to use web kit enabled browsers such as Chrome/Safari.