We Keep Coding

jQuery load function not working on binding

I bind "load" and "change" in jQuery code.
My goal is: disable some field based on logic when page load.
jQuery( document ).ready(function() {
//Question 34.1
jQuery('select#fever').bind('load change', function () {
var drug_reaction = jQuery(this).val();
if(drug_reaction== 1){
jQuery('input#fever_days').attr('disabled',false);
jQuery('select#character_of_fever').attr('disabled',false);
jQuery('select#evening_raise_of_temparature').attr('disabled',false);
jQuery('select#night_sweats').attr('disabled',false);
}else{
jQuery('input#fever_days').val("");
jQuery('input#fever_days').attr('disabled',true);
jQuery('select#character_of_fever').val("");
jQuery('select#character_of_fever').attr('disabled',true);
jQuery('select#evening_raise_of_temparature').val("");
jQuery('select#evening_raise_of_temparature').attr('disabled',true);
jQuery('select#night_sweats').val("");
jQuery('select#night_sweats').attr('disabled',true);
}
});
});
When I change fever dropdown , its working. But when page load, I fetch data from Database and this code not working:
var drug_reaction = jQuery(this).val();
if(drug_reaction== 1){
jQuery('input#fever_days').attr('disabled',false);
jQuery('select#character_of_fever').attr('disabled',false);
jQuery('select#evening_raise_of_temparature').attr('disabled',false);
jQuery('select#night_sweats').attr('disabled',false);
}else{
jQuery('input#fever_days').val("");
jQuery('input#fever_days').attr('disabled',true);
jQuery('select#character_of_fever').val("");
jQuery('select#character_of_fever').attr('disabled',true);
jQuery('select#evening_raise_of_temparature').val("");
jQuery('select#evening_raise_of_temparature').attr('disabled',true);
jQuery('select#night_sweats').val("");
jQuery('select#night_sweats').attr('disabled',true);
}

load events fire on elements which load data from a URL (e.g. the whole page, img elements and iframe elements).
A select element doesn't load external data, and nor do any of its descendants. There is no load event.
Even if there was, it would have already loaded by the time the ready event fires.
Trigger the change event as part of your ready event handler instead.
jQuery('select#fever')
.bind('change', function () { ... })
.trigger("change");

How to click a button element on page load

I have created 5 buttons. I'm loading some pages on button click. I want the first button automatically clicked on page load and load it's corresponding html file and the remaining buttons should load html files only on clicking them. Someone help me!!
This is my jquery:
$('a#Home').click(function() {
$("#home").load("x.html");
});
$('a#Menu1').click(function() {
$("#menu1").load("y.html");
});
$('a#Menu2').click(function() {
$("#menu2").load("z.html");
});
$('a#Menu3').click(function() {
$("#menu3").load("searcharray.html");
});
$('a#Menu4').click(function() {
$("#menu4").load("sortarray.html");
});

