I'm building a JQuery mobile site which has an image slider on 2 pages. The sliders are activated using the following JS:
$(function () {
$("#slider").excoloSlider();
});
where '#slider' is the name of the div that gets rendered as the slider.
I have this slider on the 2 pages and have given both the same id, and don't want to insert the above code into both pages. To make things easy I want to be able to make add the above code into a.js file that I'm referencing at the top of both pages.
However, the script only kicks in when one of the pages are the first page to be navigated to. So, I assume this means the code is only being called in the once, and due to the AJAX loading of the subsequent page, it isnt called when this new page loads.
So, how can I run the code to affect any/all pages which feature the slider?
I dont know how many times you have to call .excoloSlider(); function. In case you have to call it each time the page is visited, then you need to use any of these page events, pagecontainershow or pagecontainerbeforeshow.
If you use pagecontainershow, you can run .excoloSlider(); on #slider even if you have the same id in a different page. This way, you specify in which page to look for #slider.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
/* check if #slider is within active page */
var slider = activePage.find("#slider").not(".slider");
if(slider) {
slider.excoloSlider();
}
});
Update
I have added .not(".slider") selector to exclude already rendered slider. The function .excoloSlider() will be called on new sliders only.
Demo
Try to use class instead of id since id is unique, then you can change your jQuery code to:
$(function () {
$(".slider").excoloSlider();
});
Use jQuery Mobile API for the navigation system
$(window).on( "navigate", function( event, data ) {
$("#slider").excoloSlider();
});
Edit
Use pageinit
From the jQM docs:
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
Related
I am having an issue with view components in .NET Core 2.0. I need to be able to detect when a view component has finished loading in the parent view.
Once the view component has loaded, I need to set focus on a specific field that is part of the view component.
Currently, I am using JQuery window.onload(). However, in window.onload() the view component and any subsequent JavaScript has not fully render yet.
Since it has not fully rendered the window.onload event can't find the specific field in the view component.
If I use setTimeout and set it's ms between 1000 and 3000, thus giving the view component time to finish loading, it works fine.
The problem with using setTimeout is that it isn't consistent. Depending on how long the page takes to load it may or may not set the focus on the specified field.
Here is the code jquery code.
var setSearchFocus = function () {
if ($("#divSearch").is(":visible")) {
$('#Diagnosis_Search').focus();
}
}
window.onload = function () {
setTimeout(setSearchFocus, 1000);
}
divSearch is the div in the parent view where the view component is rendered.
Diagnosis_Search is the name of the field in the view component that needs to receive focus.
Appreciate any help with an alternate way to determine when a page has completely loaded or the ablity to detect when a view component has finished loading.
Thanks!
If you're up to using jQuery, you're better off using the document ready event:
$(document).ready(function() {
setTimeout(setSearchFocus, 1000);
});
OnLoad will fire before the entire document/page is ready. Using the $(document).ready(... approach will wait until your page is ready (in other words, when the DOM elements you want to interact with are present and rendered).
This is one of the most common problems on web development. You're using window.onload which is not jquery. It is part of the Document Object Model (DOM) and as you have noticed it doesn't work as expected. This is why the guys # jquery came up with document ready:
$( document ).ready(function() {
console.log( "ready!" );
});
or just
$(function() { console.log("ready!"); });
https://learn.jquery.com/using-jquery-core/document-ready/
UPDATE: as per the comment on the other answer, I get that you've got to wait until an iframe loads your view component. Is that so? If it is, then try to listen to the iframe's document object, an iframe is like another whole webpage embedded on your site, so there's another document object for it. You can access this object from the parent by using
document.getElementById('divSearch').contentWindow.document
you see a document that contains other document, which is actually what we're doing with the iframe. Beware this line isn't going to work if the document you're loading on the iframe is not on the same origin (not part or the same web or in the same TLD), but as you told us that this is a viewComponent this isn't the case probably.
To sum up, try with $(iframe#youriframeid).ready(function() { console.log("ready!"); }) instead.
I have a simple jQuery script that plays/pauses video on hover that is working correctly when I first load the page, (e.g page 1) in rails with will_paginate gem.
My problem is that when I click to the next page or any other pages in particular, the jQuery script is not working but when I viewed the page source, the javascript code is still present.
I have to reload the page in order to get it to work?
var figure = $(".video").hover( hoverVideo, hideVideo);
//video is a div class that my videos use, this is at index.html.erb
function hoverVideo(e) {
$('video',this).get(0).play();
}
function hideVideo(e) {
$('video',this).get(0).pause();
}
Your problem is that when your page is changed i believe the page refreshes with ajax and newly created elements have no events attached to them. The simplest solution is:
$(document).on('mouseenter','.video', hoverVideo ).on('mouseleave','.video',hideVideo );
This way jquery will always call mouseenter / mouseleave function but only fire your function when the element has specified class .video. So you don't worry anymore whether your newly created elements have any events attached to them or no
I am using .load to call content from a section of my site when someone clicks a link. I am then using getscript to load in any scripts that are needed that .load strips out.
However, the content call function is needed on links that are loaded from this loaded content.
I am therefore in a situation where there is a loop being created and multiple executions.
This isn't an issue if the user clicks on one or two links to load content from other pages, but if they do it for several links then I get a spike in CPU, and therefore need to find a solution.
I am not sure why there is this issue, as the script executions are done through user clicks, so there shouldn't be continual execution.
The script looks like this:
$(document).ready(function () {
$('.Select a').one("click", function () {
var toLoad = $(this).attr('href') + ' .containerPlus';
$("body").append($("<div class='loadedcontent'>").load(toLoad, function () {
$.getScript("scripts required for loaded content", function () {
$.getScript("load this script again");
}));
});
});
basically the user clicks on a link, this calls the content and loads it into a new container, scripts needed on that page are then loaded, and then finally this code is applied to any links within this loaded content that need it.
This is a loop, but as there is a click element, I wouldn't have thought the second execution wouldn't take place until another click event.
Thanks for any advice
Richard
I need to detect the first time a page loads in jQuery so that I can perform some actions only when the page loads the first time a user navigates to that page. Similar to server side code page.ispostbasck. I have tested $(document).ready and it fires every time the page loads so this will not provide what I need. I have also tried the jQuery Load function - it also fires every page load. So by page load an example is that I have an HTML input tag on the page of type button and it does not fire a postback (like an asp.net button) but it does reload the page and fires $(document).ready
Thanks
You will have to use cookie to store first load information:
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
Note: Above example uses jQuery Cookie plugin.
An event doesn't exist that fires only when the page is loaded for the first time.
You should use jQuery's .ready() event, and then persist the fact that you've handled a first time page load using your method of choice (i.e. cookie, session variable, local storage, etc.).
Note: This method will never be fool proof unless you can store this information at the user level in a DB. Otherwise, as soon as the user clears their cookies, or whatever method you choose, the "first time loaded" code will fire again.
I just ran into this problem and this is how I handled it. Keep track of the first time the page loads by using a variable initialLoad:
var initialLoad = true;
$(document).ready(function() {
...
...
...
initialLoad = false;
});
Then in other functions, you can do this:
if (initialLoad) {
//Do work that is done when the page was first refreshed/loaded.
} else {
//Do work when it's not the initial load.
}
This works well for me. If the user is already on the page and some jQuery functions run, I now know if that user just loaded the page or if they were already on the page.
The easy solution is to use jQuery ‘Once’ plugin
$(element).once('class-name', function() {
// your javascript code
});
I am writing a webapp using jQuery Mobile that calls a function to load records into localStorage and create a listview from a remote JSON file when the page is initially created (using the live.pagecreate() event for the page). At the beginning of this function is the jQuery Mobile method $.mobile.showPageLoadingMsg() and $.mobile.hidePageLoadingMsg() is at the end of the function.
On the initial pagecreate, the loading message does not appear (on iPhone 4 with iOS 4.3 Safari, Chrome 13 and Firefox 5). However, I also have a refresh button on the page; this button clears the associated records in localStorage then calls the same function used to initially populate the listview. However, when calling the same function from the refresh button the showPageLoadingMsg() and hidePageLoadingMsg() both work correctly and the Loading screen appears and disappears as it should. Am I missing something here?
ETA Here is the gist of the code (not in front of the actual code right now, if you need more I will put it in tonight). I also should mention that I've tried to put showPageLoadingMsg in (document).ready and have tried to bind it to mobileinit and neither have worked:
function loadListView(){
$.mobile.showPageLoadingMsg();
//ajax call to pull JSON
//$.each loop to load localStorage and listview
$.listview.refresh('list');
$.mobile.hidePageLoadingMsg();
}
$(#listpage).live('pagecreate', function(event){
loadListView(); // showPageLoadingMsg() and hidePageLoadingMsg do not work when the function is called here
});
function clearList(){
//for loop that clears each item in localStorage that matches the key prefix set in loadListView
}
//runs when refresh button is clicked
$('listrefresh').live('click',function(){
clearList();
loadListView(); //showPageLoadingMsg() and hidePageLoadingMsg() work when the function is called here
});
For these handlers to be invoked during the initial page
load, you must bind them before jQuery Mobile executes. This can be
done in the mobileinit handler, as described on the global config
page.
Docs:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html
Triggered on the page being initialized, after initialization occurs.
We recommend binding to this event instead of DOM ready() because this
will work regardless of whether the page is loaded directly or if the
content is pulled into another page as part of the Ajax navigation
system.
Example:
http://jsfiddle.net/phillpafford/mKn8Y/8/
In the example none of the live events fire on initial page load, you have to configure this type of action in the mobileinit:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html