Stop All Code Execution Until IFrame Completely Loads - javascript

I am loading a webform and on this page I have an iFrame How can I delay the next line of my code from executing until the iFrame has completely loaded? I tried this javascript but it does not wait until the iFrame is totally rendered.
<script type="text/javascript">
document.getElementById('frame1').onload = function () {
}
EDIT
using the syntax below it writes the code to my window instead of actually executing it?
$( document ).ready(function() {
document.getElementById('frame1').onload = function () {
myWindow.close();
window.returnValue = true;
window.close();
}
});
Would it be possible to send a response to my client side C# code once the iFrame has fully loaded and I run my close() function from there?

You can use jQuery library
Wrap you function with this:
$( document ).ready(function() {
document.getElementById('frame1').onload = function () {
}
});
Don't forget to add jQuery library to your application. You can use the online one provided by Microsoft.
<head><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script></head>

Related

How to make Javascript load on pageload

I want to make this JS function go from a button to a page load
I am integrating a jira issue collector into our webpage.
Bug Report
<script type="text/javascript" src=""></script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#myCustomTrigger").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};</script>
To load when the page reloads I used the window.onload but that didnt work
Add a document complete jquery handler:
$(document).ready(function(){
showCollectorDialog();
});
This will run as soon as the document is fully loaded.
here you can do it it with jquery just like like this.You can place this at the end of your html file.And also include jquery cdn in script tags in your html file.
$(document).ready ( function(){
alert('hello world');
});​
or you can do this like this
function functionName() {
alert('hello world');
}
window.onload = functionName;
Looking for an easy answer, nothing works from existing googles.
No custom triggers needed.
Put this into your html head and it will trigger the form, I just tested it ;-)
<script type="text/javascript">
setTimeout(function() {
$('#atlwdg-trigger').trigger('click');
},100);
</script>
 

Rails:-location.Href not working in project

I am a newbie on javascript and was implementing a loader in the project..
I have used the below code for the implementation of loader but it is not working:-
var url = "http://localhost:3500/#!/Movies";
<script>
$(function(){ //Loader implementation
if (location.href==url){
$(window).ready(function(){
$('#loadIndicator1').fadeOut(1000);
return false;
});
}
});
</script>
I am calling the loadindicator in the code as:-
<ul>
<li id="loadIndicator1" style="position:absolute ;top:50%;left:50%;z-index:99999;"></li>
</ul>
I am not very sure why this is giving an issue.I am using jquery-1.8.3.min.js and jqueryui-1.10.2.js
Also when I hover on location..I get unresolved variable location.Please help me with this.
use
if (window.location.href==url)
instead of
if (location.href==url)
var url = "http://localhost:3500/#!/Movies";
$(function(){
if (location.href==url){
$(window).load(function(){
$('#loadIndicator1').fadeIn(1000);
});
}
});
this will show your loader once the webpage is fully downloaded
use $('#loadIndicator1').fadeOut(1000); to hide the loader once the content is loaded.
Ignoring window ready, using only document ready
$(function() {
if (window.location.href === url){
// $(window).ready(function(){
$('#loadIndicator1').fadeOut(1000);
return false;
// });
}
});
You should remove the part I have commented out. The problem is, you attached an event handler to document ready, and if your are on a specific URL, you attach an event handler to window ready, but that event was already fired, and it won't be fired again.
Using window load after document ready
Another possible solution:
$(function() {
if (window.location.href === url){
$(window).load(function(){
$('#loadIndicator1').fadeOut(1000);
return false;
});
}
});
The window load event fires later, than document ready - though this should be tested.
Ignoring document ready, using only window load
Third time is a charm, another solution which may be the best, simply ignore the document ready event, and only use the window load:
$(window).load(function () {
if (window.location.href === url) {
$('#loadIndicator1').fadeOut(1000);
return false;
}
});
This case though the loader only appears if everything is loaded on the page, so maybe this is not what you want -- in this case use the first option.

Load Un-clossable Jquery Modal on Page load

I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.
According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>
Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals
you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});

How to load a jQuery function only after the document finish loading

