Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Sunday 5 March 2023

jQuery Toggling Background Color to Table Row on Click

In this jQuery code for Toggling Background Color to Table Row on Click, we first use jQuery to select all tr elements and add a click event listener to them. When a tr is clicked, we use the toggleClass() method to toggle the highlight class on that tr. The highlight class is defined in the CSS code and sets the background color to yellow.

$(document).ready() function is used to ensure that the code is executed only after the page has finished loading.

 <!DOCTYPE html>
<html>
<head>
  <title>jQuery Toggling Background Color to Table Row on Click</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
    </tr>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Marketing</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>IT</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Johnson</td>
      <td>Finance</td>
    </tr>
  </table>
 
  <script>
    $(document).ready(function() {
      $('tr').click(function() {
        $(this).toggleClass('highlight');
      });
    });
  </script>
</body>
</html>

Wednesday 1 March 2023

Validate RadioButtonList to check if selected using jQuery in .net application

Below is the code for Validating RadioButton List to to check if selected using JavaScript in .net application.

In this code, we use a jQuery selector $('#rdblList input[type=radio]:checked') to select all the radio buttons under the rdblList table that are checked. We then use the .length property to check if the selected radio buttons length is greater than zero. If the length is zero then we display an error message.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head runat="server">
    <title>Validate Radio Button list</title> 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">   
        function validate() {
            if ($('#rdblList input[type=radio]:checked').length == 0) {
                alert("Please select gender.");
                return false;
            }

        }
    </script>

</head>

<body style="margin: 0;">
    <form id="frmHome" method="post" runat="server">
        <table id="Table1" style="width: 100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td align="center" valign="top" style="width: 100%;">
                    <asp:RadioButtonList runat="server" id="rdblList">
                        <asp:ListItem>Male</asp:ListItem>
                        <asp:ListItem>Female</asp:ListItem>
                    </asp:RadioButtonList>
                    <br />
                    <br />
                    <asp:Button runat="server" ID="btnval" Text="Validate" OnClientClick="return validate();" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>


Validate CheckboxList to select at least one item using jQuery in .net application

Below is the code for Validating Checkbox List to select at least one item using jQuery in .net application.

In this code, we use a jQuery selector $('#chklist input[type=checkbox]:checked') to select all the checkboxes under the chklist table that are checked. We then use the .length property to check if the selected checkboxes length is greater than zero. If the length is zero then we display an error message.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" ValidateRequest="false" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head runat="server">
    <title>Validate Chackbox list</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">    

        function validate() {
            if ($('#chklist input[type=checkbox]:checked').length > 0) {
                    alert("Please select at least one item from checkbox list.");
                    return false;
                }
        }
    </script>

</head>

<body style="margin: 0;">
    <form id="frmHome" method="post" runat="server">
        <table id="Table1" style="width: 100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td align="center" valign="top" style="width: 100%;">

                    <asp:CheckBoxList runat="server" ID="chklist">
                        <asp:ListItem>Validate 1</asp:ListItem>
                        <asp:ListItem>Validate 2</asp:ListItem>
                        <asp:ListItem>Validate 3</asp:ListItem>
                        <asp:ListItem>Validate 4</asp:ListItem>
                    </asp:CheckBoxList>

                    <br />
                    <br />
                    <asp:Button runat="server" ID="btnval" Text="Validate" OnClientClick="return validate();" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

 

 

Validate RadioButtonList to check if selected using JavaScript in .net application

Below is the code for Validating RedioButton List to to check if selected using JavaScript in .net application.
 
In this code, we first select all the radio buttons with the name rdblList using getElementsByName. We then loop through each radio button and check if it is checked. If we find a radio button that is checked, we set the isSelected variable to true and break out of the loop. Finally, we use the isSelected variable to determine whether a radio button is selected or not, and display an error message if no radio button is selected.


-----------------------------------

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head runat="server">
    <title>Validate Radio Button list</title>

    <script type="text/javascript">    

        function validate() {
            var radioButtons = document.getElementsByName('rdblList');
            var isSelected = false;

            for (var i = 0; i < radioButtons.length; i++) {
                if (radioButtons[i].checked) {
                    isSelected = true;
                    break;
                }
            }

            if (isSelected == false) {
                alert("Please select gender.");
                return false;
            }
        }
    </script>

</head>

<body style="margin: 0;">
    <form id="frmHome" method="post" runat="server">
        <table id="Table1" style="width: 100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td align="center" valign="top" style="width: 100%;">

                    <asp:RadioButtonList runat="server" id="rdblList">
                        <asp:ListItem>Male</asp:ListItem>
                        <asp:ListItem>Female</asp:ListItem>
                    </asp:RadioButtonList>

                    <br />
                    <br />
                    <asp:Button runat="server" ID="btnval" Text="Validate" OnClientClick="return validate();" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Tuesday 28 February 2023

