Run script in document load - javascript

I have a dialog in jQuery and I want to show the dialog when the document loads. But I don't want to put code in <body onload="showdialog();">. I want to put javascript in the main div or the footer div that works like onload in the body event. Any way to do this?
<body onload="$('#dialog').slideDown('slow');">
<div id="dialog">Dialog</div>
<footer></footer>
</body>
I want this:
<body>
<div id="dialog">Dialog</div>
<script> show dialog code in load page </script>
<footer>
// or this place =>
<script> show dialog code in load page </script>
</footer>
</body>

You want to take a look at the ready function, like so:
$(document).ready(function() {
$('#dialog').slideDown('slow');
});

Related

Jquery mobile fails to load styles after change page

Am creating a mobile application using jquery mobile but after loading an external page(loggedin.html) via changePage the javascript file in the external page arent loaded but only do so after refreshing the page(loggedin.html...loaded via changePage).How can the external script be loaded without page refresh
I have two sets of file:
index.html and loggedin.html.
CODE:
1.index.html
<body>
<div data-role="page" id="indexpage">
<div data-role="content">
Load page 2
</div>
</div>
<script src="custom/scripts/index.js" type="text/javascript" ></script>
</body>
The script (index.js)
$('document').ready(function(){
$('#next').click(function(){
$.mobile.changePage('loggedin.html')
});
});
2.Loggedin.html
<body>
<div data-role="page" id="loggedin">
<div data-role="content">
You are in
</div>
</div>
<script src="custom/scripts/loggedin.js" type="text/javascript" ></script>
</body>
Script(loggedin.js)
$('document').ready(function(){
$('document').on("pageshow","#loggedin",function(){
console.log('loaded');
});
});
Base on this source : http://demos.jquerymobile.com/1.3.2/faq/scripts-and-styles-not-loading.html
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).
The solution to this problem is : on the next page that is (loggedin.html)..That is placing the script on the page after the (data-role content/footer)
<body>
<div data-role="page" id="loggedin">
<div data-role="content">
You are in
</div>
<script type="text/javascript">
$('#loggedin').on("pagecreate",function(){
console.log('loaded');
......{Continue with stuff}
});
</script>
</div>
</body>

Detect changepage on jquery mobile

How can I execute code when I change page with the .changePage() function?
For example I use this code:
$.mobile.changePage( "index.html#pageTwo" );
And when pageTwo is loaded I want to do this:
alert("Test");
In your <head> .. </head> put this:
// Jquery loaded here
<script>
$(document).on("pageshow","#pageTwo", function() {
alert("Test");
}
</script>
// jquery mobile loaded here
Notes:
The code above must be placed AFTER Jquery is loaded and BEFORE jquery mobile is loaded.
The code example above assumes that your index.html page contains a div with at least the attributes of data-role="page" and id="pageTwo":
<div data-role="page" id="pageTwo"> This is page two content </div>
Jquery mobile only parses/uses anything in the <head>..</head> section of the FIRST PAGE THAT IS LOADED! To ensure that all of the code required for all pages in your mobile site are loaded, regardless of which page the user lands on first, you should structure all your pages like this:
<html>
<head>
<script src="path/to/jquery.js"> // load jquery
<script src="path/to/common.js"> // all jquery mobile page event bindings are placed in here
<script src="path/to/jquery_mobile.js"> // load jquery mobile
</head>
<body>
<div data-role="page" id="pageOne"> This is page one content </div>
<div data-role="page" id="pageTwo"> This is page two content </div>
</body>
</html>

jQuery stops working after loading content into a div

For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.

JQuery - Binding / Appending to document.ready

I am working on a ASP.NET MVC 3 application that is using JQuery. In this application, I have my _Layout.cshtml file and MyView.cshtml. In _Layout.cshtml I have something like the following:
<div id="wrapper" style="background-color:Gray; height:100%;">
<div id="content" style="background-color:Silver;">
#RenderBody()
</div>
<div id="footer" style="background-color:Silver;">
Footer
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Do stuff
alert("Root Loaded");
});
</script>
In MyView.cshtml, I have the following:
<div id="contentDiv">
<!-- Page content is here -->
</div>
<script type="text/javascript">
$().ready(function () {
alert("Page Loaded");
});
</script>
At this time, the "Page Loaded" message box appears before the "Root Loaded" message. I kind of understand why this is happening. However, I would like to write a method in MyView.cshtml that gets called after the root document.ready function is called. Am I making sense? Is there a way to do this? If so, how?
Thank you
This should fire after all elements on the page are loaded, so, it should be later, than the ready event.
$(window).load(function () {
alert("Whole page Loaded");
});)
You might want to consider Queuing as suggested in the answer below:
jQuery multiple document ready queue order

How to display progress bar until whole aspx page is load?

I have a master page Root.master and a page default.aspx . I want to display progress bar until whole default.aspx page is loaded .
I tried following code:-
<html>
<head><title>xx</title>
</head>
<body style="visibility:hidden;" onload="function(){document.body.visibility='visible'}">
<img src="xxxx.gif" style="visibility:visible !important">
</body>
</html>
But problem is that I do not have body on default.aspx , it is on root.master , if we put it on root.master, it apply all pages which inherit from root.master .
So there is another for it .
Please suggest me usable link or samples.
in your sample if you are using jQuery, you can use following re-factoring to your code
$(document).load(function(){
$('body').css('visibility','visible');
}
You can add a reference to jQuery and then do a little code something like:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(){ // Wait until the page has finished loading
if ($(".ProgressBar")) // Detect the element with class ProgressBar
{
$(".ProgressBar").hide(); // If found, set it to be display:none;
}
}
</script>
</head>
<body>
<div class="ProgressBar">
<img src="Whatever.gif" alt="Please wait..." />
</div>
</body>
</html>
Also doable without jQuery but it's just so much easier to use it ;)
That way the progress bar gif loads, and once the page is done it is set to invisible.
I hope that might help! Good luck.
You don't mention any libraries, so here is a pure js solution:
http://jsfiddle.net/TTU7v/
The idea is to put the script as close to the opening body tag (but after it!) as possible:
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
body.style.visibility = "hidden";
window.onload = function(){body.style.visibility = "visible";};
</script>

Categories