JQuery Mobile document ready alternative - javascript

I spent hours trying to debug a jquery mobile page I had created and finally got it to work. I had put the script it in the data-role="page" class="page-map4" div. I was wondering why this was the case, I would rather this not be magic to me. This didn't matter if I accessed the page directly, only if I had accessed it from another JQuery Mobile page.
$('.page-map4').live("pageshow", function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('Geolocation not supported');
}
});
Question: Why does the above script have to be in the page data-role div to work correctly when navigated from another JQuery Mobile page?

For page events I simply do this in my jQuery code. This goes in a <script> tag-set in the <head> element of a page, after any document binding to the $.mobile global:
$('#YOUR_PAGE_ID').live('pageshow',function(event, ui){
yourGeoCode();
});

You should use the pageinit event see this post 'Using jQuery Mobile – Remember to use pageinit() and not $(document).ready()' for more information

Related

Get value tr of id inside Iframe using Jquery or Javascript [duplicate]

Firstly both the parent page and the iframe are hosted on the same server (my localhost on WAMP) so same origin policy should not be an issue here.
I can't get the trigger to work. My iframe has the id of iframe.
$(window).load(function(){
//iframe ad hovers
$('#iframe').contents().find('body div').click(function(){
alert('do something here');
});
});
what am i doing wrong?
I'm not sure the browser's going to propagate a "click" event from the window context of the <iframe> out to the containing window. Does the document loaded into the <iframe> have its own copy of jQuery? If so, you can try this:
$('#iframe').contents().$.find('body div').click(function(){
alert('do something here);
});
That change makes the jQuery code in the <iframe> window handle the event.
Well I think that #jAndy is right and that should work as is - but you have to make sure the document in the frame is loaded. Try this:
$('#iframe').load(function() {
$(this).contents().find('body div').click(function() { alert("hi"); });
});
Your code is not wrong; i think the only mistake you are doing is that you are asking for the iframe's content on the parent page load which means at this stage the iframe has not been loaded yet.
Try my quick example http://jsfiddle.net/UFM44/4/
It is same as your code but i trigger it after clicking on "now" link. if you then click on the logo you can see the alert() message.

detect a dynamically loaded iframe

I need to know when a specific iframe is created on a page.
The iframe is created with JS when the user presses a button, and can be created and destroyed many times.
UPDATED: The JS that creates the iframe is part of the original page so I cannot modify it or access its variables or functions, chrome extensions are sandboxed.
I don't have control over the contents of the iframe and cannot inject any JS in it.
I can only inject JS in the main page but have no other control on it otherwise.
(it's for a chrome extension and as far as I know it's only possible to inject JS code in the main page or iframes loaded with the page but not iframes created dynamically after the page has loaded)
For the moment I do this:
window.setInterval( function() {
$("iframe").each(function(){
if ($(this).attr('id')) {
if ($(this).attr('id') == "iframe_id") {
//my code
}
}
});
}, 1000);
but I would really like to avoid the setInterval because of performance issues.
Would this be possible at all somehow?
A. Wolff probably answered your question already ("The iframe is created with JS when the user presses a button" So you know when the iframe is created").
If you're still not sure what to do... well:
The interval is not a good idea - but you probably figured that out yourself. Try the on() method. That should help.
$( "iframe" ).on( "click", function() {
alert( "This is my iframe!" );
});
If you are having trouble selecting the content of the iframe, maybe you should try accessing elements like this:
$( "#iframe-id" ).contents().find( ".what-i-am-looking-for" ).hide();
The jQuery documentation will be extremely helpful if that is what you are looking for:
http://api.jquery.com/on/
http://api.jquery.com/contents/
Cheers!

jquery callback after if statement

Howdy guys, im having trouble finding help on creating a callback in certain situations.
I have a piece of code which loads a links page in to an iframe and then changes the scr if another link is pressed.
$(".iframe").hide();
$(".lnk").click(function(){
$(".iframe").show('slow')
;})
;
$(".frmclose").click(function(){
$(".iframe").hide('slow')
;})
;
The above runs within (document).ready
below is outside of this (for some reason it does not work on the inside)
function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {el.src = url;return false;}return true;}
the link :
google
prior to this i have the div in which the iframe is in become unhidden. I also have a button within that div which hides the div + iframe.
What im having problems with is once the iframe has been opened and then closed via the div link if it is re-opened by clicking a different link the iframe unhides to display the old page then changes. But what i want is for the frame to load the new page(while hidden) then unhide to display it. I thought of using a callback after the iframe src change but i cant see where i would implement it.
Example of it happening
(click the GDPH button to see the links for the iframe)
Any thoughts or help appreciated.
Regards
B Stoner
I think that all you need to do is clear the src of the <iframe> when it is closed. That will clear the page so that next time you show the iFrame it will start out blank again.
I made a small demo of this functionality that uses the 3 links from your page as an example. The <iframe> starts hidden (by CSS) and each link will show the <iframe> and then load the remote site. I added a close iframe link to simulate the close link you have under the <iframe> on your site.
Hope this helps!
Edit: Updated the demo link to include the callback part. Somehow missed that when I read the question!
Edit 2: Your changeIframeSrc function was not working was because it was defined inside the jQuery anonymous function and is a closure. See calling Jquery function from javascript
I would catch the .load() event for the iframe, this will fire after the document has been loaded in to the iframe.
$(".iframe").load(function { /* code to run when iframe is loaded */ });

How to resize an IFRAME on load in an .aspx page?

In an .aspx page with a VB.NET codebehind I am using an IFRAME which would be created inside the repeater control.
Since I want to resize the IFRAME based on the content within the page I have been using the resize function obtained from here on the IFRAME onload as shown below.
<iframe id="IframeSubsectionArea" scrolling="auto" width="100%" onload="resizeIframeToFitContent(this)" runat="server">
However it is throwing an error as the method could not be found in the form.
Is there any client side script variant for the onload event?
What might be the reason for the error and its solution?
If you don't mind using jQuery the first answer on here should do the trick
jQuery .ready in a dynamically inserted iframe
$(document).ready(function() {
$("iframe").load(function() {
var iframe = $(this);
//Do your resize here via the iframe var
});
});
Failing that, you may be getting the error due to this block of code being missing from your document however as you have not posted the actual error i cannot be sure.
<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
// This function resizes an IFrame object
// to fit its content.
// The IFrame tag must have a unique ID attribute.
iframe.height = document.frames[iframe.id]
.document.body.scrollHeight;
}
</SCRIPT>
Edit: If that doesn't work post some example code, and the actual error you are getting

