JQuery Interview Questions

Introduction:-

                     Interview Questions on jQuery. Some of this i have faced in several interviews and some question i have collected and gathered for my viewer.

Description:-

                     Most of the interviewer test your knowledge on jQuery by asking some basic questions i have provided below.Here i have provided few basic question and answer what a interviewer wants to listen from you.

Let us start from the fundamentals

Q.1:-What do you mean by jQuery?

 Ans:-The best answer for this question should be  jQuery is a lightweight JavaScript library which  emphasizes interaction between JavaScript and HTML.

Q-2:-Can you explain the use of "$ function" in jquery with a suitable example.

Ans:-You can answer like this,

Type of this function is "function". and like that there are a lot of anonymous functions available in jQuery.

How to Scroll Page from Top to Bottom and from Bottom to Top Using Jquery/Javascript

Introduction:-

                 In this article i have explained  How to Scroll Page from top to bottom and from bottom to top using Jquery/Javascript.

Description:-

                 In my previous article ,i have explained How to Bind State by Selecting Country DropDownList using WebMethod in Asp.net  , How to Upload and Save Image Without any Postback by User in Asp.net ,How to Save Image in Different Size in Asp.net , Encription and Decription of Password In Asp.net C# ,Send sms to mobile in asp.net using fullonsms free api , Send free sms using asp.net source code .

       

     In this article i have created one aspx page and has taken three html div where ID as top,div1 and div2 in three different background color for distinguish each other.I have taken three contents for this example but you can take as many contents you want.Created one javascript function and called this function dynamically in jquery click event.

How to Bind State by Selecting Country DropDownList using WebMethod in Asp.net

Introduction:-

                 In this article I have explained  how to bind a dropdownlist using Ajax.

Description:-

               Some developers binding the dropdownlist directly in pageload.which will give low performance to your site.Now a days every user wants to avoid unnecessary postbacks during any events.Lets take a common example that  I want to bind a state list according to the country selection. I can do it in code behind selectedindexchange event,but it will result performance issue as discussed previously,so I will prefer to use ajax here.

               In my previous post I have explained Data Binding in DropDownList Using Jquery , AutoComplete Text Using Jquery and web services , Insert Data in Sqlserver DataBase using JSON, ASP.NET Web services and jQuery , how to populate dropdown based on other dropdown or working with cascading dropdowns in asp.net , Ajax Cascading Dropdownlist Sample with database using asp.net , How to Select, Update, Insert Data in database Using Json, Jquery and Webservices .

How to Upload and Save Image Without any Postback by User in Asp.net

Introduction:-

                  Here I have explained how to store and display image instantly after choose by user in asp.net using jQuery.

Description:-

                 In this article I have explained how to avoid upload button functionality after choosing a image in asp.net. Some users usually don't likes to view image after clicked on upload button or any button control,They always prefers to view image instantly after selecting a specific image from dialog box.

               It make sense that it will possible only if we will use ajax or some client side functions.so here I am using javascript functions with taking one Image control and File upload button to open a dialog to choose a image from it.In my other post I have explained

How to Update previous Image URL During Update Mode , and  FileUpload Content Refreshed During pageloadif it is used in a user control .
  To get the result follow the below steps. where I  have explained each content with source code.

How to Save Image in Different Size in Asp.net

Introduction:-

                     This article explains how to create a image with different size in asp.net.

Description:-

                     In my previous post How to Upload and Save Image Without any Postback by User in Asp.net ,I have explained on image file validation check in javascript as well as instantly reading the image after selecting from dialog box.Here I am going to explain how you can store that same image in different sizes.
   
                   You have to specify some unit to store image in different sizes.As I have explained before you have to take one image upload control and one image viewer control.There is so many different approach is there to do this work but I am providing code which is very simple to implement as well as light weight than other approaches.

How to get Checkboxlist value with comma Separator by jquery

Introduction:-

                     Here I have explained How to get Checkboxlist value with comma Separator using  jquery  in asp.net.

Description:-

                     In my previous article I have explained Capture Button’s ClickEvent of User Control in the Asp.Net Page,Publish events for user control inAsp.Net using delegates, Dynamically create multiple web user control in a Page with Click event functionality , How to bind a repeater control in asp.net. ,How to bind state by selecting country dropdownlist using WebMethod in Asp.net ,How to use google map in asp.net

