document.ready doesn't work when pressing link to home page - javascript

When the home page loads, $(document).ready works. When I click on a link that goes to the homepage, $(document).ready doesn't fire again.
I need it because I attach some events to the dom inside $(document).ready function. For whatever reason those attached events get removed when I click on the home page link.
How do I fix this?

Any event should be attach outside $(document).ready(), could be before
$(document).on('click', 'mySelector', function(){});
This will fire no matter what

I figured it out. rails 4 uses a js library called turbolinks. This was doing some sort of optimization that changes page without doing a full reload. You can fix this be removing turbolinks or using their own hooks to load scripts.

Related

Event firing when iframe loaded

I'm trying to set up event, which should fire when iframe is loaded. It is important to acknowledge, that I want this event to fire INSIDE iframe, not in parent page. Actually, parent doesn't have to know that iframe was loaded.
On the beggining I've tried $(function() {....} (document.ready) event, but it doesn't seem to work as expected. It seems that it fires when parent page was loaded (the same event on parent page works as expexted).
Then, I've tried window.onLoad = function() {...} but it doesn't seem to work at all (event not fired).
So, how to do that? Again, I'd like the page inside iframe to know that loading was complete. Basically, I'd like to have event, that will work in iframe page as $(function() {}) in parent page.
I am afraid you can't do this in a right way.
See this link : How to add onload event to a div element?
May be somebody should post the ticket to github.
If you own the page being loaded into the iframe, put the code in the page being shown in the iframe, not the parent page. If you do not own the page being loaded into the iframe, you cannot do what you're attempting due to cross-domain security sandbox restrictions. You would need a CORs solution http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Manually trigger onLoad event of iFrame

I have two different pages: the main page and the second page (that will be displayed in the main page as an iFrame).
The fact is that I cannot edit the main page, except from the iFrame href link.
What I want to do is to manually trigger the iFrame "onLoad" event in the main page, by using jQuery in the second page.
This is getting really hard cause of the impossibility to edit the main page, and the only thing I managed to do is to manually trigger the "ready" event on the second page, but this is not related to the "onLoad" event, unfortunately.
Any help would be greatly appreciated.
Thanks in advance.
Try
parent.$("iframe[src=myhref]").trigger("onload");

Links opening on original page with jQuery.bPopup.js

I hope someone can help me with the following problem. I am currently using jQuery.bPopup.js script for a popup I am using. After a few days I finally managed to get it working, however I am experiencing a small problem. Since my jQuery / PHP knowledge is almost to non-existent I cannot seem get it working properly.
The problem is every link, inside the popup, opens inside the popup, while it should open on the mainpage, or better said; the background page. I tried contacting the author of the script, however he doesn't seem to respond, so I am guessing he is on vacation.
I rather not ditch this popup script, because I already spend a lot of time to get it working properly. Also the script itself is working fine, however for some reason it opens links within the popup instead of opening them on the main page.
Anybody got an idea on how to solve this?
The code I am using is show below.
in the section:
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#colorButton').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
content:'iframe', //'ajax', 'iframe' or 'image'
contentContainer:'.customcontent',
loadUrl: 'popup-page.php' //Uses jQuery.load()
});
jQuery('iframe').attr("width", 920);
jQuery('iframe').attr("height", 400);
jQuery('iframe').attr("scrolling","no", "frameborder","0");
});
});
})(jQuery);
And in the section I am using:
<button id="colorButton" style="width:100%;">testbutton</span></button>
<div id="element_to_pop_up"><div class="customcontent"></div><span class="button b-close">X</span></div>
Though the popup works fine and it displays the contents also fine, it opens links within the popup, instead of opening them on the main / background page.
I hope I posted all the necessary information. I am kinda clueless (yeah, that happens a lot in general).

want to show a dialog message in jQuery mobile when it's first loaded

In jQuery mobile, I want to show a dialog message in my homepage (index.html) when this page is first loaded. However, if the user navigates to different pages of my site and comes back to my index.html, I don't want to show show the dialog.
I am thinking about using pageshow or pagebeforeshow method and checking prevPage object. Is there any other good way to do it?
Use pageinit event, It will trigger only once. Can't be easier then this.
jsFiddle example: http://jsfiddle.net/Gajotres/e9RcT/
$(document).on('pageinit', '#index', function(){
alert('This event will trigger only once!');
});
To test it go to second page and then go back.
Loading on the DOM will ensure whatever you want to take place only happens on the first page initialization:
$(document).ready(function(){
// do stuff here
});
source: http://jquerymobile.com/test/docs/api/events.html

Page Reload/Refresh executes $(document).ready() on every page in jQuery Mobile

My jQuery mobile applications consists of multiple pages.
Whenever I reload a page, no matter which page in the application, $(document).ready() function is executed. I expect it only to execute for the main page of the application.
What is going on? I would like it only to run on the main page only.
Please read
http://jquerymobile.com/demos/1.0/docs/api/events.html
Important: Use 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.
Also for jQM page information please read
http://jquerymobile.com/demos/1.0/docs/pages/index.html

Categories

Resources