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 ?
Related
I want to call a jQuery function from an HTML <body> tag. Here's my HTML:
< body bgcolor="#ffffff" onLoad="???" >
How would I call a jQuery function when the page is loaded? My jQuery function looks like this
jQuery(function($){
var input_id;
//code
});
whatever code you write in the below method(block) would be executed automatically after the DOM load. You need not call this from HTML component again.
$(document).ready(function() {
//your code
});
This topic has been covered here before.
You are most likely looking for
$(document).ready(function() {
var input_id;
//code
})
Or
$(window).load(function($) {
var input_id;
//code
});
If you are curious about the difference between these two, see the JQuery documentation on the topic.
Also note that <body onload="">, which you seem to be trying to use, is generally not compatible with the above JQuery.
$(function() {
// code
});
This is shorthand for document.ready() so it will wait for the body to finish loading before executing.
HTML: You're on the right track, but you do not have to have put JS in the body tag. See the JS options below:
<body bgcolor="#ffffff">
JS
$(window).load(function($) {
functionA(arg1, arg2, arg3);
});
This will fire up functionA() once the DOM including graphics have fully loaded.
OR
$(document).ready(function($) {
functionA(arg1, arg2, arg3);
});
This will fire functionA() once the DOM has loaded and before any graphics finish loading.
As of Jquery 3, the following syntax is depreciated:
document.ready(function(){
//code
});
The recommended alternative in Jquery 3 is to use the following syntax (which in previous versions was just considered a shorthand syntax):
$(function(){
//code
});
Here is is the official Jquery explanation for why the first syntax was depreciated and is no longer recommended (https://api.jquery.com/ready/):
... The selection [of document] has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior.
document.ready(function($){
// here you go
})
When I load Bootstrap popver content with ajax, the popover is not showing.
Javascript:
var id = 1;
$.post("load.php?pageid",
{
pageid:id;
},
function(data,status){
document.getElementById("body").innerHTML=data;
});
HTML response:
hover for popover
<script>
$(function ()
{ $("#example").popover();
});
</script>
When I place the HTML response above directly in the <body id="body"></body> code, the popover works fine. I dont understand what is going wrong here.
The problem is that you're setting up the popover inside of the function $(). Rather than
$(function ()
{ $("#example").popover();
});
It should be just
$("#example").popover();
Or perhaps better
$(document).ajaxComplete(function() {
$("#example").popover();
});
The reason being that any function inside of $() is run when the document is first finished loading, when the "document ready" event is fired. When that code is pasted inside of the original HTML, it works because it's present when the document finishes loading.
When it's the response from an AJAX call, it won't run inside of $(), because the "document ready" event already fired some time ago.
with the help of jQuery you can initialize all things that needs to be initialized using
$(document).ajaxSuccess(function () {
$("[data-toggle=popover]").popover();
$("[data-toggle=tooltip]").tooltip();
// any other code
});
inspired from Olaf Dietsche answer
<script>$(function () { $('[data-toggle="tooltip"]').tooltip()});</script>
Add this at the end of whatever you are loading in with ajax. You should already have this somewhere to opt-in to the tooltip, but put it again to re-initialize the tooltip.
I'm developing a template. While doing so, i encountered a error. I have placed a button that toggles the sidebar from invisible to visible state.I have used the right codes to initiate the jquery response.But the sidebar doesn't toggle.Help me solve this issue
html
<a id="click-slide">
<span>
\
</span>
</a>
Javascript
<script type="text/javascript">
//<![CDATA[
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
//]]>
</script>
My site
i have used it with and without Cdata.Where did i go wrong
You should put your javascript code into document.ready. The reason behind document.ready is you put your javascript code before the a#click-side element. That means when your javascript executed, in the page there is no element called a#click-side. When we put into document.ready it downloads your javascript and all document gently and then starts executing your javascript code.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
//]]>
</script>
You've not wrapped your code in a document.ready event handler. Change it to this...
jQuery(function($) {
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
It was trying to assign the click event handlers before the page was loaded, so none of the elements actually exist at that time. Wrapping in the ready handler, as above, means it will only run the script when the page has finished loading.
Added your code when document gets ready.
<script type="text/javascript">
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
</script>
For example, bootstrap put the jQuery at the end of the html, e.g. http://twitter.github.com/bootstrap/examples/starter-template.html
What if, you want to insert a code block before the loading of jQuery script itself, e.g.
<div id="test1"></div>
<div id="test2"></div>
<script>
$(document).ready(function() {
$('#test1').html('test1'); // not work, any workaround? the code must be put before..
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#test2').html('test2'); // work
});
</script>
Test: http://jsfiddle.net/e5HKZ/
I want both test1 & test2 also displayed.
Any idea?
If you really have to put jQuery code before the line that loads jQuery itself, assign the function to document.ready.
window.document.ready = function() {
$('#test1').html('test1');
};
When jQuery has been loaded, it reads the variable and executes the function at DOM ready.
Note that this is most likely undocumented behavior and might not work reliably or in future jQuery versions.
Demo: http://jsfiddle.net/e5HKZ/1/
I have this code
<script type="text/javascript">
$("#main_photo_display").load(function(){
alert("loaded");
});
</script>
<div id="main_photo_display"></div>
I need it to do something once that div has loaded. Currently it does nothing. When I substitute window for "#main_photo_display" it works. I have googled and I keep coming across .load as how to check if a page element has been loaded.
The load event is sent to an element when it and all sub-elements have
been completely loaded. This event can be sent to any element
associated with a URL: images, scripts, frames, iframes, and the
window object.
Source: http://api.jquery.com/load-event/
Further down on the same page they state:
It doesn't correctly bubble up the DOM tree
So you can't delegate this event, the event handler must be attached to the element on which the load event fires.
Or you can run the script after the DOM is ready like so:
<script type="text/javascript">
$(document).ready(function() {
$("#main_photo_display").load(function(){
alert("loaded");
});
});
</script>
<div id="main_photo_display"></div>
Sorry I think I read it wrong :) You need this:
<script type="text/javascript">
$(document).ready(function() {
alert('loaded');
});
</script>
A plain div does not have a load event except when you are loading content into it with ajax (which I don't think is what you are doing here). If your code is physically located after the div in your page, then the div will be available and ready for your code to operate on it (you don't have to check anything).
If your code is located before the div in the page, then you can use jQuery's .ready() method to know when it is safe to access the div:
<script type="text/javascript">
$(document).ready(function() {
// safe to access $("#main_photo_display") here
});
</script>
<div id="main_photo_display"></div>
I don't think a DIV fires a loaded event. If there was a blank.gif image within the DIV, you could attach the $.load() function to that.
<div id="main_photo_display">
..... Other Content .....
<img class="loadcheck" src="blank.gif" width="0" height="0" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#main_photo_display img.loadcheck").load(function(){
alert("loaded");
});
});
</script>
You can't do that: load events are not fired on just any HTML element, only on those that require loading an external resource.
The best way to ensure the element is loaded is to put the script tag after it in the markup.
<div id="main_photo_display"></div>
<script type="text/javascript">
alert("loaded");
</script>
The Javascript will not be run before the div is parsed.
I have a sort of workaround, and it is sloppy (please comment out if you have notes).
It is useful when you have a javascript out of your control which appends elements to your dom on a page load.
$(function () {
var counter = 0;
var intervalId = setInterval(function () {
$(document).mouseover()
}, 105);
var unbind = function () {
$(document).off('mousemove', '#label');
$(document).off('mouseover');
window.clearInterval(intervalId);
};
$(document).mouseover(function () {
$('#label').trigger('mousemove');
counter++;
if (jivositecounter > 200) unbind();
});
$(document).on('mousemove', '#label', function () {
console.log(counter);
...doing our stuff when #label appears
unbind();
});
});