Ive been playing with JQuery alot lately and am loving the ease of use and the feature rich toolset, you can get some realy good effects with it.
i know sometimes .net developers get, i dont know scared about trying new things that arnt born of microsoft, but JQuery is now being actively endorsed by microsoft and is actually shipped with the latest versions of the framework, so how do you use it.
1. If you dont have it get a copy of jquery.js its quite small (im currently using 'jquery-.3.2.min.js' which is 56Kb)
2. Include it in your web app
3. There are 2 ways to use it in a page
3a Add a script reference into your head section of the aspx page
<script src="Js cript/jquery -1.3.2.min.js" type="text/javascript"></script>
3b If you are using asp.net AJAX you can let the script manager handle it by:
3b.1 Adding a script manager to the form in the body of the aspx page
3b.2 Adding a scripts element
3b.3 Adding a script reference to the jquery file
3b.4 The result would look like this (remember it needs to go in side the pages form element
<asp:scriptmanager runat="server">
<scripts>
<asp:scriptreference path="~/Jscript/jquery-1.3.2.min.js">
</asp:scriptreference>
</scripts>
You are all set to use Jquery on the page
4. The most common way to initialise things is through the body onload, but this executes when the page is fully loaded, images and all, JQuery uses a special piece of script that executes when the page DOM is ready.
$(document).ready(function()
{
// do stuff when DOM is ready
});
This is where you can set styles, set up events to occur on different user actions all sorts of good stuff.
1st a couple of notes on the above code block:
1 it needs to be inside a sscript element
2 it needs to be located AFTER the scrip ref we declared in step 3 so if using the script manager it needs to be located inside the form after the script manager elements.
You can search the net for all the things you can do with JQuery, i wont repeat them all here, google is most definatly your friend.
But for now a simple example.
say you want to set up a click event to a group of radio buttons so that when clicked a javascript event is fired off to show or hide related DIV elements
<script type="text/javascript">
$(document).ready(function(){
$(":radio").click(function(event){RBEvent(this)});
$(".radioClass").hide();
});
function RBEvent(obj)
{
$(".radioClass").hide("slow");
$("#Div" + obj.id).show("slow");
}
</script>
And here is the aspx elements that go along with it
< asp:RadioButton ID="RBBus" runat="server" Text="Bus" GroupName="RB" />
asp:RadioButton ID="RBTube" runat="server" Text="Tube" GroupName="RB" />
div id="DivRBBus" class="radioClass">
Bus details br />
/div>
div id="DivRBTube" class="radioClass">
Tube details br />
/div>
The neat thing that JQuery gives us, as in this example, is the ability to put all your page script into one place, and to have JQuery attach the events dynamically at run time making your javascript much easier to maintain. You could of course put all your script into a separate file as well which can be cached on the browser making the pages even quicker to load up.
i know sometimes .net developers get, i dont know scared about trying new things that arnt born of microsoft, but JQuery is now being actively endorsed by microsoft and is actually shipped with the latest versions of the framework, so how do you use it.
1. If you dont have it get a copy of jquery.js its quite small (im currently using 'jquery-.3.2.min.js' which is 56Kb)
2. Include it in your web app
3. There are 2 ways to use it in a page
3a Add a script reference into your head section of the aspx page
<script src="Js cript/jquery -1.3.2.min.js" type="text/javascript"></script>
3b If you are using asp.net AJAX you can let the script manager handle it by:
3b.1 Adding a script manager to the form in the body of the aspx page
3b.2 Adding a scripts element
3b.3 Adding a script reference to the jquery file
3b.4 The result would look like this (remember it needs to go in side the pages form element
<asp:scriptmanager runat="server">
<scripts>
<asp:scriptreference path="~/Jscript/jquery-1.3.2.min.js">
</asp:scriptreference>
</scripts>
You are all set to use Jquery on the page
4. The most common way to initialise things is through the body onload, but this executes when the page is fully loaded, images and all, JQuery uses a special piece of script that executes when the page DOM is ready.
$(document).ready(function()
{
// do stuff when DOM is ready
});
This is where you can set styles, set up events to occur on different user actions all sorts of good stuff.
1st a couple of notes on the above code block:
1 it needs to be inside a sscript element
2 it needs to be located AFTER the scrip ref we declared in step 3 so if using the script manager it needs to be located inside the form after the script manager elements.
You can search the net for all the things you can do with JQuery, i wont repeat them all here, google is most definatly your friend.
say you want to set up a click event to a group of radio buttons so that when clicked a javascript event is fired off to show or hide related DIV elements
<script type="text/javascript">
$(document).ready(function(){
$(":radio").click(function(event){RBEvent(this)});
$(".radioClass").hide();
});
function RBEvent(obj)
{
$(".radioClass").hide("slow");
$("#Div" + obj.id).show("slow");
}
</script>
And here is the aspx elements that go along with it
< asp:RadioButton ID="RBBus" runat="server" Text="Bus" GroupName="RB" />
Bus details
Tube details
The neat thing that JQuery gives us, as in this example, is the ability to put all your page script into one place, and to have JQuery attach the events dynamically at run time making your javascript much easier to maintain. You could of course put all your script into a separate file as well which can be cached on the browser making the pages even quicker to load up.
