Develop Reference

Alert button's inner content after clicking it

Please, help fix bug: the code currently alerts undefined instead of button's inner contents
function registerClickHandler() {
$('#clickme').click(function() {
setTimeout(function() {
alert(this.innerHTML);
}, 200);
});
}

this inside the timeout handler is not the button
function registerClickHandler() {
$('#clickme').click(function (e) {
setTimeout(function () {
alert(e.currentTarget.innerHTML);
}, 200);
});
}

Try to get the value before setTimeout
function registerClickHandler() {
$('#clickme').click(function () {
var value=this.innerHTML;
setTimeout(function () {
alert(value);
}, 200);
});
}

In java script this points to the last function and inside the timeout handler is not the button, thats why you are getting the error.
Also it's a good practice implement this kind of functions or onclicks using on.('click', function(){...})
below you can see my example:
$(document).ready(function(){
$('#clickme').on('click', function (e) {
setTimeout(function() {
alert(e.currentTarget.innerHTML);
}, 200);
});
});
You can take a look and run it here: http://jsfiddle.net/gon250/6qwk0g1t/1/

Try putting the click eventhandler outside the function. Also pass the value of 'this' to a variable before calling setTimout. Later use this variable inside setTimout. Read more about Javascrpt prototypes here
$(document).ready(function(){
$('#clickme').click(function() {
var me = this;
setTimeout(function() {
alert(me.innerHTML);
}, 200);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">click me</div>

setTimeout with Bootstrap Modal not displaying after time out

I'm trying to delay showing a Bootstrap modal until 5 seconds have passed. Here is the section of my code. It seems write from what I have read on MDN. The modal does not appear after any amount of time. Any help would be appreciated.
var timeout;
function modalAlert(message){
$("#myModalLabel").text("Hey Look!")
$('.modal-body').html("<img src='"+message+"'>");
timeout = window.setTimeout(showModal,5000);
}
function showModal(){
console.log("HERE")
$("#myModal").modal('show')
}
Vijay Ramamurthy helped me find the solution:
var timeout;
function modalAlert(message){
$("#myModalLabel").text("Hey Look!")
$('.modal-body').html("<img src='"+message+"'>");
window.setTimeout(function(){showModal();},5000);
}
function showModal(){
console.log("HERE")
$("#myModal").modal('show')
}

Use the "shown" event handler to register a timeout on the modal and then hide it. You can chain the functions together since it's a jQuery plugin.
$("#myModal").modal("show").on("shown", function () {
window.setTimeout(function () {
$("#myModal").modal("hide");
}, 5000);
});

try making the last line in the modalAlert function
timeout = window.setTimeout(function () {showModal();}, 5000);

Jquery ajax post with timer event?

script
$(document).ready(function () {
var meter_id = $("#MeterReadingTypes li a.link_active").attr("id");
var range_id = $("#DateRangeTypes li a.link_active").attr("id");
window.setInterval(PostMainChartValues(meter_id, range_id), 5000);
...
});
function PostMainChartValues(meter_id, range_type_id) {
$.ajax({
...
});
}
window.setInterval is not trigerred. If I write an alert in setInterval it works. What is the reason of this? Why function is not triggering? I tracked it with chrome DevTools, and there is no move.

The first parameter to setInterval should be a function (or an evalable string). Right now, you are calling PostMainChartValues() and passing its return value to setInterval().
Change it to:
window.setInterval(function() {
PostMainChartValues(meter_id, range_id);
}, 5000);

This is not an ajax issue. You are using in wrong mode the setInterval parameter.
Create an anonymous function like bellow:
window.setInterval(function () { PostMainChartValues(meter_id, range_id); }, 5000);

ClearTimeout dose not work well (may be when clearing before the first timer fire)

I wanted to add a "loading" class to the body element on every ajax call that takes more than 300ms.
so I added the following script to my common.js file:
$(document).ready(function ()
{
var timer;
$("body").on({
ajaxStart: function ()
{
var body = $(this)
var timer = setTimeout(function ()
{
body.addClass("loading");
}, 300)
},
ajaxStop: function ()
{
$(this).removeClass("loading");
clearTimeout(timer);
}
});
});
Now this works if i make the ajax calls at leas 1sec long.
When they are immediate the loading class remains on the body element.
I suspect that the first the ajax call ends before 300ms expires that calls for removing the class and clearing the timer, lets say this takes 10ms, but then the timer the fires after 290ms more...
I wonder how could i test for that?
and weather I'm doing something wrong to achieve the described above task.
P.S
I'm using ASP.NET MVC.

You're redeclaring the variable, loosing the higher scope of the previously declared variable:
$(document).ready(function () {
var timer;
$(document).on({
ajaxStart: function () {
var body = $(document.body);
timer = setTimeout(function () { //don't use the "var" keyword
body.addClass("loading");
}, 300)
},
ajaxStop: function () {
clearTimeout(timer);
$(this).removeClass("loading");
}
});
});

call functions from JQuery - better way

I want to call a JQuery function on window resize and also during the initial load. I just tried this, I am sure there is a better way, Please explain this learner,
$(document).ready(function () {
$(function () {
var doosomething = function () {
$('#bottomDiv').css('top', $(window).height() - 105);
}
$(window).resize(doosomething);
});
});

Try
$(document).ready(function () {
var do_something = function () {
$('#bottomDiv').css('top', $(window).height() - 105);
}
$(window).resize(do_something);
do_something();
});
Your call to $(function () { isn't of any use, as it does exactly the same thing as $(document).ready(function () {.

No need to name the function just so you can call it.
You can do it like this:
$(function () {
// -----------v-----------assign the handler
$(window).resize(function () {
$('#bottomDiv').css('top', $(window).height() - 105);
}).resize();
});
// ---^--- invoke the handler

You may find window.resize to be unreliable at times. Different browsers call that at different times. (For instance, do you want it to happen "live" or after they stop resizing?)
I would suggest using:
setInterval(doosomething, 500);
Or something like that. Your code is fine though, outside of your unnecessary nesting. And not doing an initial call before the resize (if that is what you want to do).