Strange situation:
I am building a menu bar using jQuery and CSS.
In my JavaScript file, I have an on-ready function like so:
$(document).ready(function(e) {
mark_active_menu();
}
and...
function mark_active_menu() {
var elementWidth = $("nav li").width();
alert(elementWidth);
}
For some reason, even BEFORE all the document finish loading, I'm getting the alert message with an incorrect width. Only when I release the message, the rest of the document loads and I'm getting the right width as it should be.
Why my function is being called BEFORE all the document finish loading?
Is there a way to load the function only AFTER a certain element done loading (Example: the nav element)?
You can use window.load, it will be triggered after all the resource have completed loading.
$(window).load(function(e) {
mark_active_menu();
});
The load event fires at the end of the document loading process. At
this point, all of the objects in the document are in the DOM, and all
the images and sub-frames have finished loading, Reference
All the current solutions are just treating symptoms of the main problem. If you want your handler to execute after all your ajax loads, then you may use a promise.
var ajax1 = $.ajax();
var ajax2 = $.ajax();
jQuery(function($) {
$.when.apply($, [ajax1, ajax2]).done(function() {
// your code here
});
});
Try on the window load event :
$(window).load(function() {
//Stuff here
});
To be sure, Try window load
$(window).load(function(e) {
mark_active_menu();
}
Before(sometimes, doesn't load absolutely at the beginning, a few milliseconds after(0-200ms about)):
$(document).ready(function(){
$('body').hide(0);
});
After:
$(window).load(function(){
$('body').delay(500).show(0);
});
In my situation of work with AJAX and HTML. I have the same problem with functions $(document).ready() and $(window).load(). I solved this problem by adding handler of my event (that should work at HTML DOC), to the jQuery function that runs right after AJAX reguest was finished. Read this: "
jQuery.post()" (third parameter in the function).
In my code it looks like this:
var RequestRootFolderContent = function(){
$.post(
'PHP/IncludeFiles/FolderContent.inc.php',
function(data){
$('[class~="folder-content"]').html(data);
//Here what you need
$('[class~="file"]').dblclick(function(){
alert("Double click");
});
}
)
}

Jquery manage local script with full ajax site

Basically my app work like that :
Index.php manage call to other pages.
Each page contains 2 function onLoad() and onClose() which are redefined in each page
Index.php call the pages and execute the onLoad
Basically, i preload the page in a hidden div, i execute the predefined $.onLoad function and the i put the loaded content into a visible div
My question is only about the onLoad() scope, i want to remove code from the jquery eval seq when i change page, but i need a way to define it in the page.php file without knowing the container
The eval/seq is probably the eval queue of jquery, can't found info about that, just obtain with firebug...
In 2 words, i would like to be able to remove injected dom and script when i change context (pages)
index.php
$.onLoad = function() {}
$("#blabla").onChange(function() {
$("#data_iframe").load(chaineUrl, {}, function(responseText, textStatus, XMLHttpRequest) {
$("#data_iframe").ready(function() {
$("#data_div").children().remove();
$.onLoad();
$("#data_iframe").children().hide().appendTo($("#data_div")).show(); $("#data_iframe").children().remove();
$.onLoad = undefined;
}
});
});
page.php
<script>
$.onClose = (function(){
$('#container').blablabla();
//alert("test");
});
$.onLoad = (function(){
$('#container').blablabla();
}
</script>
The problem is that the jquery EVAL/SEQ keep growing each time a page is opened
and there are some side-effect like calling multiple time a function...
I guess its a scope problem so can you help me correct my code
(i've try with or without the $ but doesn't change anything)
just for information
<div id="data_div"></div>
<div id="data_iframe"></div>
Thanks
I usually use $(document).ready instead of onload. No need to do the "onload" trigger in load complete function. The ready function within the page.php will do the same job.
And how about direct load into data_div?
index.php
$("#blabla").onChange(function() {
$("#data_div").load(page.php);
});
page.php
<script>
$(document).ready(function() {
$('#container').blablabla();
});
</script>
I didn't try page close function before, may be it is not what you want. But you can try:
<script>
$(document).ready(function() {
$('#container').blablabla();
$(window).unbind('unload');
$(window).unload(function(){
$('#container').blablabla();
//alert("test");
})
});
</script>

Categories

Resources