Archive

Posts Tagged ‘Jquery’

Insert JavaScript & CSS Dynamically

October 25, 2010 Leave a comment

Below is the code for Adding Javascript:

var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);

Below is the code for Adding CSS:

var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'FireFox.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);

For More Details Refer:

http://bit.ly/9Q8bDK

http://bit.ly/9Q8bDK

Advertisements

Get Client ID using Jquery

September 20, 2010 1 comment

When we are developing client side in asp.net, we need the id of the controls, but the IDs are merged with master page naming containers.

The id will look something like this

ctl00_MainContent_txtboxId
But using Jquery we can get id like this

$("#<%= <strong>txtboxId</strong>.ClientID %>")
$("[id$=_<strong> txtboxId</strong>]").attr("id")

You can also use the function

function GetClientID(id, context) {
var el = $("#" + id, context);
if (el.length < 1)
el = $("[id$=_" + id + "]", context);
return el;
}

Ex:

GetClientID("txtboxId").attr("id");

Or if I want to be specific about the container:
GetClientID("txtboxId",$("#wrapper")).attr("id");

For More Details Visit: http://www.west-wind.com/Weblog/posts/42319.aspx

Using Jquery From CDN – Google/Microsoft Host

August 23, 2010 Leave a comment

CDN (Content Delivery Network) serves Jquery libraries to your users directly from host may be Google or Microsoft. The reasons are pretty obvious, Decreased Latency, Increased parallelism, Better Caching. For this better avoid hosting your own copies of Jquery.

It can be used like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Detailed Articles are as follows:

1)      Using Google CDN

http://bit.ly/v9RE

2)      Using Microsoft CDN

http://bit.ly/6wYYh5

3)      CDN and local copy both

http://bit.ly/5MRyd0

Using Jquery Intellisense in Visual Studio

August 16, 2010 Leave a comment

1) Using Jquery Intellisense in Page

<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js” type=”text/javascript”&gt;

<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2-vsdoc.js” type=”text/javascript”&gt;

You can get the latest version from here:

http://www.asp.net/ajaxlibrary/cdn.ashx

2) Using Jquery Intellisense in External Javscript files

1)      Download Latest Jquery files and its related vsdoc file.

For ex:

Jquery Files:  jquery-1.3.2.js

Vsdoc File:  Jquery-1.3.2-vsdoc.js

2)   Include both files in your project directory

3)   Open your external javascript file in which you want intellisense

Drag the   Jquery-1.3.2-vsdoc.js file on the first line at top of external file.

It will be displayed as below:

/// <reference path=”jquery-1.3.2-vsdoc2.js” />

That’s it you can now use intellisense in that file. To test whether it is working or not you can type $( and you should be presented with documentation.

Note: jQuery and the documentation file need to be named the same with the exception that the documentation file end with -vsdoc.js

Using Jquery Tabs with Asp.net

Age Calculation from Date of Birth Using Javascript/Jquery

August 2, 2010 3 comments

Many times we want to allow users to enter site only if they are of 18 years of age, or while registering we ask DOB and we need to calculate their age if they are eligible or not. Here is the javascript function to calculate age based on DOB.

Method 1:

<script type="text/javascript">
	function CalAge() {

    var now = new Date();
    var mm = document.getElementById('ddlmnths').value;
    var ddr = document.getElementById('ddldays');
    var dd = ddr.options[ddr.selectedIndex].value;
    var yy = document.getElementById('ddlyrs').value;
    bDay = dd + "/" + mm + "/" + yy;
    bD = bDay.split('/');
   	    if (bD.length == 3) {
        	   born = new Date(bD[2], bD[1] * 1 - 1, bD[0]);
                 years = Math.floor((now.getTime() - born.getTime()) / (365.25 * 24 * 60 * 60 * 1000));
        if (years < 18) {
            alert(“You are not eligible”);

        }
        else if (years = 18 || years > 18) {
        	alert(“Welcome”);
        }
    }
}
</script>

Method 2 :

<script type="text/javascript">

     function CalAge() {
     var dd = $("#ddldays").val();
     var mm = $("#ddlmnths").val();
     var yy = $("#ddlyrs").val();
     var age = 18;

     var mydate = new Date();
     mydate.setFullYear(yy, mm-1, dd);

     var currdate = new Date();
     currdate.setFullYear(currdate.getFullYear() - age);
     if ((currdate - mydate) < 0){
     alert(“You are not eligible”);
     }
     else
    {
	alert(“Welcome”);
    }
   }
</script>

Display Loading Image Using Jquery Ajax Methods in Asp.net

Often we need to display a loading indicator whenever an ajax request is done. To accomplish this you can look at the following code:

<script src=”http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

<script language="javascript">

$(document).ready(function() {
$("# btnGetName ").click(function() {
 $.ajax({
 type: "POST",
 url: “../Default.aspx/GetName",
 data: "{}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(msg) {
 $("# divName ").html(msg.d);
 }
 });
 });
$("# loading ").ajaxStart(function() {
$(this).show();
});
$("# loading ").ajaxStop(function() {
$(this).hide();
});
});
</script>
<pre>
</pre>
<body>
<form id="form1" runat="server">

 <div id="loading" align="center" style="padding-right: 25px; z-index: 3; padding-left: 25px;
 left: 45%; top: 45%; padding-bottom: 15px; padding-top: 15px; position: absolute;">
 <img alt="Loading..." id="ImgLoader" runat="server" src="loader.gif" />
 </div>

 <div id="divName"></div><input id="btnGetName" type="button" value="Get Name" /></div>

</form>
</body>