I have an annoying issue, I want to reload the page I am on programmatically, whilst maintaining a page transition, but I don't want to double it up in the DOM!
Can you post your relevant code? What function do you use?
You are aware of the properties of changePage?
$.mobile.changePage("#pageId", { allowSamePageTransition : true, reloadPage: true } );
Otherwise you can always remove the previous page yourself
$('#pageId').live('pageshow',function(event, ui){
$(ui.prevPage).remove();
});
Related
I have some AJAX loading in my app, and I thought it would be nice to have a loading icon, since there's a little delay. I grabbed some code from http://tobiasahlin.com/spinkit. The loading and hiding works fine, except that I have a logo in the header, which is a link to the root:
<%= link_to "#{app_name}", root_url, id: "logo" %>
Clicking the link takes you to the root, but the loading icon is visible. But if you reload the page, the icon is hidden, as desired. So there's something different about clicking the link.
The view:
<div class="spinner">
The CSS does not set the hidden attribute. If I set it, the spinner is always hidden.
The jQuery:
$( document ).ready(function() {
// hide spinner
$(".spinner").hide();
// show spinner on AJAX start
$(document).ajaxStart(function(){
$(".spinner").show();
});
// hide spinner on AJAX stop
$(document).ajaxStop(function(){
$(".spinner").hide();
});
});
I tried adding an onclick even to the logo. That fires first, then the page loads with the spinner visible. Any ideas what's wrong?
Terry, this is an accompaniment to the comment which helped you.
There are several things to fix:
You should keep your CSS hidden, using JQuery to make it visible.
You're currently hiding your spinner on DOM load with JQuery.
Although this will work, it adds unnecessary overhead to your application. Instead, you'll be much better to show the spinner when Ajax runs:
#app/assets/stylesheets/application.css
.spinner {
display: none; /* Use this instead of inline styles */
}
You should bind your spinner to on-page elements
You're currently binding the spinner to ajaxStart & ajaxStop. These are global functions, fired EVERY time Ajax runs.
This may work in a simple application, is bad practice in a more complicated system.
I would do the following:
#app/assets/javascripts/application.js
spinner = function(){
$(".spinner").toggle();
}
$(document).on("ajax:beforeSend", function(){
spinner();
}).on("ajax:complete", function(){
spinner();
});
$(document).on("click", ".element", function(){
spinner();
$.ajax({
...
});
This uses the ajax:beforeSend event handler from Rails UJS (every time you call remote: true, this will fire).
It also allows you to use the spinner function for any other event/element in your app.
I have a link in my navigation toolbar which is in the footer. When I am on a page, and click on the nav link, It brings me to #the-page for a split second, but then I get redirected back to the page I was previously on.
Anyone else run into this problem?`
$('#page-link').on('click', function() {
$.mobile.pageContainer.pagecontainer("change", "#the-page", { } );
});
This on click was in a pageshow function of the page that was showing for a split second
$('.ui-listview').on('click', 'li.latest-news', function() {
$.mobile.pageContainer.pagecontainer("change", "#single-article", { } );
});
by moving it to a pageinit function it seemed to fix it.
It turns out this was a rebinding problem, I added a console.log inside of this function, and realized it was being called multiple times per click.
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
So what im trying to achieve is, applying any page transition when manually creating a page change.
so for example, say that on my webpage, i make it so that when the user swipes right, the website goes to a second page....like so
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage');
});
now i want to attach a page transition to this function. if it was on an actual link, then one would apply a data-transition but since this page change is being manually created, im wondering how to append a transition to it.
i tried for example
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage','flip');
});
etc but to no avail, Any ideas how i would put this into effect?
Thanks in advanced.
You've almost got it, you just need to declare the second paramater of the function (your options) within the {} parenthesis:
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage( "#secondPage", { transition: "flip"} );
});
Try replacing bind with on:
$('#firstPage').on("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage','flip');
});
I had the similar problem and this worked for me.
I'm using the jQuery tabs library to create a set of remote (i.e., ajax loaded) tabs.
However, to avoid the initial page load being empty until the ajax request finishes, I'd like to include the content for the initial tab with the initial page download.
I've got this generally working by providing a div in the initial page load that matches the title of the tab, but even though this content appears immediately, as soon as I initialize the tabs it does the ajax request IN ADDITION which is both wasteful and causes a flicker. My basic question is how can I get jQuery tabs to NOT do an ajax request for the initially selected tab, and get this content as part of the initial page load, while still loading the other tabs dynamically.
The complication is that I can't hard code the ids/hrefs for which tab is the "initial" one since the initial tab will change based on available content.
I'm sure there is some kind of hacky way to do this with javascript rewriting the URLs of tabs dynamically before I initialize the tabs but I'm looking for a cleaner solution.
Any ideas?
Are you using a specific tab control to do this? It's pretty dependent on how your tabs are implemented...
If you want the data to be included without a delayed load, you will have to include it server side.
Give me some more details and I'll see what I can do!
The best way to do it is using server side implementation to add the starting text. In the JQuery documentation the default text it is not loaded through AJAX.
I'm not sure exactly what you are doing but if that is not your case, then a simple boolean "hack" could be used like this:
var initial=true;
Then, in your tabs code:
$('.selector').tabs({
select: function(event, ui) { if(initial) { initial=false; return false; }
});
This will prevent to execute the ajax call the very first time.
There's an option called "spinner" which holds the text, gif-animation or whatever to be displayed.
$( ".selector" ).tabs( { spinner: 'Retrieving data...' } );