Develop Reference

How to bind event Jquery to page?

I have Jquery function that executes AJAX query to server.
How can I call this after load page in the specified url page? May I bind this to element HTML, I mean:
<div id="graph" onload="function()"></div>

jQuery handles the HTML file with a variable called document.
Document has two popular event states
load when the page has been loaded
ready when the page has been loaded and all other decorations to the HTML have been applied.
jQuery provides hooks for these states.
To run javascript code after each of the events listed above, you have to put the function within the appropriate event scope.
For loading, this would be…
$(document).load(function() {
// javascript code you want to execute
})
After the page has been ready, but not yet rendered, you can apply some other javascript code using
$(document).ready(function() {
// javascript code you want to execute
})

One way using jQuery:
$(document).ready( function() {
//do whatever you need, you can check if some element exists and then, call your function
if($("#graph").length > 0)
callfunction();
});
No jQuery, only vanilla js:
window.onload = function() {
if(document.getElementById("graph"))
callfunction();
}

Change CSS class name dynamically

I need to change the CSS class name of all the elements in a page with a particular class name (.k-textbox). I tried the below code but it does not hit inside the .each() function
<script>
$(document).ready(function () {
$(".k-textbox").each(function () {
//alert("a");
$(this).removeClass("k-textbox");
$(this).addClass("input-medium");
});
});
</script>
In the page i have a 3rd party grid control. the CSS class i have mentioned is inside that third party grid control.
below is the DOM object:

You should try to use chaining API provided by jQuery library:
$(".k-textbox").removeClass("k-textbox").addClass("input-medium");
edit:
As long as the elements are created dynamically you could try to run this code after those elements are created. But if you don't know when they are inserted into the code and doesn't have control over them you could try write simple watch function, i.e:
var watchTimer = setInterval(function () {
var inputs = $('.k-textbox');
if (inputs.length) {
// clear interval
clearInterval(watchTimer);
// change class
inputs.removeClass("k-textbox").addClass("input-medium");
}
}, 100);

use addClass() and removeClass()
$(".k-textbox").removeClass("k-textbox").addClass("input-medium");

Dynamic google-code-prettify doesn't work

Is it possible for a button to call a function that would 'prettify' a dynamic <code><pre>? I can't get it to work.
After the page loads, the initial <code> is prettified(?), but when I change it and call prettyPrint() afterwards, it no longer works.
Example: http://jsfiddle.net/uwBjD/2/
Edit: Sorry, I was using a local prettify.js. Updated it, still encountered the same error.

Apparently after the code is prettified, an additional class is added which is prettyprinted. Anything with the class of prettyprinted is not re-prettified. You need to remove that class before recalling the function:
$('input[type=button]').click( function() {
$("#jsExample").text(" var user = 'private'; //Do NOT store your API Key on a script.")
.parent().removeClass("prettyprinted");
prettyPrint();
});
http://jsfiddle.net/uwBjD/3/

Call a function only once

I've 3 divs (#Mask #Intro #Container) so if you click on Mask, Intro gets hidden and Container appears.
The problem is that I just want to load this only one time, not every time I refresh the page or anytime I click on the menu or a link, etc.
How can I do this?
This is the script I'm using for now:
$(document).ready(function(){
$("div#mask").click(function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});
Thank you!

You can try using a simple counter.
// count how many times click event is triggered
var eventsFired = 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
}
});
});
To persist this you will need to set a cookie. (e.g. $.cookie() if you use that plugin).
// example using $.cookie plugin
var eventsFired = ($.cookie('eventsFired') != null)
? $.cookie('eventsFired')
: 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
$.cookie('eventsFired', eventsFired);
}
});
});
To delete the cookie later on:
$.cookie('eventsFired', null);

Just point to an empty function once it has been called.
var myFunc = function(){
myFunc = function(){}; // kill it
console.log('Done once!'); // your stuff here
};

Web pages are stateless in that they don't hold states between page refreshes. When you reload the page it has no clue what has happened in the past.
Cookies to the rescue! You can use Javascript (and jQuery has some nice plugins to make it easier) to store variables on the client's browser. Store a cookie when the mask is clicked, so that when the page is next loaded it never shows.

this code with will work perfect for you and it is the standard way provided by jquery to bind events that you want to execute only once
$(document).ready(function(){
$("div#mask").one('click', function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});

Multiple blocks in jquery ui blocker?

I am using this plugin.
However it seems to use global variables
$.blockUI();
$.unblockUI();
Is there away I can have different instances of this block.
$(document).ajaxStart(function (e)
{
$.blockUI(); //setup with a loading msg.
});
$(document).ajaxStop(function (e)
{
$.unblockUI();
})
var ajax = // ajax setup stuff
// 1.5 way of doing it
ajax .success(function (response)
{
var valid = checkIfValid(response); // check if valid
if(valid)
{
$.blockUI(); // setup with a save message
}
});
So that's sort of what I have. I put
$.blockUI();
to keep it simple with no options but in my real code I have messages and other options set.
So now the problem is this once the success is finished the ajax stop gets called and unblocks everything. I only want the one that was started in the ajax start to be cleared not the one in the valid.
So I need different instances.

You can accomplish what you're trying to do by calling block on a div that you create on the fly, and then simply removing that div from the DOM. For example:
$(document).ajaxStart(function (e) {
/* Create a <div> that will contain the blocking elements: */
$("<div id='ajax-block' style='position:fixed;width:100%;height:100%' />")
.appendTo("body").block()
});
$(document).ajaxStop(function (e) {
/* Remove the page block specific to the ajax request: */
$("#ajax-block").remove();
});
And do something similar for the other event you're blocking (just change the id attribute inside the dynamically appended div and the call to remove().