Now here I will explain how you can get the values of checkboxlist using jQuery.As many you can get the output,for example if you check 3 checkboxes then you will get 3 outputs with comma separator.

Image cropping using jquery

Introduction:-

                     Here I have explained How to crop image with jquery  and asp.net.

Description:-

                     In my previous article I have explained Load Different Pages dynamically using jquery and javascript functionwith displaying progress bar ,How to Show DifferentNotification In Asp.net using Jquery and Javascript ? ,How to calculate differencebetween two dates using JQuery? ,How to call a session variable inJQuery? ,How to ScrollPage from Top to Bottom and from Bottom to Top Using Jquery/Javascript .

In this article I will explain how you can crop your selected image using jQuery and asp.net.

You have follow the below steps to get the result.It will be better if you will copy and paste the code I have written below to see the output.

Create your own Calculator By Using Jquery

Introduction:-

                  Here I have explained how to create one calculator using jquery.

Description:-

                  In my previous article I have explained Image cropping using jquery ,Differnt types of jQuery combobox in Asp.net ,How to calculated Value difference between two dates using JQuery? .

Here I am going to create a simple web page which will looks like a calculator having all similar features. For this I have taken few buttons and labels control. I am preparing this calculator by using JQuery.

I have provided here lots of functionality which is generally used in a calculator. This calculator is having all the basic operators. It is most important that along with calculator functionality there must be a proper design. By the way design has the vital role in a application.

I have written some inline style which is not recommended, you just put these CSS into a file and call that style sheet to your page.

For this you should have the jQuery plug-in inside your application or you can use any online plug-in for it. Then take one .aspx page and follow the below process.

Data Binding in DropDownList Using Jquery

Introduction:-

                     Here I have explained how to bind data in dropdownlist using jQuery.

Description:-

                  In my previous article I have explained How to calculate difference between two dates using JQuery? , How to get Checkboxlist valuewith comma Separator by jquery.

Here I will explain how to bind dropdownlist using jQuery.As you wnow it will be light weight than other processes.

 Here I am doing one simple web application for binding data to dropdownlist  through JQuery.

 For this first you have to add one web page name it as your choice,here I have named it as JqueryDropDownList.aspx

Collapsible Gridview using jquery

Introduction:-

               
                Here I have explained how to create a collapsible gridview having child gridview     control inside it using jquery.

Description:-                
              
                    In this article I will explain how to create a gridview having colapsable functionality using jquery.

Sometimes we are showing all records in a form which is not looks better in design prosperous. To overcome it we have to collapse these records until a user will not expand it.

I am going to explain the entire process step by steps.

I have used checkbox for collapse or expand. If you will checked it ,It will expand and will show you the hidden data or controls inside that and if you unchecked then it will collapse as usual.

Here I am creating a simple web application of  collapsible Gridview .I have taken two gridview control ,the parent gridview  showing data of Employee and the child gridview populating some fields for providing feedback against each employee.

How to Show a pop up with Grid View row data using String Builder ? and How to change Gridview Row Color Dynamically ?

Introduction:-

                     Here I have explained how to show gridview row data in pop up  using string builder as well as I have explained how to change gridview row color dynamically.

Description:-

                  In this article I will explain how to show a pop up view like modal pop up using string builder. For this I have taken one gridview control and checkbox inside that gridview. Here I have also explained how to select all checkboxes at a time and also uncheck.

I will explain it more briefly with my source code and table design structure.

Most of the developer uses modal popup control to show records,but I am providing one new procedures to show record in the same manner.

As I have discussed, here I am going to explain, how to show gridview row data in pop up using String Builder.

I have used here one aspx page with a gridview control. Also I have used two images as CloseTab2.jpg and SearchButton.gif in my images folder and .js script in Scripts folder and one sql server database ShibashishDatabase.mdf in App_Data folder as shown Below.

Differnt Types of Jquery ComboBox in Asp.net

• Download ShibashishJqueryComboBox.zip - 51 KB

Introduction