After travelling back in Firefox history, JavaScript won't run

When I use the back button on Firefox to reach a previously visited page, scripts on that page won't run again.
Is there any fix/workaround to have the scripts execute again when viewing the page the second time?
Please note that I have tested the same pages on Google Chrome and Internet Explorer and they work as intended.
Here are the files and the steps I used to test the problem:
(navigate to 0.html, click to get to 1.html, back button)
0.html
<html><body>
<script>
window.onload = function() { alert('window.onload alert'); };
alert('inline alert');
</script>
Click Me!
</body></html>
1.html
<html><body>
<p>Go BACK!</p>
</body></html>
Set an empty function to be called on window.onunload:
window.onunload = function(){};
e.g.
<html><body>
<script type="text/javascript">
window.onload = function() { alert('window.onload alert'); };
window.onunload = function(){};
alert('inline alert');
</script>
Click Me!
</body></html>
Source:
http://www.firefoxanswer.com/firefox/672-firefoxanswer.html (Archived Version)
When I use the back button on Firefox to reach a previously visited page, scripts on that page won't run again.
That's correct and that's a good thing.
When you hit a link in Firefox (and Safari, and Opera), it does not immediately destroy your page to go onto the next one. It keeps the page intact, merely hiding it from view. Should you hit the back button, it will then bring the old page back into view, without having to load the document again; this is much faster, resulting in smoother back/forward page transitions for the user.
This feature is called the bfcache.
Any content you added to the page during the user's previous load and use of it will still be there. Any event handlers you attached to page elements will still be attached. Any timeouts/intervals you set will still be active. So there's rarely any reason you need to know that you have been hidden and re-shown. It would be wrong to call onload or inline script code again, because any binding and content generation you did in that function would be executing a second time over the same content, with potentially disastrous results. (eg. document.write in inline script would totally destroy the page.)
The reason writing to window.onunload has an effect is that the browsers that implement bfcache have decided that — for compatibility with pages that really do need to know when they're being discarded — any page that declares an interest in knowing when onunload occurs will cause the bfcache to be disabled. That page will be loaded fresh when you go back to it, instead of fetched from the bfcache.
So if you set window.onunload= function() {};, what you're actually doing is deliberately breaking the bfcache. This will result in your pages being slow to navigate, and should not be used except as a last resort.
If you do need to know when the user leaves or comes back to your page, without messing up the bfcache, you can trap the onpageshow and onpagehide events instead:
window.onload=window.onpageshow= function() {
alert('Hello!');
};
You can check the persisted property of the pageshow event. It is set to false on initial page load. When page is loaded from cache it is set to true.
window.onpageshow = function(event) {
if (event.persisted) {
alert("From bfcache");
}
};
For some reason jQuery does not have this property in the event. You can find it from original event though.
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
alert("From bfcache");
}
});
In my case window.onunload with an empty function didn't help (I tried to set a value for dropdown when user uses backwards button). And window.onload didn't work for other reason - it was overridden by <body onload="...">.
So I tried this using jQuery and it worked like a charm:
$(window).on('pageshow', function() { alert("I'm happy"); });
Wire in an "onunload" event that does nothing:
<html><body>
<script type="text/javascript">
window.onload = function() { alert('window.onload alert'); };
window.onunload = function(){};
alert('inline alert');
</script>
Click Me!
</body></html>
As far as i know Firefox does not fire onLoad event on back.
It should trigger onFocus instead based from this link here.
A simple way to cause a page to execute JavaScript when the user navigates back to it using browser history is the OnPopState event. We use this to pause and replay the video on our home page (https://fynydd.com).
window.onpopstate = function() {
// Do stuff here...
};
for some cases like ajax operations url change listener can be used
$(window).on('hashchange', function() {
....
});

Categories