Introduction
The moment jQuery appeared on web, everyone started using it. Specially now a days ASP.NET guys use it more and more. I love to use jQuery and jQuery plugins for my ASP.NET web sites. It made my work fun and exciting.
Before jQuery and plugins, I was a bit scared to touch JavaScript. jQuery really made an entire boring and scary thing interesting for me and many others.
So often we need to setup our web site for using jQuery and some plugins. I am going to show you some ways how to set your web site for that.
Step 1 – Download jQuery
Always download the latest jQuery. Because this is my personal experience that with every release they improve performance and fix some bugs. get the latest jQuery from www.jquery.com.
Many of us use Visual Studio 2008 for development and “Intellisense” is our basic need. So to get intellisense, always download the .vs-doc file too. Its a documentation file for jQuery. If you will have this in your project, you will get intellisense for jQuery also. You will get all these files from download section of www.jquery.com. But remember you need to install VS Hotfix for that intellisense to work. Check this post for more information
Step 2 -Setup your web site
Now I have downloaded latest scripts. I have added folder called “Scripts” to root of web site. I will use same folder for jQuery plugins.
Next step is to reference scripts in my master page ( I will use master page for my web site ). Some people prefer to directly add code to head section of master page. But I prefer to reference my scripts by “ScriptManager” control. It has many advantages. Like scripts file will be managed by scriptmanager, which is also taking care of other scripts.
Now I will add a ScriptManager to my master page. Its always good to have ScriptManager in your MasterPage, so that all pages in your web site will get it automatically,and you do not need to add it page by page. Next I will add a reference to my jQuery file to ScriptManager
[csharp]
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="MssterPages_Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="myScriptManager">
</asp:ScriptManager>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
[/csharp]
There are some other options also in the script tag, which we will discuss later, but for now this seems good. When you will deploy your web site with debug=”false”, in your web.config file. ScriptManager will take care of your scripts automatically. The script will be cached for better performance. So now we have core jQuery set in our web site.
Step 3 -set any plugin for site wise use
Now lets use a plugin called as “Block UI”. We will use this plugin to block the page and show a waiting message, whenever there is some AJAX activity. Check more about this very useful plugin here
And also I have updated ScriptManager to include this plugin. I need to do this, so that plugin will be avalable to all of my web site.
[csharp]
<asp:ScriptManager runat="server" ID="myScriptManager">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.3.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery.blockUI.js" />
</Scripts>
</asp:ScriptManager>
[/csharp]
I have added some code to master page to use Block UI. Check the follwing code.
[csharp]
<script language="javascript" type="text/javascript">
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(onRequestStart)
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onRequestEnd)
});
function onRequestStart() {
$.blockUI();
}
function onRequestEnd() {
$.unblockUI();
}
</script>
[/csharp]
This code will block the UI when AJAX will start and unblock it, when AJAX is completed
Step 4: Use a plugin for single page
There are some cases, where you need to use a jQuery plugin just for a single page. In that case adding a reference to ScriptManager on master page is not a good idea. For such a cases, I prefer to
use ScriptManagerProxy and add reference to it. This will be advantage that my plugin will be served by ScriptManager on master page, only when it has child page as the desired one. So lets do it.
Lets say I need to print a dataform on a page. The best choice for this will be using jqPrint plugin, which can print portion of page. check about it here. I have downloaded the plugin and placed it in my scripts folder
I need this on page “PrintData.aspx”. I will include a ScriptManagerProxy on this page and will add a reference to it for jqPrint plugin script.
[csharp]
<%@ Page Title="Print this page" Language="C#" MasterPageFile="~/MasterPages/Site.master"
AutoEventWireup="true" CodeFile="PrintData.aspx.cs" Inherits="PrintData" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManagerProxy ID="myScriptManagerProxy" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery.jqprint.js" />
</Scripts>
</asp:ScriptManagerProxy>
</asp:Content>
[/csharp]
Step 5 : Test It
Now lets test our web site. Execute the default.aspx page. Now if you inspect your page with firbug for script, you will see something like this -
So there is only jQuery core and Block UI scripts. Next execute the PrintData.aspx page and inspect it with FireBug, you will see something like this -
Now you will see that for this page, you will also get the jQprint script. This is because we have specified that we will use this only on this page. Check attached code for more information.
Have fun with jQuery 
First thank you Shail, that was perfect and after a long time, solve my problem.
I want to know the way of calling JQuery by a controls name; I mean not to say:
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(onRequestStart)
Instead, write some thing like this:
$(‘controlName’).click(function(){…});
This way, has a problem and its that the name of control change when we work via MasterPage;
So I want to know any solution you know or no???:D
Thank you agian
Hello h.jaza,
Thanks for appreciation.
Yes, you can write that code for a control also. You do not need to worry about master page. If you are writing code for control which in master page, write the script in master page. Just to refer control in script, write like this
$(‘#‘).click……………
And in same way if your control is in child page, write the same script, but in child page.
Lets suppose that you have an ASP.NET button whose id is “myButton”, then write your jQuery code as
$(‘#‘).click……..
If this is in MasterPage, write script block in master, if its in child , write in child
I hope you understand what I mean.
Thank you so much for your deep explanations; That’s nearly completely useful.
Now the question is, what if I want to write the script in a separate J-Script file?
When I test this way, Firebug throw an error: “$ is not defined”.
So is there any solution for this problem?
Thank you again
Well, in case you want to write that in a separate java script file, the you must pass name of control as parameter to function. Lets say you have function myFunction in file myFile.js. Now call function like this
myFunction().
I am assuming that you have already linked the file in header of your page.
I hope that helps
You mean write it this way:
$(document).ready(function()
{
$(‘#’).click(function()
{
$.blockUI();
setTimeout($.unblockUI, 2000);
});
});
???
It’s not working…
Some thing wrong to paste…
$(document).ready(function()
{
$(‘#’).click(function()
{
$.blockUI();
setTimeout($.unblockUI, 2000);
});
});
Where is ID in your code at this line -
$(’#’).click(function()
It must be like this
$(’#buttonID’).click(function()
I write it but I don’t know why when I paste it here, it disappears…
I write $(document).ready(function ( ) { $(‘#btnSubmit’). click(function() { … Is it what you said???
Oh sorry, there is a problem.
See the Image from the link:
https://cid-886087a2b2b7834a.skydrive.live.com/self.aspx/.BlogImages/JQuery.jpg
Thank you
Yes,
Thats what I said. Why you don’t you email me your code at shailwx@gmail.com , and I can help you very fast.
Thank You
By pleasure…
Thanks for your Grace
Hi,
I have a requirement.
1.I have a Master page all pages use that
Master Page
2.In one my content pages, I have few serevr
side text boxes submit button and DataList
control. All these controls are AJAX Update
Panel.
3.After I enter Recors, I click submit button
so that My dataList gets updated with newly
entered record.
My requirement is : One of the text box
controls in side DataList ItemTemplate should
be associated with JQuery Date picker
I tried Registering script
http://forums.asp.net/t/1477512.aspx
Check out my free data grid, it’s using JQuery and JQuery UI CSS Framework
Many thanks! I was trying to get this configured but there was extra complexity knowing what to do with master pages etc, versus just putting it in HTML. This was a great help.
Hey, firebug is throwing an error
Sys.ArgumentNullException: Value cannot be null. Parameter name: element
[Break on this error] {name: “handler”, type: Function}
Can you help me with this ? I cant use JQuery with my page at all. My page has certain AJAX modals.
It works flawlessly but as soon as I reference the code for block UI with it just throws this error.
$(document).ready(function() {
// Allows the div.blockMsg style in CSS to
// override BlockUI’s defaults.
$.blockUI.defaults.css = {};
// Add the BlockUI call as an onclick handler
// of the Save button.
$addHandler($get(‘#’), ‘click’, function() {
$(‘#’).block({ message: null });
});
// Get a reference to the PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Unblock the form when a partial postback ends.
prm.add_endRequest(function() {
$(‘#’).unblock();
});
});
// Bonus! Progress indicator preloading.
var preload = document.createElement(‘img’);
preload.src = ‘images/progress-indicator.gif’;
delete preload;
Mike, have you made sure that before this code you have first added reference to jQuery and then to plugin file. The error what you explained here is because of that.
variable. It’s a cool trick and a good way to make your plugins feel more jQuery-ish.
What would be your next topic next week on your blog.,
Good post! I have a random question for you. How do you find
out your blog indexed by bing I have a related web blog.
Save the new file in the scripts folder as jquery.jloader.js. We start out by creating an anonymous wrapper function which is self-executing. The function accepts a single argument which is the dollar symbol. The function is followed by a second set of parenthesis; we use these to pass the jQuery library into our plugin. This means that we can use any standard jQuery functionality using the $ sign as an alias. This second set of parenthesis are also what makes our function self-executing.
great post. thank for sharing.
The one thing that bugs me about jquery plugins is the endless list of js files you need to include in the page if you need a few loaded. It seems strange there isn’t (as far as I’m aware anyway) a method in the core for loading them all up and streaming them down as one file from the backend. This would reduce the number of http requests the client has to perform to get all the pieces.
You created some decent points there. I looked on the internet for the problem and located most individuals will go along with together with your site.
very nice blog thanks for the good post. keep posting.
This page helped me a lot. Thanks.Here is what I had to do to get Ajax Tabs to work with pages that lienkd to a Master page.I am self taught in building web pages and started about 4 weeks ago. I couldn’t have done it without the help available on the internet..ajax is followed by two underline characters..ajax__tab_header { font-family:verdana,tahoma,helvetica; font-size:11px; border-bottom:solid 1px #999999}.ajax__tab_tab{ font-family:Verdana,tahoma,helvetica; font-size:11px; border-bottom:solid 1px #999999 }.ajax__tab_body{ font-family: verdana,tahoma,helvetica; font-size: 16pt; border: 1px solid #999999; border-top: 0; padding: 8px; background-color: #ffffff;}You will need code like this in Styles.CSS to control the styles of your tabs across you whole project. Note thatIn your Master Page, you will need the “link” statement within the tag to pick up the CSS styling. I added the “Register Assembly” line shown below as the second line in each of my ‘child’ pages. -End -
Pingback: Mystical