Validate Checkbox List to select at least one item using JavaScript in .net application

Below is the code for Validating Checkbox List to select at least one item using JavaScript in .net application.

In this code, we first select all the checkboxes under the table with the ID "chklist" using querySelectorAll. We then loop through each checkbox and check if it is checked. If we find a checkbox that is checked, we set the isChecked variable to true and break out of the loop. Finally, we use the isChecked variable to determine whether at least one checkbox is checked or not, and display an error message if no checkbox is checked. 

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head runat="server">
    <title>Validate Chackbox list</title>

    <script type="text/javascript">    

        function validate() {
            var checkboxes = document.querySelectorAll('#chklist input[type=checkbox]');
            var isChecked = false;

            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    isChecked = true;
                    break;
                }
            }

            if (isChecked == false) {
                alert("Please select at least one item from checkbox list.");
                return false;
            }
        }
    </script>

</head>

<body style="margin: 0;">
    <form id="frmHome" method="post" runat="server">
        <table id="Table1" style="width: 100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td align="center" valign="top" style="width: 100%;">

                    <asp:CheckBoxList runat="server" ID="chklist">
                        <asp:ListItem>Validate 1</asp:ListItem>
                        <asp:ListItem>Validate 2</asp:ListItem>
                        <asp:ListItem>Validate 3</asp:ListItem>
                        <asp:ListItem>Validate 4</asp:ListItem>
                    </asp:CheckBoxList>

                    <br />
                    <br />
                    <asp:Button runat="server" ID="btnval" Text="Validate" OnClientClick="return validate();" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

 

 

Sunday 31 March 2019

Document Object Model(DOM)

The Document Object Model (DOM) defines the logical structure of documents and the way a document is accessed and manipulated. 

The name "Document Object Model" was chosen because it is an "object model" used in the traditional object-oriented design, documents are modelled using objects, and the model encompasses not only the structure of a document but also the behaviour of a document and the objects of which it is composed. 

In other words, the nodes in the below image do not represent a data structure, they represent objects, which have functions and identity.

Data Object Model(DOM)


With the document object model, JavaScript gets all the power it needs to create dynamic HTML:

1) JavaScript can change all the HTML elements in the page
2) JavaScript can change all the HTML attributes in the page
3) JavaScript can change all the CSS styles in the page
4) JavaScript can remove existing HTML elements and attributes
5) JavaScript can add new HTML elements and attributes
6) JavaScript can react to all existing HTML events in the page
7) JavaScript can create new HTML events in the page

Tuesday 23 May 2017

What is JavaScript?

In this post, I will explain What is JavaScript?

JavaScript is a programming language used along with HTML to make web pages interactive. It runs on the client computer and doesn't require constant downloads from server. JavaScript support is built right into all the major web browsers, including Internet Explorer, Firefox and Safari. To run JavaScript client browser should support JavaScript and have JavaScript enabled. JavaScript enables a web page to do more than just displaying static information. JavaScript is probably involved in displaying timely content updates, interactive maps, animated 2D/3D graphics or scrolling video jukeboxes etc.

A simple example would be if we wish to perform some simple calculations (such as shipping costs) on values that a user puts in a form. We could make the user posts data to the server every time they want an answer, or we could have a button the execute a JavaScript calculation and display the answer to the user.

Advantages of JavaScript-

The advantages of using JavaScript are,
  • Less Server interaction
  • Increased user interactive capabilities
  • Rich User Interfaces
  • Easy to Debug and Test
  • Platform Independence
  • Event-Based Programming

Uses of JavaScript-

Some important uses of JavaScript are,
  • Input Validation
  • Popup Windows
  • Dynamic Contents
  • Mouse Rollover Effects

Monday 22 May 2017

What is JQuery?

In this post, I will explain What is JQuery and Why to use JQuery in web application.

JQuery is a fast, small, cross-platform and feature-rich JavaScript library. JQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. It is designed to simplify the client-side scripting of HTML. It makes things like HTML document traversal and manipulation, animation, event handling, and AJAX very simple with an easy-to-use API that works on a lot of different type of browsers. The main purpose of JQuery is to provide an easy way to use JavaScript on your website to make it more interactive and attractive.

JQuery Features
  • DOM manipulation
  • Event handling
  • AJAX Support
  • Effects and Animations
  • Lightweight
  • Cross-Browser Support
  • Latest Technology
  • Extensibility through plug-ins
  • CSS manipulation

Why use JQuery?
JQuery is very compact and well-written JavaScript code that increases the productivity of the developer by enabling them to achieve critical UI functionality by writing a very small amount of code.
  • It is very fast and extensible
  • It facilitates the developer to write UI related function codes in minimum possible lines
  • It improves the performance of an application
  • Browser's compatible web applications can be developed
  • It uses mostly new features of new browsers