How can I execute this code in HTML on page load?
<script>
window.onload = $(function(){
$("#name1, #name2").val("").attr("disabled",true);
};
</script>
I have tried this code but it does not work.
Better to use the on() handler:
$(window).on('load', function(){
$("#name1, #name2").val("").attr("disabled",true);
});
or document.ready() if you aren't waiting for particular elements to load:
$(document).ready(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
You just have an extra $( that you don't need, and a missing closing }...
window.onload = function() {
$("#name1, #name2").val("").attr("disabled",true);
};
Although that gets your code working, you could probably run this when the DOM is ready (which is quicker than waiting for all the images to load)...
$(function() {
$("#name1, #name2").val("").attr("disabled",true);
});
You can use this when you only want to access your DOM:
$(document).ready(function() { /* code */ });
$(function() { /* code */ }); // shorthand function (is identical)
If you require all other resources (styles, scripts, iframes, images, etc.) to be loaded too (eg. get an image dimensions), you need to use this:
$(window).on('load', function() { /* code */ });
You are mixing up JavaScript's way of doing things with jQuery's way of doing things.
Using windows.onload = ... is how you assign a function to be called after the load event occurs in JavaScript.
Using $(function(){...}) is jQuery syntax for $(document).ready(function(){}) which essentialy is the same thing, jQuery's document ready also triggers after load but unlike unlike windows.onload before images are loaded.
Use one or the other syntax.
Either use JavaScript like this:
window.onload = function(){
$("#name1, #name2").val("").attr("disabled",true);
}
Or one of jQuery's alternatives:
$(function(){
$("#name1, #name2").val("").attr("disabled",true);
})
$(document).ready(function(){
$("#name1, #name2").val("").attr("disabled",true);
})
$(window).ready(function(){
$("#name1, #name2").val("").attr("disabled",true);
})
You should close your function codeblock like this.
<script>
window.onload = $(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
</script>
Use This, Remove window.OnLoad
$(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
SEE DEMO
http://jsfiddle.net/qgPzG/
You could use this syntax:
$(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
Try this :
window.onload = function () {
// do stuff here
$("#name1, #name2").val("").attr("disabled",true);
}
You forget to close " }); " :
<script>
window.onload = $(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
</script>
Related
<script type="text/javascript">
$(document).ready(function()
{
$('#loading')
.hide()
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
});
Loading....
Can someone tell me where to apply this to an actual ajax call by an example? I'm just confused on the application of this code.
You have to call ajaxStart on document
From Docs
As of jQuery 1.8, the .ajaxStart() method should only be attached to document.
Try this:
$(function(){
var $loading = $('#loading').hide();
$(document).ajaxStart(function() {
$loading.show();
}).ajaxStop(function() {
$loading.hide();
});
});
I use codes with blink;
Jquery;
<script type="text/javascript">
var blink = function(){
$('#blinker').toggle();
};
$(document).ready(function() {
setInterval(blink, 100);
});
</script>
Page;
[full_column align="center"][su_button url="#basvuru" class="fancybox" background="#b21f30" size="6"] <div id="blinker">ÜCRETSİZ PROGRAMA BAŞVUR</div>[/su_button][/full_column]
Website: www.varsiteam.com
Try with :
<script type="text/javascript">
$(document).ready(function() {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});
</script>
If you look at console you will see this error:
Uncaught TypeError: undefined is not a function
To fix that you have to put your function inside of $(document).ready event. When you call $('#blinker').toggle(); it tries to use jQuery object which is undefined if you not put it in $(document).ready event. That is how jQuery works.
When you're working in WordPress, jQuery is loaded in a no-conflict mode.
So, you'll need to use jQuery and not $.
Your code should be:
var blink = function(){
jQuery('#blinker').toggle();
};
Or if you want to wrap everything in your document ready event:
jQuery(document).ready(function($) {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});
I have this simple javascript function:
<script type="text/javascript">
var popup = '0';
if(popup == '0') {
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
popup = '1';
});
});
}
</script>
<button class="button">Test</button>
I want the function to alert only on the first click but it keeps working although I changed the value of popup to 1
What you need is .one() function. It makes sure the code is triggered only once for you.
Docs: http://api.jquery.com/one/
Docs example:
$( "#foo" ).one( "click", function() {
alert( "This will be displayed only once." );
});
Write the code as follows:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
popup = '1';
}
});
});
</script>
Once your click listener is set, your previous if statement's location wasn't executed anymore. Only the code inside the on click function.
Alternatively, you can unbind the onClick listener instead of setting popup = '1'. Try the following:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
//unbinds *all* listeners previously registered on "document"
$(document).unbind('click');
});
});
</script>
Much cleaner, and as Mathletics has mentioned, cleans unnecessary callbacks from memory.
Try:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
}
popup = '1';
});
});
</script>
You had a function that was setting popup to 1 but was never checking its value again. This way it gets checked and should work properly.
Status: WORKING
Runs smoothly - click works
Jquery
$("document").ready(function(){
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
<div class="blue" id="test">Testing code</div>
</body>
Status: NOT WORKING
Succeeds to add the file and div test within it but click doesn't work
Jquery
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
});
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
</body>
Does anybody know how to do that?
The method get is asynchronous which means that the stream will continue while the ajax request is still running, the best solution is to put the click handler into the get callback.
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
});
You should delegate the event, from one of static parents of the element or document object.
$(document).on("click", "#test", function(){
alert("abc");
})
use delegate or on(recommend)
$(function() {
$('body').on('click', '#test', function() { alert('abc'); });
// or
// $('body').delegate('#test', function() { alert('abc'); });
});
problem is the the click function is called before the div with #test is appended...
call click function after the div is appended.. so that it gets that id... and the event
try this
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
OR
the on function with selector as document..(i alway prefer to go with this)
$(document).on("click", "#test", function(){
alert("abc");
})
The code
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
</script>
<body>
<button class="demo">click me</button>
</body>
The first Hello! is OK, but I am demo can't?What's the matter?
the similar question
jquery each selector doesnt work
Your click event handler is trying to bind to the demo button before the HTML body has rendered. You need to assign the event handler inside your $(document).ready function:
Change this:
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
To this:
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
Bind the click event inside ready()
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
see this demo
$(".demo").live('click',function() {
alert("I am demo");
});