Add New Elements or Content in jQuery

JQuery provides some standard functions through which developer can easily add element/content to an existing element. User can add an element after or before an existing element by using jQuery functions. These element can also be added using callback functions. Just check some value and according to condition, we can add element easily.

Following are jQuery methods that are used to add new content:

Append method

This function insert content or new element at the end of selected html element. For example

$("#lblComment").append("last comments");

This function will add specified text after the existing text of selected label.

prepend()

This function insert content or new element at the beginning of selected html element. For example

$("#lblComment").prepend("start comments");

This function will add specified text before the existing text of selected label. We can use both these methods to add multiple content by using multiple parameters. These functions can easily get multiple parameters as shown below:

$("#lblComment").prepend("one", "two", "three");
$("#lblComment").append("eight", "nine", "ten");

After() and before()

After method inserts content after the selected html element and before method inserts content before the selected html element. More can be explained by following jQuery code fragment:

$("#lblComment").after("after adding text");
$("#lblComment").before("before adding text");

Both these functions will add the specified text after and before the selected label element respectively. Same as append and prepend, these functions can also be used for adding multiple elements to an existing.

In above examples, we have added only texts only but we can add any other element in place of that text. Just write the element’s html code and place as parameter of these functions, that element will add easily. In further article we will remove the added element/content and how to use/append css classes through jQuery code fragment.

Implementing Callback Functions in JQuery

Callback function reference will execute after the current effect/function/event finished completely. This type of function can be used after any event completion like to set an element’s value after execution of some function finished.

In earlier article we have discussed about callback function execution after finishing effect. These functions executes after current effect have been finished. As the effect completed, the function reference specified as callback will be executed.

Following code block will change the text field of element having id "testComment" as mentioned in the code. This whole process will take place after button (btnComment) click event done.

$("#btnChange").click(function(){
  $("#testComment").text(function(i,origText){
    return "Old text: " + origText + " New text: Changed! on index: " + i;
  });
});

A callback function is one which is passed as an argument in another function and which is invoked after some kind of event. The call back nature of the argument is that, once its parent method completes, the function which this argument represents is then called; that is to say that the parent method calls back and executes the method provided as an argument.

So we can perform anything after any event or any ajax request also e.g. we want to change the html of a div element after clicking on a button, the following code fragment helps us:

$("#btnChange").click(function(){
  $("#testDiv").html(function(i,origText){
    return "Old html: " + origText + " New html: This is new HTML for this div element";
  });
});

Callbacks are so-called due to their usage with pointer languages. If you don't use one of those, just understand that it is just a name to describe a method that's supplied as an argument to other method, such that when the first method is called and its method body completes, the callback method is then invoked, or in other words "called at the back" of the other function.

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.

Creating Table-Valued Functions in SQL

A table-valued function returns a table as an output, which can be derived as a part of a SELECT statement. Table-valued function return the output as a table data type. The table data is a special data type used to store a set of rows, which return the result set of a table-valued function. Table-valued functions are of two types:

Inline Table-Valued Function

An inline table-valued function returns a variable of a table data type from the result set of a single SELECT statement. An inline function does not contain a function body within the BEGIN and END statements.

Consider an example where the inline table-valued function, fx_Department_GName, accepts a group name as parameter and returns the details of the departments that belong to the group from the Department table. You can create the function by using the following statement:

CREATE FUNCTION fx_Department_GName ( @GrName nvarchar (20) )
RETURNS table
AS
RETURN (
SELECT *
FROM HumanResources.Department
WHERE GroupName=@GrName
)
GO

You can use the following statement to execute the fx_Department_Gname function with a specified argument:

SELECT * FROM fx_Department_GName (‘Manufacturing’)

The preceding statement will return a result set having the group name ‘Manufacturing’.

Consider another example of an inline function that accepts rate a a parameter and returns all the records that have a rate value greater than the parameter value:

CREATE FUNCTION HumanResources.Emp_Pay (@Rate int)
RETURNS table
AS
RETURN (
SELECT e.EmployeeID, e.Title, er.Rate
FROM HumanResources.Employee AS e
JOIN HumanResources.EmployeePayHistory AS er
ON e.EmployeeID=er.EmployeeID WHERE er.Rate<@Rate
)
GO
The preceding function will return a result set that displays all the records of the employees who have the pay rate greater that the parameter.

Multistatement Table-Valued Function

A Multistatement table-valued function uses multiple statements to build the table that is returned to the calling statement. The function body contains a BEGIN…END block, which holds a series of T-SQL statements to build and insert rows into a temporary table. The temporary table is returned in the result set and is created based on the specification mentioned in the function.

Consider an example where the Multistatement table-valued function, PayRate, is created to return a set of records from the EmployeePayHistory table by using the following statements:

CREATE FUNCTION PayRate (@rate money)
RETURNS @table TABLE
(EmployeeID int NOT NULL,
RateChangeDate datetime NOT NULL,
Rate money NOT NULL,
PayFrequency tinyint NOT NULL,
modifiedDate datatime NOT NULL)
AS
BEGIN
INSERT @table
SELECT *
FROM HumanResources.EmployeePayHistory
WHERE Rate > @rate
RETURN
END

The function returns a result set in from of a temporary table, @table, created within the function. You can execute the function by using the following statement:

SELECT * FROM PayRate (45)

Depending on the result set returned by a function can be categorized as deterministic or nondeterministic. Deterministic functions always return the same result whenever they are called with a specific set of input values. However, nondeterministic function may return different results each time they are called with a specific set of input values.

An example of a deterministic function is date add, which returns the same result for any given set of argument values for its three parameters. Get date is a nondeterministic function because it is always invoked without any argument, but the return value changes on every execution.