We Keep Coding

Reload Javascript when redirected to other page with turbolink in Rails 4

In my application I display the table page only when the page is completely loaded. There are two such pages in the application. To achieve this I set the 'style="display:none"' for the table in the corresponding view and when the page is completely loaded I show the table through the Javascript file using '$('mytable').show()'. The first page has link to other similar page which should display table, but when I click the link the table on other page remains hidden. I know this happens because the Javascript (which unhides the table)is not executed again. How do share the Javascript between those two pages? Note I have other Javascript code as well which I want to share between these two pages.
Known solution:
Removing 'turbolinks' does the trick for me, but then every time I switch between pages the loading is quite slow. Is there way to make this work so that the performance is not impacted.
My Javascript is located at 'app/assets/javascripts/myscript.js'.
I have a single controller 'mycontroller' and two actions, 'index' with view 'view1' and 'index1' with view 'view2'. Both the views display similar tables with different data.
I tried searching over internet but could not find a relevant post.
Please let me know if I need to share any more details.
Thank you for the help!
Solution: I found the solution on Rails Guide, please see my answer below.

Directly from the Rails guide:
5.2 Page Change Events When writing CoffeeScript, you'll often want to do some sort of processing upon page load. With jQuery, you'd write
something like this:
$(document).ready -> alert "page has loaded!" However, because
Turbolinks overrides the normal page loading process, the event that
this relies on will not be fired. If you have code that looks like
this, you must change your code to do this instead:
$(document).on "turbolinks:load", -> alert "page has loaded!" For
more details, including other events you can bind to, check out the
Turbolinks README.
Just modify that sample to reload the table, instead of an alert.

Try adding this on the bottom of the second page
<script>
$(document).ready(main);
</script>

Read section 5.2 at this link, that worked for me:
When writing CoffeeScript, you'll often want to do some sort of processing upon page load. With jQuery, you'd write something like this:
$(document).ready ->
alert "page has loaded!"
However, because Turbolinks overrides the normal page loading process, the event that this relies on will not be fired. If you have code that looks like this, you must change your code to do this instead:
$(document).on "page:change", ->
alert "page has loaded!"

Load lightbox automatically on page load

