Get and Set Attribute’s Value in jQuery

JQuery library functions have more functionality than we can think of. All we want through jQuery can be easily implemented like to get values of any element on the web-page. Whether the value is simple text or whole html of that element.

Earlier article was about to get content of text, html and value field assigned to an element on the web-page. Element on the web-page have many attributes like id, name, title, href etc. and its corresponding value that is specific for that attribute.

JQuery library function have some in-built function that can be used to get those attributes value and developer can set those values by using other provided functions. For example the following code fragment will get href value of an anchor tag with specified selector:

alert($("#anchor").attr("href"));

This alert message can be included wherever we want like in any button’s click event or any function called as per requirement.

Developer can also set particular value for any attribute of any element. Following example will set an anchor tag’s (above code fragment) href attribute’s value:

$("#anchor").attr("href","http://dotprogramming.blogspot.com");

Same as above function we can easily set attribute’s value either one or multiple at once. Following code will assign title and href attribute’s value for the same anchor tag only in one function:

$("#anchor").attr({
    "href" : " http://dotprogramming.blogspot.com",
    "title" : "JQuery Learning Material"
  });

These functions for set an attribute’s value can be used callback functions to be execute further operation after setting the value. In the next article we will show those callback functions with syntax and execute some more operations.

Get Content and Attributes in jQuery

Getting and assigning content of elements in jQuery is very simple because of its in-built functions. JQuery provides many in-built functions that can be used to get content of any element and can set html part for any element.

JQuery library contains many DOM related functions that make it easy to use and understand how it is working. Programmer can easily manipulate content of any element or attributes by using existing functions. In rare chances programmer have to write its own functions with collection of JQuery library functions.

To get content of any element on the web-page, programmer can use following three mostly used functions:

• val(): get or set the value of forms field.
• text(): get or set the text content of selected elements.
• html(): get of set the whole content of selected elements including html markup.

Lookout the following example through which we will use all three types of functions and show the values returns by them.

$("#btn").click(function(){
alert($("#lblText1").val());
        alert($("#lblText2").text());
        alert($("#lblText3").html());
});

All the above alert messages will return respective values for selected label. The below code fragment will assign some values to all three labels:

$("#btn").click(function(){
alert($("#lblText1").val("value"));
        alert($("#lblText2").text("text"));
        alert($("#lblText3").html("html"));
});

In the next article we will get and set attribute's value for an element on the web-page.

Callback Functions Execution in jQuery

Callback functions are function which can be invoked under certain conditions. These functions executes after current effect have been finished. As the effect completed, the function reference specified as callback will be executed.

JQuery statements are executed line after line in a sequence and perform action written. In case of effects discussed earlier, next line (whatever you write) will be execute before the effect completes its part. If the next line depends on the effect then it can create errors.

Callback function reference will execute after the current effect finished completely. These functions can easily remove those errors, here is the syntax:

$(selector).show(speed, callback);

Following example will show an alert after div is shown on the button click:

$("#btnShow").click(function(){
$("#divToShow").show("slow", function(){
        alert("Div has been shown");
        });
});

In the above code a callback function have been written that will show an alert message after div will show. If we don’t write any callback function then it will show an alert message without showing the div properly.

$("#btnShow").click(function(){
$("#divToShow").show(2000);
        alert("Div has been shown");
});

This code will not wait for div to show and show an alert message specified. So these type of situations must have callback functions.

SiteMapPath not visible in visual studio 2013

When i run the SiteMapPath in visual studio 2010 then i found that it run successfully. When i run same sitemap file in visual studio 2013 then didn't run. I found the Error, that error is:

.aspx extension

Because visual studio 2013 support hide extension functionally or you can say it provide friendly url to the users. Like

http://localhost:25367/marketus

Here, marketus is the page name, not a directory. So problem structure is:

Now the solution is, remove .aspx extension of the url attribute from the web.sitemap file. Now you can see after removing the extension.

 Now the output page of the file is:

Create an Object using New Operator: Java

New operator is used to create a new object of an existing class and associate the object with a variable that names it. Basically new operator instantiates a class by allocating memory for a new object and returning reference to that memory.

