Develop Reference

will_paginate pagination links javascript not working

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

JQuery Mobile do X to every div with given class

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.

Jquery mobile Pre-loaded page Stops working [duplicate]

This question already has an answer here:
jquery mobile autocomplete different behavior at loading page
(1 answer)
Closed 8 years ago.
My actually problem is below.I would be happy if this is solved.
I Want to know why jquery Preloaded url stops working.Below are steps to replicate my problem.
visit http://www.andymatthews.net/code/autocomplete/ .
Type "m"
You get list of names.Click any one.
For example i clicked http://www.andymatthews.net/code/autocomplete/target.html?term=Maryland.
Now why Select tool is not working after page preload.
If i reload http://www.andymatthews.net/code/autocomplete/target.html?term=Maryland It works fine
7. But if its preloaded whats the reason it stops working.
If that cannot be resolved , Tell me if any function available to stop the preload for single page.

i think this works, but you could use the data-ajax="false" attr on links and form actions

You have placed selectmenu change event inside .ready(), which shouldn't be used in jQuery mobile. The equivalent event is pageinit.
Also, instead of using window.location.href, use $.mobile.chagnePage() to activate Ajax navigation that jQuery Mobile uses.
$(document).on("pageinit", "#mainPage", function () {
$("#examples").on("change", function () {
var page = $(this).val();
setTimeout(function () {
$.mobile.changePage(page);
}, 100);
});
});

Just update your code.js on event handler to:
$('body').on('change', '#examples', function(e, ui) {
It'll work! Tested here.

How can I activate an internal page link with Javascript?

How do you activate a link when the page loads using javascript?
I am trying to open a lightbox when the page loads, here is the link I am trying to activate.
Replay Intro

All you need to do is
<script type="text/javascript">
$(document).ready(function() {
$("#linkID").bind('click',function()
{
$(this).facebox();
})
$("#linkID").click();
})
</script>

using vanilla javascript that would be to use window.location.href = 'your_link_here.html'
Using your lightbox, the code could be different. Please post a link to the lightbox you are using or show us some sample code. Usually they come with API's or documentations on how to use them.

Do you just want to trigger a 'click' event on the <a>?
That would be something like this:
$('#home_video').click();

Alternative to jQuery ready() for detecting that the page anchor in the URL changes

Does anyone know how to get a page load event to fire if the page anchor in the URL changes, i.e., going from
http://mywebsite.com/#test1
to
http://mywebsite.com/#test2
when using the Back button?
I tried the code at the bottom (the history.navigationMode line along with the ready() function insures that the onload event fires even when the browsers Back button is used), but it doesn't work if only the page anchor portion of the URL changes and the Back button is used. I know this code works if the URL changes it's query string (or the URL points to a new file/folder) because I use this all the time but it looks like jQuery's ready() function doesn't fire when the Back button is used if only the page anchor location in the URL changes.
I'm trying to come up with a solution for making the browser's Back button preserve JavaScript/AJAX manipulations of the page and I'm basing my attempt on this person's idea: http://www.ajaxonomy.com/2008/web-design/a-better-ajax-back-button-part2 but without relying on using a repeating timer to check if the URL page anchor has changed - I would rather check this when the page onload event fires.
Any ideas/suggestions?
<script language="javascript" type="text/javascript" src="/jquery.js"></script>
<script language="javascript" type="text/javascript">
history.navigationMode = 'compatible';
$(document).ready( function() {
if(document.location.hash){
var hashQueryString = document.location.hash;
hashQueryString = hashQueryString.replace("#","");
alert(hashQueryString);
}
});

In the near future we will have the onhashchange event, it's being introduced on new browsers, IE8 already supports it.
But for now, I recommend you to give a look to the following workarounds:
Emulating onhashchange without setInterval (complete article, demo)
Real simple history
jQuery.hashChange

There's a jQuery plugin you can use and a great Railscasts episode to show you how to use it (the screencast is not Rails specific).