I want to make a page transition using "pageChange":
$.mobile.changePage('new.html', { transition: "none"});
when the page loads, I want to executa a function. For this, I added this code in "new.js":
$('#new-page').live('pageinit', function(event) { ... });
The problem is when the caller page opens the new page the previous function don't run, I have to reload the page to run it.
What am I doing wrong?
Thanks
pageinit is only called once for a page, when it is initially loaded into the DOM. Subsequent navigations to the page won't force it to reload into the DOM (unless you specify the option on the changePage method)
when the page loads, I want to executa a function.
I suspect what you're actually after is pageshow or pagebeforeshow though?
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.
When you click on a JQuery UI slider that is disabled and the page has been scrolled down, the page goes back to the top.
This is happening because the slider widget is implemented with an anchor tag containing an Href of #.
This is my hack solution.
$(".ui-slider-disabled").on("click",
".ui-slider-handle",
function () {return false;});
It works well but, is there a native (API) way to stop this?
How about this (you may need to change the class, depending on how you set it up)
$(".ui-slider").click(function(e){
e.stopPropagation()
});
I have a page where I need to show/hide divs based on what button the user clicks. In the page, I have two divs (divBranchList and divGrowerList) and two buttons (btnBranch and btnGrower). I am using the following code to show/hide the divs.
$(document).bind('pageinit', function () {
alert("here");
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
While this works perfectly when the page loads or if I refresh the page, but fails to work when the user clicks on a listitem and the page comes back from the server after getting some data. The page has both lists visible although if I put a breakpoint at the following line in Firebug's script panel, it does get hit.
$("#divBranchList").hide();
Any ideas why the div is not hiding or how to make it work?
If you're showing and hiding content in a JQueryMobile page, you will probably need to trigger the UpdateLayout event
$("#divBranchList").trigger("updatelayout");
after you've done your showing / hiding...
So, I am using jQuery Mobile and I'd like to animate individual elements on a page change both before and after the change. I set transitions to "none" in jQuery moblie then try to add class to css3 animate individual elements. It works on pagechange, so when you go to a new page the transition on the elements appears, but pagebeforechange happens to quickly and the animation is lost. Is there a way to make the pagebeforechange function wait until the animation is done then go on to the next page? preventDefault(); stops the page from changing at all. I need like a call back or deferred obj or something? If I call changepage in pagebeforechange after the animation is done...the function runs recursively :(
transitions: function(){
$(document).bind( "pagebeforechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
$(document).bind( "pagechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
},
Thanks in advance!
you could try pageshow instead of pagebeforechange. Beaucse pageshow is fired before the pagechange event
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...' } );