Hi i am shibashish mohanty going to show you how to use Jquery ComboBox.

Using the code

Here is My Source Code:- 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DropDownList.aspx.vb" Inherits="examples_DropDownList"%>

<!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>

    <script src="Js/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="Js/jquery.bgiframe.min.js" type="text/javascript"></script>

    <script src="Js/jquery.sexy-combo.js" type="text/javascript"></script>

   

    <link href="Css/sexy-combo.css" rel="stylesheet" type="text/css" />

    <link href="Css/sexy.css" rel="stylesheet" type="text/css" />

    <link href="Css/custom.css" rel="stylesheet" type="text/css" />

      <script type="text/javascript" >

          $(function () {

              $("#basic").sexyCombo();

              $.sexyCombo.deactivate("#basic");

              $("#activate").bind("click", function () {

                  $.sexyCombo.activate("#basic");

              });

              $("#multiple-combo").sexyCombo();

              var logEvent = function (msg) {

                  return;

                  var $eventLogger = $("#event-logger");

                  $eventLogger.html($eventLogger.html() + msg + "<br />");

              };

              $("#mixed").sexyCombo({

                  emptyText: "Choose a state",

                  autoFill: true,

                  skin: "custom"

              });

          });   

    </script>

    <style type="text/css">

        .style1

        {

            width: 55%;

        }

        .style2

        {

            width: 263px;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

         <div id="event-logger" style="color: red;'"></div>

         &nbsp;<br />

        <table class="style1" bgcolor="#CCCCCC"

             style="border-left-style: double; border-left-color: #990000; border-right-style: double; border-right-color: #800000; border-top-style: solid; border-top-color: #003300; border-bottom-style: solid; border-bottom-color: #003300; margin-left: 364px;">

            <tr>

                <td class="style2">

                    Normal DropDownList with combo effect:</td>

                <td>

    <asp:DropDownList ID="basic" runat="server">

      

         <asp:ListItem value="SM">Shibashish Mohanty</asp:ListItem>

        <asp:ListItem value="IN">India</asp:ListItem>

        <asp:ListItem value="BR">Bhubaneswar</asp:ListItem>

        <asp:ListItem value="AR">Arkansas</asp:ListItem>

        <asp:ListItem value="CA">California</asp:ListItem>

        <asp:ListItem value="CO">Colorado</asp:ListItem>

        <asp:ListItem value="CT">Connecticut</asp:ListItem>

        <asp:ListItem value="DE">Delaware</asp:ListItem>

        <asp:ListItem value="FL">Florida</asp:ListItem>

        <asp:ListItem value="GA">Georgia</asp:ListItem>

        <asp:ListItem value="HI">Hawaii</asp:ListItem>

        <asp:ListItem value="ID">Idaho</asp:ListItem>

        <asp:ListItem value="IL">Illinois</asp:ListItem>

        <asp:ListItem value="IN">Indiana</asp:ListItem>

        <asp:ListItem value="IA">Iowa</asp:ListItem>

        <asp:ListItem value="KS">Kansas</asp:ListItem>

        <asp:ListItem value="KY">Kentucky</asp:ListItem>

        <asp:ListItem value="LA">Louisiana</asp:ListItem>

        <asp:ListItem value="ME">Maine</asp:ListItem>

        <asp:ListItem value="MD">Maryland</asp:ListItem>

        <asp:ListItem value="MA">Massachusetts</asp:ListItem>

        <asp:ListItem value="MI">Michigan</asp:ListItem>

        <asp:ListItem value="MN">Minnesota</asp:ListItem>

        <asp:ListItem value="MS">Mississippi</asp:ListItem>

        <asp:ListItem value="MO">Missouri</asp:ListItem>

        <asp:ListItem value="MT">Montana</asp:ListItem>

        <asp:ListItem value="NE">Nebraska</asp:ListItem>

        <asp:ListItem value="NV">Nevada</asp:ListItem>

        <asp:ListItem value="NH">New Hampshire</asp:ListItem>

        <asp:ListItem value="NJ">New Jersey</asp:ListItem>

        <asp:ListItem value="NM">New Mexico</asp:ListItem>

        <asp:ListItem value="NY">New York</asp:ListItem>

        <asp:ListItem value="NC">North Carolina</asp:ListItem>

        <asp:ListItem value="ND">North Dakota</asp:ListItem>

        <asp:ListItem value="OH">Ohio</asp:ListItem>

        <asp:ListItem value="OK">Oklahoma</asp:ListItem>

        <asp:ListItem value="OR">Orrisa</asp:ListItem>

        <asp:ListItem value="PA">Pennsylvania</asp:ListItem>

        <asp:ListItem value="RI">Rhode Island</asp:ListItem>

        <asp:ListItem value="SC">South Carolina</asp:ListItem>

        <asp:ListItem value="SD">South Dakota</asp:ListItem>

        <asp:ListItem value="TN">Tennessee</asp:ListItem>

        <asp:ListItem value="TX">Texas</asp:ListItem>

        <asp:ListItem value="UT">Utah</asp:ListItem>

        <asp:ListItem value="VT">Vermont</asp:ListItem>

        <asp:ListItem value="VA">Virginia</asp:ListItem>

        <asp:ListItem value="WA">Washington</asp:ListItem>

        <asp:ListItem value="WV">West Virginia</asp:ListItem>

        <asp:ListItem value="WI">Wisconsin</asp:ListItem>

        <asp:ListItem value="WY">Wyoming</asp:ListItem>

        </asp:DropDownList>

                </td>

            </tr>

            <tr>

                <td class="style2">

                    &nbsp;</td>

                <td>

                    &nbsp;</td>

            </tr>

            <tr>

                <td class="style2">

                    &nbsp;</td>

                <td>

                    &nbsp;</td>

            </tr>

            <tr>

                <td class="style2">

                    Multiple selection combo box:</td>

                <td>

         <select id="multiple-combo" name="multiple-combo" size="3" multiple="multiple">

         <option value="SM" selected>Shibashish Mohanty</option>

        <option value="IN" selected>India</option>

        <option value="OR">Orrisa</option>

        <option value="BR">Bhubaneswar</option>

        <option value="CA">California</option>

        <option value="CO">Colorado</option>

        <option value="CT">Connecticut</option>

        <option value="DE">Delaware</option>

        <option value="FL">Florida</option>

        <option value="GA">Georgia</option>

        <option value="HI">Hawaii</option>

        <option value="ID">Idaho</option>

        <option value="IL">Illinois</option>

        <option value="IN">Indiana</option>

        <option value="IA">Iowa</option>

        <option value="KS">Kansas</option>

        <option value="KY">Kentucky</option>

        <option value="LA">Louisiana</option>

        <option value="ME">Maine</option>

        <option value="MD">Maryland</option>

        <option value="MA">Massachusetts</option>

        <option value="MI">Michigan</option>

        <option value="MN">Minnesota</option>

        <option value="MS">Mississippi</option>

        <option value="MO">Missouri</option>

        <option value="MT">Montana</option>

        <option value="NE">Nebraska</option>

        <option value="NV">Nevada</option>

        <option value="NH">New Hampshire</option>

        <option value="NJ">New Jersey</option>

        <option value="NM">New Mexico</option>

        <option value="NY">New York</option>

        <option value="NC">North Carolina</option>

        <option value="ND">North Dakota</option>

        <option value="OH">Ohio</option>

        <option value="OK">Oklahoma</option>

        <option value="OR">Oregon</option>

        <option value="PA">Pennsylvania</option>

        <option value="RI">Rhode Island</option>

        <option value="SC">South Carolina</option>

        <option value="SD">South Dakota</option>

        <option value="TN">Tennessee</option>

        <option value="TX">Texas</option>

        <option value="UT">Utah</option>

        <option value="VT">Vermont</option>

        <option value="VA">Virginia</option>

        <option value="WA">Washington</option>

        <option value="WV">West Virginia</option>

        <option value="WI">Wisconsin</option>

        <option value="WY">Wyoming</option>

         </select></td>

            </tr>

            <tr>

                <td class="style2">

                    &nbsp;</td>

                <td>

                    &nbsp;</td>

            </tr>

            <tr>

                <td class="style2">

                    &nbsp;</td>

                <td>

                    &nbsp;</td>

            </tr>

            <tr>

                <td class="style2">

                    Normal with Intelisence Dropdownlist:</td>

                <td>

        <asp:DropDownList ID="mixed" runat="server">

      

         <asp:ListItem value="AL">Alabama</asp:ListItem>

        <asp:ListItem value="AK">Alaska Alaska Alaska Alaska Alaska</asp:ListItem>

        <asp:ListItem value="AZ">Arizona</asp:ListItem>

        <asp:ListItem value="AR">Arkansas</asp:ListItem>

        <asp:ListItem value="CA">California</asp:ListItem>

        <asp:ListItem value="CO">Colorado</asp:ListItem>

        <asp:ListItem value="CT">Connecticut</asp:ListItem>

        <asp:ListItem value="DE">Delaware</asp:ListItem>

        <asp:ListItem value="FL">Florida</asp:ListItem>

        <asp:ListItem value="GA">Georgia</asp:ListItem>

        <asp:ListItem value="HI">Hawaii</asp:ListItem>

        <asp:ListItem value="ID">Idaho</asp:ListItem>

        <asp:ListItem value="IL">Illinois</asp:ListItem>

        <asp:ListItem value="IN">Indiana</asp:ListItem>

        <asp:ListItem value="IA">Iowa</asp:ListItem>

        <asp:ListItem value="KS">Kansas</asp:ListItem>

        <asp:ListItem value="KY">Kentucky</asp:ListItem>

        <asp:ListItem value="LA">Louisiana</asp:ListItem>

        <asp:ListItem value="ME">Maine</asp:ListItem>

        <asp:ListItem value="MD">Maryland</asp:ListItem>

        <asp:ListItem value="MA">Massachusetts</asp:ListItem>

        <asp:ListItem value="MI">Michigan</asp:ListItem>

        <asp:ListItem value="MN">Minnesota</asp:ListItem>

        <asp:ListItem value="MS">Mississippi</asp:ListItem>

        <asp:ListItem value="MO">Missouri</asp:ListItem>

        <asp:ListItem value="MT">Montana</asp:ListItem>

        <asp:ListItem value="NE">Nebraska</asp:ListItem>

        <asp:ListItem value="NV">Nevada</asp:ListItem>

        <asp:ListItem value="NH">New Hampshire</asp:ListItem>

        <asp:ListItem value="NJ">New Jersey</asp:ListItem>

        <asp:ListItem value="NM">New Mexico</asp:ListItem>

        <asp:ListItem value="NY">New York</asp:ListItem>

        <asp:ListItem value="NC">North Carolina</asp:ListItem>

        <asp:ListItem value="ND">North Dakota</asp:ListItem>

        <asp:ListItem value="OH">Ohio</asp:ListItem>

        <asp:ListItem value="OK">Oklahoma</asp:ListItem>

        <asp:ListItem value="OR">Oregon</asp:ListItem>

        <asp:ListItem value="PA">Pennsylvania</asp:ListItem>

        <asp:ListItem value="RI">Rhode Island</asp:ListItem>

        <asp:ListItem value="SM">Shibashish Mohanty</asp:ListItem>

        <asp:ListItem value="IN">India</asp:ListItem>

        <asp:ListItem value="TN">Tennessee</asp:ListItem>

        <asp:ListItem value="TX">Texas</asp:ListItem>

        <asp:ListItem value="UT">Utah</asp:ListItem>

        <asp:ListItem value="VT">Vermont</asp:ListItem>

        <asp:ListItem value="VA">Virginia</asp:ListItem>

        <asp:ListItem value="WA">Washington</asp:ListItem>

        <asp:ListItem value="WV">West Virginia</asp:ListItem>

        <asp:ListItem value="WI">Wisconsin</asp:ListItem>

        <asp:ListItem value="WY">Wyoming</asp:ListItem>

        </asp:DropDownList>

                </td>

            </tr>

            <tr>

                <td class="style2">

                    &nbsp;</td>

                <td>

                    &nbsp;</td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

Here i am going to explain it Briefly:-

Download source Code from my code project Article:-

Download ShibashishJqueryComboBox.zip - 51 KB

Thanks Shibashish Mohanty