Just test this code. I think this will help you.
$( document ).ready(function() {
console.log( "ready!" );
$('#btn1').trigger( "click" );
});
function fun1()
{
alert('loaded');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="fun1()">btn1</button>
<button id="btn2">btn1</button>
<button id="btn3">btn1</button>
<button id="btn4">btn1</button>

trigger the event yourself:
$('a#Home').click(function() {
$("#home").load("x.html");
});
$('a#home').trigger('click');

Theoretical answer
You can trigger any event on any element using the .trigger() method. This will require you to specify which event you want to fire. More information.
It is also possible to trigger a click event just by calling .click() after binding the event handling. The documentation shows us that we can use this function for both purposes.
$( document ).ready() is an interaction that can be used to run code once when the document has been loaded. More info on that can be found here.
Examples
Example #1 (using .trigger())
$( document ).ready(function() {
$('a#Home').trigger('click');
});
Example #2 (using .click())
$( document ).ready(function() {
$('a#Home').click();
});

Assuming the first button is Home then you want run that on document ready by using $(function()
<script>
$(function() {
$('a#Home').click();
});
function loadHome() {
$("#home").load("x.html");
};
</script>
Then update your link to be like:
<a id="Home" onclick="loadHome()">Click Me</a>

You can try this:
<script>
function pageLoad()
{
alert('hello');
}
pageLoad();
</script>
<button id="btn1" onclick="pageLoad()">btn1</button>

How does $(function(){ }); works?

I have the following code:
function example(){
executing_code;
$(function(){
executing_code;
});
(function(){
executing_code;
})();
};
I know, that the third one is a self-invoking function and I know the meaning of the second too, but the third isn't invoking, when I invoke example()...
Some days earlier it was the other way round and the second didn't worked. I'm confussed.
Now I hope somebody can help me.

$(function() {
is equivalent to
$( document ).ready(function() {
query api here
Meaning it will fire the code inside the $(function() { when the page has finished loading
You need to close the example() before the $(function() { then call it inside.

$( document ).ready(function() {
// Handler for .ready() called.
});
Which is equivalent to calling:
$(function() {
// Handler for .ready() called.
});`
from https://api.jquery.com/ready/
This Handler is fired, when your page is fully loaded. You need this, when you place a script on top of you html page. The jquery selector don't find an id or a class or a tag when this element isn't loaded yet. So your script in the $(document).ready(function(){}); will be executed after every html element is loaded.

Why my function not alert when load page [javascript]?

Why my function not alert when load page [javascript]?
When scroll page it's alert work good.
When resize page it's alert work good.
But when load page why not alert ?
How can i do that ?
http://jsfiddle.net/af2kgoxu/
$(window).load(function(){
$(window).on('scroll load resize', function () {
alert("TEST");
});
});

I'm pretty sure because load happened before you created the listener. Think about it:
$(window).load(function(){ When the window is loaded, do the next step:
$(window).on('scroll load resize', function () { creates a listener on scroll, load, and resize. Well the window already loaded so it's never going to load again.
$(document).ready(function(){
$(window).on('scroll load resize', function () {
alert("TEST");
});
});

Why you are wrapping your scroll,load, resize operations in $(window).load(function(){}); when you can directly call it. Change your snippet as below, it will work for all window scroll,load and resize.
$(window).on('scroll load resize', function () {
alert("TEST");
});

You can always try
$(window).on('load',function()
But i think its the same

You just need this code:
$(window).on('scroll load resize', function () {
alert("TEST");
});
See here: http://jsfiddle.net/af2kgoxu/1/

Use $( document ).ready() method, and it will run whenever your DOM (Document Object Model) is ready for running javascript.
$( document ).ready(function() {
alert("TEST");
});

How to check the input checkbox field with a value on page load using jquery

<script>
$(document).ready(function(){
$( window ).load(function() {
$( "#check" ).val('hurray_checked');
});
});
</script>
<input id="check" type="checkbox" name="should_be_checked_when_pageloads" value="" />
So what all i want is when the page loads, the below field should become
<input id="check" type="checkbox" name="should_be_checked_when_pageloads" value="hurray_checked" />
But my above code is not working, can anyone please let me know how to check a field with a value when page loads ?

use jquery's .prop
$(function(){
$('.check').prop('checked', true);
});

dont use load
load is called when all assets are done loading, including images. ready is fired when the DOM is ready for interaction.
<script>
$(document).ready(function(){
$( ".check" ).attr("checked","checked").val('hurray_checked');
});
</script>

try below..for class u have to take "." and for id u should take"#"
<script>
$(document).ready(function(){
$( window ).load(function() {
$( ".check" ).val('**hurray_checked**');
});
});
</script>

Either you use this:
$( window ).load(function() {
$( ".check" ).val('**hurray_checked**');//the selector you are should be class
});
This will add the value whent the window is loaded
OR
$(document).ready(function() {
$( ".check" ).val('**hurray_checked**');
});
This will add the value when the document is ready(loaded)

Use . inplace of # like
$(document).ready(function() {
$( ".check" ).val('hurray_checked');
// ----^-- . in place of # as you used class in checkbox
$( ".check" ).prop('checked',true);// to check the checkbox
});
Read prop()
Working Demo

you need not put you code in $( window ).load,
$(document).ready(function(){
$( "#check" ).val('hurray_checked');
});
will work

Use
$(document).ready(function(){
$('#check').prop('checked', true);
});
Fiddle

$(window).load event is called before $(document).ready, and you are defining it after it has happened. That means your code never gets called.
You must either remove $(window).load wrapper, or $(document).ready for it to work as you expect.