I have a lightbox that loads onclick (see the link 'test' at this page: http://www.300hours.com/test.html ). I want to modify the code so that the lightbox loads automatically when a user loads the page.
My current href is:
<a href='/uploads/1/2/2/3/12234663/4105150_orig.png' id='#interstitial' rel='lightbox' onclick='if (!lightboxLoaded) return false'>test</a>
I've tried a few Javascript and Jquery solutions posted, but so far nothing works. I'm not very familiar with JS and Jquery - I think my problem must be some kind of syntax error. Anyone who can help me out with a working sample would be much appreciated. Many thanks in advance!

Just trigger the onclick event using a jquery trigger().
$(document).ready(function(){
$("#interstitial").trigger("click");
});
It's a bit dirty but it gets the job done!

JavaScript in jQuery mobile not working unless I refresh

I'm having a jQuery mobile page with JavaScript inside. The problem is the JavaScript doesn't work unless the page is refreshed. Here is my code:
jQuery(function($) {
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
});

To understand this problem you need to understand how jQuery Mobile works.
Your first problem is point where you are trying to initialize JavaScript. From your previous answers I can see you are using several HTML/ASP pages and all of your javascript is initialized form the page <head>. This is the main problem. Only the first HTML file should have JavaScript placed into the <head> content. When jQuery Mobile loads other pages into the DOM it loads only the <div> with a data-role="page" attribute. Everything else, including <head>, will be discarded.
This is because currently loaded page has a <head> already. No point in loading another pages <head> content. This goes even further. If you have several pages in a second HTML file, only the first one is going to be loaded.
I will not try to invent warm water here so here are links to my other 2 answers discussing this problem. Several solutions can be found there:
Why I have to put all the script to index.html in jquery mobile (or in this blog article)
Link fails to work unless refreshing
There's more then enough information there to give you an idea what to do.
The basic solutions to this problem are:
Put all of your JavaScript into a first HTML/ASP file
Move your JavaScript into <body>; to be more precise, move it into a <div> with data-role="page". As I already pointed out, this is the only part of a page that is going to be loaded.
Use rel="external" when switching between pages because it will trigger a full page refresh. Basically, you jQuery mobile that the page will act as a normal web application.
As Archer pointed out, you should use page events to initialize your code. But let me tell you more about this problem. Unlike classic normal web pages, when working with jQuery Mobile, document ready will usually trigger before page is fully loaded/enhanced inside the DOM.
That is why page events were created. There are several of them, but if you want your code to execute only once (like in case of document ready) you should use the pageinit event. In any other case use pagebeforeshow or pageshow.
If you want to find out more about page events and why they should be used instead of document ready take a look at this article on my personal blog. Or find it here.

Your question isn't exactly overflowing with pointers and tips, so I'm going with the thing that immediately sprung to mind when I saw it.
Document ready does not fire on page change with jQuery Mobile, due to "hijax", their method of "ajaxifying" all the links. Try this instead...
$(document).on("pageshow", function() {
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
});

Try pageinit like this
$(document).delegate("body", "pageinit", function() { // Use body or page wrapper id / class
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
});

seems like nothing ever worked for me. Tried many different fixes, but i made the site too messy, that even position of certain javascript files wouldn't make the site work. Enough talk, here is what i came up with.
// write it in head at top of all javascripts
<script type="text/javascript">
$(document).ready(function() {
// stops ajax load thereby refreshing page
$("a,button,form").attr('data-ajax', 'false');
// encourages ajax load, hinders refresh page (in case if you want popup or dialogs to work.)
$("a[data-rel],a[data-dialog],a[data-transition]").attr('data-ajax', 'true');
});
</script>

Countdown timer with ajax loaded content (jquery mobile) not working

I am having some trouble getting a countdown timer to work on my jQuery mobile page. If I have it load on a static html page it works as it should (see that page here:http://www.beingproperties.com/match-game). when you hit the start game the timer starts.
I have recently ported this over to the jQuery mobile framework and the timer is not working on that site (see this here by going to the link and clicking the 'multi-page link, then the start game link): http://www.beingproperties.com/match-game/home.html).
I have tied using 'pageshow' as scene below and though I get it to work and throw an alert, once I add in my code to execute nothing happens.
$('#shapesPage').live('pageshow', function () {
I know that it's something regarding the ajax loaded page, though all other jQuery fires on this page except for the countdown timer. I'm at a loss and would much appreciate a kick in the right direction.
I used the inspector and it's not very informative. Any insight to get this resolved, or proper ways to debug these types of issues would be much appreciated. thanks in advance. -Chris

Looking at the source for home.html, it seems that you haven't included js/plugins.js, only js/index.js.
I know you've included it in shapes.html, but JQM is a bit weird about loading external scripts when loading a page via ajax, as stated in the documentation:
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.
Edit: You can not call any functions that modify the DOM until it is fully loaded. This is signaled in JQM by the pageinit event. Read about scripting and events for more info.
Try surrounding your javascript for shapes.html with
$( document ).delegate("#shapesPage", "pageinit", function() {
...
});

How to execute custom js after jQuery Mobile has created a new page div?

So I am using Django 1.3 and jQuery Mobile for a webapp. When trying to create new functionality or override some of jQM's functionality I don't seem to be able to get it to excute some code on page creation. I am still hackish at js, but it seems to be a bigger problem than myself
How to execute JavaScript after a page is transitioned with jQuery Mobile
I end up putting js snippets on the page itself which doesn't seem the correct way to handle they work sometimes and sometimes not. I have tried the same commands in the script console of Chrome and the selector and commands seem to work fine.
examples:
Hiding the numeric inputs on on sliders I end up putting this script tag in the template itself, I know this is bad form, but am unsure how to get it to work otherwise:
<script>
$('#form_div > input').hide();
</script>
Trying to do a similar snippet:
<script>
console.log("Focus snippet!");
$('.ui-input-text').blur(function(){
console.log("focus was changed!");
});
</script>
yields no results, except the initial console.log, but I can execute through the script console and it works fine.
I saw in this several other posts, but none have seemed to answer the question clearly and I am unsure how how to make this work the right way.
This seemed the closest suggestion, but I was unable to make it work:
Jquery mobile: how to execute custom jquery code in page
$(“body”).delegate(“div[data-role*='page']“, “pageshow”, function(){
// Your code here. It is good to check to not run unnecessary code
});
Any suggestions would be greatly appreciated.

Look at the documentation here: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
One small note is that all the javascript executed on any page must go in the base page (like: index.html). If you add javascript for page2.html in page2.html it will not be executed. if you add the javascript for page2.html in index.html it will be executed.