Every class needs an object to use its member and methods by other classes. Programmer have to create that object using new operator to use functionality provided by that class. Following is the syntax to create new object of an existing class:

Class_variable =new Class_Name();

This syntax basically describes some points about new operator as below:

• Allocates memory to class_variable for new object of class.
• It invokes object constructor.
• Requires only single postfix argument which calls to constructor.
• Returns reference to memory which is usually assigned to variable of appropriate type.

Following statement will create an object of city class and allocate memory to this newly created object:

City metro;

metro = new City();

The equivalent code for the above statement that can be written in single line is:

City metro = new City();

So new operator does two things overall i.e. it first allocates memory somewhere to hold an instance of the type, and then calls a constructor to initialize an instance of the type in that newly allocated memory.

After creating new object for a class, that object can use all the members and methods defined in that class. You can assign all the properties for that class and operate available or new functions on those properties.

TextMode property of TextBox in ASP.NET

In visual studio 2010 you can assign only three values to the TextMode property , Those values are SingleLine , MultiLine and Password. But in visual studio 2012 you can set lots of value to the TextMode property Those values are SingleLine , MultiLine, Password, Email,Date , DateTime,URl etc All values are given below diagram.

Now all values we are using one by one :

MultiLine : In MultiLine TextBox you can take multiple rows but in single line TextBox you can take only single row. MultiLine TextBox is used where you need multiple rows like address of person. 

Lets take an example of MultiLine TextBox . Drag one TextBox control to the design window and set MultiLine to TextMode property.

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    </div>
        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="213px"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Output

SingleLine TextBox : In SingleLine TextBox You can take only single row means your TextBox does not support enter key. Lets take an example of SingleLine TextBox.

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    </div>
        <asp:TextBox ID="TextBox1" runat="server" Width="213px"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Password TextBox : In password TextBox your input character will change in circular filled disc or circle.

normally password TextBox is used where you need security. Lets take an example 

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    </div>
        <asp:TextBox ID="TextBox1" runat="server" TextMode="Password" Width="213px"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Output

Email TextBox : You can set TextMode property is email in visual studio 2012.  HTML5 gives a new functionality to the web page such as email validation . you don't required expression validator for email validation . lets take an example of email validation feature in HTML5 .

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    </div>
        <asp:TextBox ID="TextBox1" runat="server" TextMode="Email" Width="213px"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Output

Url : TextMode property is set to url then you will assign url to the TextBox. Its also a validator ,

line of code

<asp:TextBox ID="TextBox1" runat="server" TextMode="Url" Width="213px"></asp:TextBox>

Output

SiteMap Path example in ASP.NET

Using the SiteMap Path class you can navigate a website. It displays a set of Text or images Hyperlinks. Inheritance hierarchy of SiteMapPath class are:
System.Object
    System.Web.UI.Control
      System.Web.UI.WebControls.WebControl
         System.Web.UI.WebControls.CompositeControl
            System.Web.UI.WebControls.SiteMapPath

Lets take an simple example of SiteMap Path 

To create Web.Sitemap, right click the website name. A context menu appears. Select the Add New Item option from the context menu. The Add New Item dialog box appear. Select Site Map from the option available. This will create a new web.sitemap file in the website.

 The Web.sitemap file consists of navigational details for an application. You can set the title, URL, and other information for each page by using the Web.sitemap file. code, copy and paste into your sitemap file.

Article : How to use Menu Control in ASP.NET

Video : A simple video contain how to use menu and sitemap file

  <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/Default.aspx" title="Home Page"  description="">
        <siteMapNode url="~/About.aspx" title="About"  description="" />
        <siteMapNode url="~/contact.aspx" title="contact us"  description="" />
    </siteMapNode>
</siteMap>


After that Add a master page and three web form(Default.aspx, About.aspx, contact.aspx)  into the website folder. Here we take ASP.NET website , which is contain default asp.net template. After Completed your sitemap file you can add sitemap path control to the master page.

Note : Add SiteMap Path control into the master page after navigation control

Master page source code , where your sitemap path control exists

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <asp:SiteMapPath ID="SiteMapPath2" runat="server">
            </asp:SiteMapPath>
            <br />
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    </form>
</body>
</html>

Code Generate the following output