I have this code that works on this site: http://jsfiddle.net/FPNBe/2/
However, the exact code doesn't work on my site. (With the exception I had to add
<script TYPE="text/javascript"> & < /script> around the javascript.)
Is there something I'm missing?
Wrap the script inside $(document).ready()
$(document).ready(function () {
$('#password, #confirmpassword').keyup(function() { checkPass(); } );
});
This line:
$('#password, #confirmpassword').keyup(function() { checkPass(); } );
Must only be executed after the elements in question have been added to the DOM (Document Object Model) by the browser, so that jQuery can find them. To wait until the DOM is ready, meaning that all the page's elements are accessible, you can put this line inside a function, which you can pass to jQuery:
$(document).ready(function() {
$('#password, #confirmpassword').keyup(function() { checkPass(); } );
});
Or a bit shorter:
$(function() {
$('#password, #confirmpassword').keyup(function() { checkPass(); } );
});
Related
I have some legacy jQuery executing in the page that can't be moved i.e.
jQuery(document).bind('click', function(){
console.log('click');
});
Now that loading of jQuery is at the bottom of the page 'AFTER' the above inline code, the page errors 'jQuery is undefined'
I would like to use a pattern similar to this:
var deferInlineScripts = [];
window.$ = function(inlineFunction) {
deferInlineScripts.push(inlineFunction);
};
Seen working here: https://jsfiddle.net/xpvt214o/165864/
that takes the inline scripts and executes them (Once jQuery is loaded') using
for (i = 0; i < deferInlineScripts.length; i++) {
deferInlineScripts[i]();
}
But unlike the Fiddle my legacy code doesn't have the $(function(){}); and can't be moved, changed or have anything wrapped around it i.e
jQuery(document).bind('click', function(){
console.log('click');
});
jQuery(document).ready(function(){
console.log('ready');
});
Here is the Fiddle https://jsfiddle.net/xpvt214o/165972/ that I would like to fix so the the Bind & Ready functions execute after jQuery is loaded.
Initially define window.jQuery as a function that returns a Proxy. This proxy will allow subsequent arbitrary psuedo-propery lookups (such as .bind in jQuery(document).bind) to be performed. The properties accessed and the arguments the resulting function is eventually called with can be stored in an array and then executed once jQuery is properly loaded.
<script>
const deferCallHandler = {
get: function(jqFirstArg, jqProp) {
return function(...secondArgs) {
deferredInlineScripts.push({
jqFirstArg,
jqProp,
secondArgs,
});
}
}
};
const deferredInlineScripts = [];
window.jQuery = function(jqFirstArg) {
return new Proxy(jqFirstArg, deferCallHandler);
}
document.addEventListener('DOMContentLoaded', function(){
// window.jQuery has now been properly assigned to the true jQuery object
deferredInlineScripts.forEach(({ jqFirstArg, jqProp, secondArgs }) => {
jQuery(jqFirstArg)[jqProp](...secondArgs);
});
});
/* Can't change this code */
jQuery(document).bind('click', function(){
console.log('click');
});
jQuery(document).ready(function(){
console.log('ready');
});
</script>
<div>some element</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a function that works on the body onload="" but I need it to load before other elements of the page and I'm trying to add the document ready function in the header but it just doesn't seem to work.
f1menu() {
$('.menuH').hover(
function() {
$('.menuC').stop().animate({width: '90px'},333)
},
function() {
$('.menuC').stop().animate({width: '-0'}, 333)
}
);
}
$(document).ready(function() {
f1menu();
});
So the onload function that works is just this one below:
onload="$('.menuH').hover(function() {$('.menuC').stop().animate({width: '90px'}, 333)}, function() {$('.menuC').stop().animate({width: '-0'}, 333)});"
Note that the following answer was provided before the OP changed the question.
You should write:
function f1menu(){}
not,
f1menu(){}
In addition, you can streamline your document.ready code by simply passing the function that you want called when the document is ready, directly to jQuery:
$(function() {
$('.menuH').hover(
function() {
$('.menuC').stop().animate({width: '90px'}, 333);
},
function() {
$('.menuC').stop().animate({width: '-0'}, 333);
}
);
});
UPDATE:
After OP revised the question, the solution (not a recommended approach by the way) would be to just insert the script into the body of the page, but AFTER any elements that the function references, such as:
<body>
<!-- elements that the code references must come before the code -->
<script>
// .menuH and .menuC elements must have already been loaded into DOM
$('.menuH').hover(
function() {
$('.menuC').stop().animate({width: '90px'},333)
},
function() {
$('.menuC').stop().animate({width: '-0'}, 333)
}
);
</script>
<!-- Rest of HTML -->
</body>
It doesnt know f1menu is a function since you didnt declare it as one. Try this:
function f1menu(){
//logic
}
I'd like to perform a function on only one page of my site where the body has an ID of #modulePage16460412. I have the script below that is not working.
<script type="text/javascript">
if($('#modulePage16460412').length > 0 ) {
$(function()
{
$(window).bind('load',
function(e)
{
window.setTimeout(function()
{
$.colorbox({opacity:0.3, href:"/storage/support/colorbox/offer.html"});
}, /*timeout->*/ 2000);
});
});
}
</script>
Would it also be possible to only execute the function the first time they visit the page and not execute again if they come back to that page?
Any help would be appreciated.
You can just put the function on the body load selecting it with the ID specified... if no element exists with this ID then the function will never fire.
$('#modulePage16460412').load(function() { // this will not be called unless an element with that ID has loaded into the DOM
// ... your code here.
});
and to touch on the 'single execution' part (this really should be a new question... but ohh well) you can use localStorage to persist the setting.
http://jsfiddle.net/rlemon/ET9Zg/
in your case something like
if( !getData('someKey') ) {
// ok so they have not been here.
setData('someKey', 1); // now set the data so this won't get hit again.
}
You need to put the condition inside $(function(){ so that the body tag is actually loaded before the JavaScript queries the (unloaded) DOM for the existence of the ID.
$(function(){
if($('#modulePage16460412').length) {
...
}
});
your defining a function, but not calling anywhere.
so put everything inside some function and call.
and also replace this if($('#modulePage16460412').length > 0 ) with if($('#modulePage16460412')), because when jquery couldnt find element with id : #modulePage16460412, it will return empty array. empty_array.length = 0, so it will always be true.
$('document').ready(function(){
if($('#modulePage16460412')) {
$(function()
{
$(window).bind('load',
function(e)
{
window.setTimeout(function()
{
$.colorbox({opacity:0.3, href:"/storage/support/colorbox/offer.html"});
}, /*timeout->*/ 2000);
});
});
}
});
Perhaps a simpler approach?
$( document ).ready( function() { // runs code only after DOM ready
if ( $( '#modulePage16460412' ).length > 0 ) { // runs code only if id found
window.setTimeout( function() {
$.colorbox( { opacity:0.3, href:"/storage/support/colorbox/offer.html" } );
}, 2000 );
}
} );
I have a js function which looks like this
function showProducts(){
document.getElementById("shopList").innerHTML = "<ul><li>Test Text</li></ul>";
}
It's a function that has to show an array of my products. I've made an div with id="shopList" in my html page
<div id="shopList">
</div>
But how can I call the function to show me the text in the div? It works when I use this as my body tag but I'm not allowed to write any js code in my html or to use onload or onclick. I'm trying to do it with listeners for almost 4 hours and I still did not find a solution. Could someone help me?
<body onload="showProducts()">
Using pure javascript:
window.onload = function(){
};
(or
function doLoad() {
//Do stuff on load
}
window.onload = doLoad;
With Jquery
$(document).ready(function(){
});
It's not difficult with listeners. Here is a solution (not cross-browser):
document.addEventListener("DOMContentLoaded", showProducts);
Really, assigning to onload is just shorthand for doing it with listeners. This should work , though I haven't tested it.
window.addEventListener("load", showProducts);
With Jquery you could do something like this :
$(document).ready(function(){
showProducts();
});
It waits untill the page is loaded and then executes the function.
You just put it in an external .js file and include it in your page.
(For the people downvoting this answer because it's Jquery, he said he couldn't use onload() so I just mentioned this option. )
Just place the script at the bottom:
<body>
...
<script type="text/javascript">
myFunction();
</script>
</body>
John Resig's simplified version from "Pro JavaScript Techniques". It depends on addEvent.
var ready = ( function () {
function ready( f ) {
if( ready.done ) return f();
if( ready.timer ) {
ready.ready.push(f);
} else {
addEvent( window, "load", isDOMReady );
ready.ready = [ f ];
ready.timer = setInterval(isDOMReady, 13);
}
};
function isDOMReady() {
if( ready.done ) return false;
if( document && document.getElementsByTagName && document.getElementById && document.body ) {
clearInterval( ready.timer );
ready.timer = null;
for( var i = 0; i < ready.ready.length; i++ ) {
ready.ready[i]();
}
ready.ready = null;
ready.done = true;
}
}
return ready;
})();
window.onload would work, but it is a different beast. jQuery's $(document).ready() is much more complex and better in most scenarios.
Given your criteria of "no script in the HTML" and "no onload or onclick listener", you can put the function into a separate file and run it from a script element at the foot of the page:
<script type="text/javascript" src="showproducts.js"></script>
so now you have no script in the page and no listeners. The code will be executed when the element is added to the DOM, so as long as it is after the related DIV, you're fine.
Incidentally, you don't even need a function, you can just put the statements from the function body into the file.
Hi i have a problem with my js code. So, i include in 'head' in my site, script
var Engine;
jQuery
(
function($)
{
Engine =
{
utils :
{
site : function(id)
{
$('#content').html('<strong>Please wait..</strong>').load('engine.php',{'site':id},function()
{
os = {adres:'drugi'};
history.pushState(os,'s',ts);
}
);
},
topnav : function()
{
$('div li').bind('click',function()
{
Engine.utils.site($(this).attr('rel'));
unbind('click',false);
}
);
}
}
};
Engine.utils.topnav();
}
);
Now i want call included script in index.php
<script language="JavaScript" type="text/javascript">
Engine.utils.site(1);
</script>
And here is a problem above code doesn't works.
But if i click on any 'li' element Engine.utils.site work's correctly.
Please help me i try fix it a few days.
Sory for my bad english
Have you tried putting the call in a ready function?
<script language="JavaScript" type="text/javascript">
$(function() {
Engine.utils.site(1);
});
</script>
This happens because of closure. Your object Engine is not visible outside anonymous function