Adi Dotnet: HTML

Showing posts with label HTML. Show all posts

29 December 2021

How to check a class exists on page or on html element

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
  </head>
  <body>
    <div class="div1">
      div 1
    </div>
    <div>div 2</div>
    <button>Check div1 Class exist or not</button>
    <script type="text/javascript">
      $("button").click(function () {
        var div1Class = $("div").hasClass("div1");
        alert(div1Class);
      });
    </script>
  </body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

How to Get Selected Radio Button Value in jQuery

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
  </head>
  <body>
    <input type="radio" name="StuName" class="clsStu" value="adi" /> Adi
    <input type="radio" name="StuName" class="clsStu" value="pavan" /> Pavan
    <input type="radio" name="StuName" class="clsStu" value="madhan" /> Madhan
    <input type="radio" name="StuName" class="clsStu" value="nani" /> Nani
    <input type="radio" name="StuName" class="clsStu" value="balu" /> Balu
    <button>Get Value</button>
    <script type="text/javascript">
      $("button").click(function () {
        var val = $(".clsStu:checked").val();
        alert(val);
      });
    </script>
  </body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

28 December 2021

How to view an HTML file in the browser with Visual Studio Code

Step1: Open Visual studio code tool

Step2: Click on Open folder and select HTML files folder

Step3: Then open HTML file "TestFile.html" from folder

Step4: Then go to Extensions in VS Code and install "Open in Browser" extension ass below image.

Step5: After install then go to HTML file and right click on code and we will get "Open in Default Browser" option. then select that. it will show your html file output in browser.

5 December 2021

DropDownList change event using jQuery class selector in ASP.net

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DropDownList_change_event_using_jQuery_class_selector_in_ASP_net.aspx.cs" Inherits="WebApplication1.DropDownList_change_event_using_jQuery_class_selector_in_ASP_net" %>

<!DOCTYPE html>

</head>

<body>

<div>

<asp:DropDownList ID="DropDownList1" CssClass="DropDownListcss" runat="server">

<asp:ListItem Text="Select" Value="0"></asp:ListItem>

<asp:ListItem Text="asp.net" Value="1"></asp:ListItem>

<asp:ListItem Text="c#" Value="2"></asp:ListItem>

<asp:ListItem Text="ado.net" Value="3"></asp:ListItem>

<asp:ListItem Text="SQL Server" Value="4"></asp:ListItem>

</asp:DropDownList>

$('.DropDownListcss').change(function () {

alert("DropDownList change() event.");

alert($(".DropDownListcss option:selected").text());

alert($(".DropDownListcss option:selected").val());

});

</script>

</div>

</form>

</body>

</html>

Github Line: https://github.com/adi501/Asp-net-Examples

1 April 2020

Rendering raw html data in react js

Create Components folder under src folder
Add RenderingRawHtml.js file and add below Code

import React, { Component } from "react";

import Parser from "html-react-parser";

class RenderingRawHtml extends Component {

  constructor(props) {

    super(props);

    this.state = { htmlData: "<div><h2><u>HTML Data</u></h2></div>" };

  }

  render() {

    return (

      <>

        <h3>Rendering raw html data in reactjs Example</h3>

        <div>{Parser(this.state.htmlData)}</div>

      </>

    );

  }

}

export default RenderingRawHtml;

Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import RenderingRawHtml from "./components/RenderingRawHtml";

function App() {

return (

<div className="App">

      <RenderingRawHtml />

    </div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Pages