JQuery in external JS file - javascript

I am trying to execute some JavaScript when my html page loads. The top method populateSelectWithDates() is called, but the jquery portion does not. Any ideas?
function doInitialPopulation() {
//This works
populateSelectWithDates();
//This does not
$(document).ready(function() {
alert('ok');
//Credit to: http://www.pewpewlaser.com/articles/jquery-tablesorter
// Adds sort_header class to ths
$(".sortable th").addClass("sort_header");
// Adds alternating row coloring to table.
$(".sortable").tablesorter({widgets: ["zebra"]});
// Adds "over" class to rows on mouseover
$(".sortable tr").mouseover(function() {
$(this).addClass("over");
});
// Removes "over" class from rows on mouseout
$(".sortable tr").mouseout(function() {
$(this).removeClass("over");
});
});
}

In your HTML file, make sure you are including the scripts in this order:
<!-- first include jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- then include your script(s) -->
<script src="YOUR_SCRIPT.js" type="text/javascript"></script>

I dont see any use of $(document).ready(function() { try removing it. And let us know if alert('ok') works. Also can we see the function populateSelectWithDates() ?

Related

JQuery: Change image on page based on class in body

I have a wordpress page where I want to display a featured image on the header of the homepage, but no other pages. I set up a script to read whether the body tag contains the "home" class and display an image based on that. The code looks like this:
<script>
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
</script>
What's wrong with this script?
Try to wrap your code into function fired on DOM ready:
<script>
$(function() {
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
</script>
More info
jQuery needs to know when to start the function. Start it after the document is ready.
$(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
Did you include jQuery library in your header section? Also some times $ symbol may conflict in wordpress, write full jQuery term when initialize jQuery this way:
jQuery(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});

Editing div code added by Jquery Append function

Ive successfully appended a html file to my website containing only the menu and title image.
I wanted every web page on my website to have the same menu , title and structure.
Everything works fine but I have no idea how to edit a div that I added using append function (jquery).
for example: lets say that I appeneded a file named "include.html" and that file contains a div named "website". is there any way I can add code/content to that DIV after appending it ?
I need access to the DIVS appended by the APPEND function in order to add unique texts/information for each page..
here is some code:
A sample page :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cstyles.css">
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript' src='menu2.js'></script>
<script type='text/javascript' src='menu_load.js'></script>
</head>
<body>
<script>loadContent();
$(document).on('mouseenter', "#menulist", function() {
mainmenu();
});
</script>
</body>
</html>
here's the menu2.js code:
function mainmenu() {
$(" #menulist li").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"}).show(300);
},function() {
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function() {
mainmenu();
});
here's the menu_load.js code:
function loadContent() {
$("body").append($("<div id='index'>").load("include.html"));
}
The reason Im trying to do that is that I want to add unique information on the main DIV containing the website.. If theres a better way doing that (without JQUERY append) i would love to know..
Thanks in advance!
use html() or text() .. to append content inside div with id website.. after the include.html is appended on load callback function
callback function: If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.
try this
function loadContent()
{
$("body").append($("<div id='index'>").load("include.html", function() {
$("#website").text("HELLO"); // OR $("website").html("HELLO");
});
}
Yes. Find the id (or some other jquery way of finding that div), and just call a function on the load:
function loadContent() {
$("body").append($("<div id='index'></div>").load("include.html", {}, function() {
$("#div_id").html(new_content);
});
}
Let me know if you have any problems.
You can pass a callback function to the load(...) call in jQuery. So, you could do something like this:
$("body").append($("<div id='index'>").load("include.html", function () {
$(this).append("<div>your html content</div>");
}));
This will insert the text your html content to the end of the div. Obviously, you could use something other than append if you wanted it to be somewhere else.

Inserting javascript in to html file

How can I run this script, tried to run it in html file, but it doesn't seem to work..
I want this code to be in single html file, is it possible? or do I need different files?
http://jsfiddle.net/ambiguous/jcnMa/1/
<script type="text/javascript">
$('.question, .answer')
.css("display", "none");
$('.section')
.click(function ()
{
var $others = $('.question:visible')
.not(this);
$others.next('.answer')
.hide();
$others.slideToggle(500);
$(this)
.next('.question')
.slideToggle(500);
});
$('.question')
.click(function ()
{
$(this)
.next('.answer')
.slideToggle(500);
});​
</script>
First make sure you're including the jQuery library:
<script src="path/to/jquery.min.js"></script>
Make sure you're not including the jQuery within those tags, so you've got:
<script src="path/to/jquery.min.js"></script>
<script>
/* Your jQuery here */
</script>
And then ensure you're using a $(document).ready(), or $(window).load(), handler:
<script src="path/to/jquery.min.js"></script>
<script>
$(document).ready(
function(){
/* Your jQuery here */
});
</script>
The requirement for the $(document).ready() (or $(window).load()) is to ensure that the DOM is constructed, and the elements to which you want to bind events are present. Without those handlers the browser will try to bind events as soon as it encounters your script, without waiting for the elements to exist or be created, which results in non-functioning event-binding.
put this code before the body close tag
Your Code
</body>
I would go this way:
<head>
...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.question, .answer').css("display", "none");
$('.section').click(function ()
{
var $others = $('.question:visible').not(this);
$others.next('.answer').hide();
$others.slideToggle(500);
$(this).next('.question').slideToggle(500);
});
$('.question').click(function ()
{
$(this).next('.answer').slideToggle(500);
});​
});
</script>
...
</head>
First you need to ensure jquery lib is loaded, then you might notice that your code is referring to object in DOM, so you can access them only when the page is loaded (or after they are entered in the body code). I prefer to store my js code in the head section whenever it's possible.

Is there an event for when the content of a HTML element has fully loaded?

I have a <div> containing a number of images. I want to fade this <div> in after all contained images have loaded, as they make up one unit that I'd rather have display cleanly instead of momentarily all over the place (while loading).
Is there something similar to window.onLoad that I can apply to a certain element?
e.g.
$("#id").onLoad(function()
{
$(this).fadeIn(500);
});
var images = $("#id img");
var imgCount = images.size();
var i = 0;
images.load(function() {
if(++i == imgCount){
$("#id").fadeIn(500);
}
});
one way of doing it is to add this in the head section of the HTML document:
$(function() {
$("#id").fadeIn(500);
});
the idea behind $(function() { /* code */ } ) is that it will be ran when the DOM is loaded, you can have as many of this as you want in your head section, but it would be more readable IMHO if you only have one.
Another way of doing it is to have a main javascript file that will be ran for each page when it's ready, let's call the HTML file index.html and the javascript file index.js
index.html
<!doctype html>
<head>
<!- include the javascript/css/etc. files -->
<script type="text/javascript" language="javascript">
$(function() {
// the following function exists in index.js file
onPageLoadedIndex();
});
$(function() {
// this code will also be executed when the DOM is ready
// however I strongly recommend having only one of these
});
</script>
</head>
<body>
<!-- snip -->
</body>
</html>
index.js
function onPageLoadedIndex() {
// some code
$("#id").fadeIn(500);
// more code
}
In this way you'll be avoiding having too much javascript in the HTML page
You probably already know how to assign a function to run on page load. In case you don't, try:
window.onload = function() {
$('div').fadeIn(500);
}
jQuery only solution:
$('div img.class').load(function() {
// img.class is your largest (in bytes) image.
$('div').fadeIn(500);
});
try this:
$("#id").load(function()
{
$(this).fadeIn(500);
});
good luck

Cannot call method 'click' of undefined

I am trying to implement a jQuery 'slide toggle'. At the top of the page (in the header) I have included:
<script src="http://code.jquery.com/jquery-latest.js"></script>
Then the code of the area is:
More
<div class="toggler">
<div id="morepanel" class="ui-widget-content ui-corner-all">
<p>Text</p>
</div>
</div>
<script src="js/toggle.js" type="text/javascript"></script>
The toggle.js contains:
$('#morebutton').click(function () {
$('#morepanel').slideToggle('slow', function () {
// Animation complete.
});
});
When I click it I get the error:
Toggle.js:1Uncaught TypeError: Cannot call method 'click' of undefined.
I can't at all figure out what to do. The divs are nested within further divs, and content holders, etc, but I can't see why this would be an issue.
You should wrap your code in a $(function() {}); statement. This will make sure it will execute after the DOM loads.
Currently, your code is being executed before the DOM is fully built, resulting in a reference to a DOM-element that does not yet exist.
Example:
$(function() {
$('#morebutton').click(function () {
$('#morepanel').slideToggle('slow', function () {
// Animation complete.
});
});
});
Hotlinking is disabled for files on the jQuery site. The file won't load, so jQuery won't be loaded.
Use one of the CDNs instead.
E.g.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
jQuery is probably not loaded at this point. Wrap your call as such:
$(document).ready(function() {
$('#morebutton').click(function () {
$('#morepanel').slideToggle('slow', function () {
// Animation complete.
});
});
})
It would seem that '#morebutton' isn't actually selecting anything.
Have you tried put a breakpoint on with Firebug or the IE/Chrome equivalents and run the selector from the Console ?

Categories