I want to toggle between a div on a pop-up modal form. The problem i see is the document.ready() function on the modal page, which tries to load the parent form. It distorts the whole page and tries to show automatically if i load the main parent form. Is there something like div.ready()? how do i include this code on my pop up modal form?
Toggle code here
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
Yes, such expressions like DOM_ELEMENT.ready() exists and very useful in scenarios like the one you are facing right now.
Update:
I found that this plugin is doing what you need :
jQuery.elementReady()
Examples:
1:
Change the source of a specific image as soon as it is loaded into the
DOM (before the whole DOM is loaded).
$.elementReady('powerpic', function(){
this.src = 'powered-by-jquery.png';
});
2:
If you want to have the jQuery object instead of the regular DOM
element, use the $(this) function.
$.elementReady('header', function(){
$(this).addClass('fancy');
});
3:
Chain multiple calls to $.elementReady().
$.elementReady('first', function(){ $(this).fancify(); })
.elementReady('second', function(){ $(this).fancify(); });
4:
Use the ‘$’ alias within your callback, even in noConflict mode.
jQuery.noConflict();
jQuery.elementReady('header', function($){
$(this).addClass('fancy');
});
5:
Change the polling interval to 100ms. This only works if $.elementReady() has not yet been called.
$.elementReady.interval_ms = 100;
Related
I'm trying to use jQuery's .load function to load a div element from one page to another. But it makes the whole script only run once.
I've seen a few similar question here on SO, but none of these seem to fit my problem. I've tried things such as changing .click to .one as well as adding new Date().getTime() and $.ajaxSetup({cache: false}) to prevent cashing. None these works.
I'm not sure what the problem is, but it seem to occur only when I use the .load function. I've attached a simplified version of my script.js file below:
script.js
$(function() {
$("a").click(function(e) {
var url = $(this).attr("href");
$("body").load(url + " .container");
e.preventDefault();
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Index page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h2>This is the index page</h2>
Index page
<br>
Second page
</div>
<script src="script.js"></script>
</body>
</html>
The second.html looks pretty much the same as the index.html file.
Your event handlers are only bound to the anchors on the first page, I would use event delegation so that I would not have to bind the handlers every time a new page is loaded.
$(document).on('click', 'a', function(e){
var url = $(this).attr("href");
$("body").load(url + " .container");
e.preventDefault();
});
I had the same problem. I resolved it with calling the Javascript after the load() again. Here is the snippet
$.getScript('<your script>');
I have a page like this (index.php):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<?php //add .min.js file when all programming done ?>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/_jquery.mobile-1.4.0.css">
<script src="js/_jquery-2.1.0.js" type="text/javascript"></script>
<script src="js/_jquery.mobile-1.4.0.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/sign.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" id="nav"><?php include_once 'nav.ui.php'; ?></div>
<div data-role="main" class="ui-content" id="ui">
<input type="button" id="optionUpdate">
</div>
<div data-role="footer" id="footer"><?php include_once 'footer.ui.php'; ?></div>
</div>
</body>
</html>
And in main.js I have:
$('#optionUpdate').click(function () {
optionUpdate();
});
function optionUpdate() {
alert('hi');
}
The problem is: when I click on the button, the event is not run. But if
add the onclick event to the button with optionUpdate();, it works!
Why?
How can I fix this?
In jQuery Mobile, you need to wrap functions in page events not in .ready(). The latter fires once per document, where page events fires per page / view.
If you are using jQuery Mobile with Ajax enabled and have multiple pages or load external pages, if you use .ready(), functions inside it will execute once only.
Important: Use $(document).bind('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.
The equivalent to .ready() in jQuery Mobile is pagecreate (pageinit is deprecated as of 1.4). Wrapping functions in pagecreate ensures that those functions fire whenever pagecreate event occurs.
$(document).on("pagecreate", function () {
$('#optionUpdate').on("click", function () {
optionUpdate();
});
function optionUpdate() {
alert('hi');
}
});
You can bind specific functions to a specific page by delegating event to that page.
$(document).on("pagecreate", ".selector or #page_ID", function () {
/* functions for this page only */
});
Demo
Note: this answer is more about jQuery than jQuery Mobile. With the mobile library, code that needs to run when the page is updated by the framework should use page events as described in other answers.
Because your "main.js" file is imported in the <head> of your page, when the code runs it won't find the "optionUpdate" element in the page: the browser will not have parsed that yet.
Three options:
Use event delegation:
$(document).on('click', '#optionUpdate', optionUpdate);
Use a "ready" handler:
$(function() {
$('#optionUpdate').click(function () {
optionUpdate();
});
});
Move your <script> tag to the end of the <body>.
You're trying to reference elements before they exist. Wrap your code in a DOM ready handler:
$(document).ready(function() {
$('#optionUpdate').click(function () {
optionUpdate();
});
});
i'm using HTML code and i wan't to show un Alert Message or alert box, i don't know what it is called, but a message with a "OK" button.
i want to show this alert when the page is loaded.
How do i do this?
And how to do this with a title in the Alert box?
Do I need JavaScript? if no, How to do this without javascript?
Jonathan
Yes you need javascript. The simplest way is to just put this at the bottom of your HTML page:
<script type="text/javascript">
alert("Hello world");
</script>
There are more preferred methods, like using jQuery's ready function, but this method will work.
You can use a variety of methods, one uses Javascript window.onload function in a simple function call from a script or from the body as in the solutions above, you can also use jQuery to do this but its just a modification of Javascript...Just add Jquery to your header by pasting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to your head section and open another script tag where you display the alert when the DOM is ready i.e. `
<script>
$("document").ready( function () {
alert("Hello, world");
});
</script>
`
This uses Jquery to run the function but since jQuery is a Javascript framework it contains Javascript code hence the Javascript alert function..hope this helps...
you need a tiny bit of Javascript.
<script type="text/javascript">
window.onload = function(){
alert("Hi there");
}
</script>
This is only slightly different from Adam's answer. The effective difference is that this one alerts when the browser considers the page fully loaded, while Adam's alerts when the browser scans part the <script> tag in the text. The difference is with, for example, images, which may continue loading in parallel for a while.
If you use jqueryui (or another toolset) this is the way you do it
http://codepen.io/anon/pen/jeLhJ
html
<div id="hw" title="Empty the recycle bin?">The new way</div>
javascript
$('#hw').dialog({
close:function(){
alert('the old way')
}
})
UPDATE : how to include jqueryui by pointing to cdn
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
For making alert just put below javascript code in footer.
<script>
$(document).ready(function(){
alert('Hi');
});
</script>
You need to also load jquery min file.
Please insert this script in header.
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.0.min.js'></script>
<script type="text/javascript">
window.alert("My name is George. Welcome!")
</script>
<script>
$(document).ready(function(){
alert('Hi');
});
</script>
You can try this.
$(document).ready(function(){
alert();
$('#reportVariablesTable tbody').append( '<tr><td>lll</td><td>lll</td></tr>');
});
I have jquery issue, Kindly see my jquery code:
$(document).ready(function(){
$(".toggle_container").show();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
My .toggle_container is shown always its good, But I want to close it first time, when page load. Can you please provide me any solution?
I dont want to use $(".toggle_container").hide(); function for this problem because when i click on href then .toggle_container should not hide, It should open.
Regards.
You can just add attribute
style="display:none"
to your element .toggle_container.
Then on first call of $(document).ready it will be shown.
The full test example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
</script>
</head>
<body>
<h2 class="trigger">Toggle</h2>
<div class="toggle_container" style="display:none">Container</div>
</body>
</html>
Note: there`s no $(".toggle_container").show(); on $(document).ready
remove the
$(".toggle_container").show();
from your $(document).ready function.
in html part add style="display:none" for the toggle_container div.
check the #HCK s reply. he is clearly mentioned it..
Once the document gets loaded, a alert box will be prompted "page loaded".
$(document).ready(function(){
alert('page loaded'); // alert to confirm the page is loaded
$('.divClassName').hide(); //enter the class or id of the particular html element which you wish to hide.
});
I am trying to use jQuery's .load function to dynamically load content into my webpage. This seem so simple, but I cannot make it work. To try and figure it out, I made a test page with just basic structure, but the external content still won't load:
jquery.html
<html>
<head>
<title>JQuery Test</title>
<script src="jquery1.5.min.js"></script>
</head>
<body>
<script>
$('#foo').load('test.html');
</script>
<div id="foo"></div>
</body>
</html>
test.html
<p>Text text</p>
I'm sure I have made a tiny error, but I can't find it anywhere!
You need to encapsulate your script in the $(document).ready() otherwise #foo won't exist when the script is executed:
<script>
$(document).ready(function(){
$('#foo').load('test.html');
});
</script>
You need to wait for the document to be ready before you can access the DOM. Just add a $(document).ready() around your original code:
<html>
<head>
<title>JQuery Test</title>
<script src="jquery1.5.min.js"></script>
</head>
<body>
<script>
$(document).ready( function() {
$('#foo').load('test.html');
});
</script>
<div id="foo"></div>
</body>
</html>
or if you want a shorter code:
$(function() {
$('#foo').load('test.html');
});
Informally, what's happening is that, as your browser reads the code you wrote, it's drawing its contents as it goes along. When it reaches your <script> tag, it executes it. But when $("#foo") gets executed, the browser's still processing the <script> and hasn't reached the part of the code where you told it there's a div called foo, so the browser doesn't know it exists, and jquery will just find nothing.
Of course, the idea that the browser will just sequentially read your code and render it as it goes is naive at best, so while it might seem that just moving the <script> tag to the bottom of the code would work, you're not actually guaranteed it will work. Instead, the browser will notify you when it's done drawing the page by firing a load (and possibly a DOMContentLoaded) event. So all code that depends on the whole html being drawn should be executed in an event handler bound to those events.
jQuery makes waiting for the page to be loaded easy, just use something like this:
$.ready(function() {
doStuff();
});