Calling a function in javascript anchor tag

 <a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" style="cursor: pointer" onclick="showCaseProfile(\'' + value.FileNumber + '\');">' + value.FileNumber + '</a>

function showCaseProfile(CaseNo) {

    var params = { strCNR_No: CaseNo };

    $.ajax({

        type: "POST",

        contentType: "application/json; charset=utf-8",

        url: '../DashboardReports/DashboardReports.aspx/CNREncryption',

        data: JSON.stringify(params),

        dataType: "json",

        success: function (data) {

            window.open('../DashboardReports/CaseProfile.aspx?CaseNo=' + data.d, '_blank');

        },

        error: function (result) {

            alert("Server Connection Error");

        }

    });

}

Multi select combobox jquery - if selected no checkbox

 function checkWhetherddlBranchMultiSelectCheckOrNot() {

    if ($("#ddlBranch option:selected").length == 0) {

        alert("Please select Branch");

        return;

    }

}

Jquery Error - Internal Server Error500 -

         error: function (e, textStatus, errorThrown) {

            //alert(e.responseJSON.Message);

            alert("Some Error occured");

            $('#model').hide();

        }

    });

===========================

Internal server error 500

Solution:- Due to Some duplicate function in Javascript

or

IF error showing Parameter BranchId

In Javascript BranchIds and BranchIds must be case sensitive as in Function name of cs file (web method)

Solution :- Due to Command.Parameters.Add("@BranchIDList") name to ("BranchIds")

================================

If error 

Spinner loader masking - bootstrap - with gif image

with bootstrap class 

 .spinner-grow{

           display: block;

              position: fixed;

              z-index: 1031; /* High z-index so it is on top of the page */

              top: 50%;

              right: 50%; /* or: left: 50%; */

        }

        .model {

            display: none;

            position: fixed;

            z-index: 1200;

            top: 0;

            left: 0;

            height:

How to set value of label in HTML and Jquery and how to get value of textbox html

Set Value of label

<label id="lblZone" class="fst-italic fw-medium text-danger">test</label>

 $("#lblZone").text('Test');

get value from textbox

<input class="form-control datepickerIcon" id="dateFrom" type="text" />

$('#lblFromDate').text($('#dateFrom').val());

How to create dropdown with multi select in HTML and javascript and JQuery

<select id="ddlZone" multiple="multiple" class="form-select form-select-sm form-control"></select>

$(document).ready(function () {

    $('#ddlZone').multiselect({

        includeSelectAllOption: true,

        enableFiltering: true,

        maxHeight: 600,

        //dropUp: true,

        buttonWidth: '250px',

        enableCaseInsensitiveFiltering: true,

        onDropdownHidden: function (event) {

            ddlZone_onClientDropDownClosed();

            //GetDashBoardSummary();

        },

        templates: {

            button: '<button type="button" class="form-select multiselect dropdown-toggle btn-sm" data-bs-toggle="dropdown" aria-expanded="false" style=" border: 1px solid #dee2e6; border-radius: 15px;"><span class="multiselect-selected-text"></span></button>',

        },

    });

});

How to hide or show div by radio box Jquery using Javascript

  <asp:RadioButton runat="server" ID="radioFiledYes" Text="Yes" onchange="$('#divFiled').show();" GroupName="Filed" />

                <asp:RadioButton runat="server" ID="radioFiledNo" Text="No" onchange="$('#divFiled').hide();" GroupName="Filed" />

<div style="border: 1px solid #d5d5d5; padding: 10px;" id="divFiled">

</div>

Ajax start and stop jquery with loader

 https://stackoverflow.com/questions/31199304/how-to-use-ajaxstart-to-show-loading-spinner

Jquery ajax function with aspx page ASP.NET C#

reference:-  https://www.dotnetspider.com/forum/345776-Updating-database-on-button-click-from-email-body

How to use Jquery UI

 <head>  

  <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  

  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  

</head>

reference:-https://www.javatpoint.com/jquery-ui-button

Rrandom color changing background color webkit chrome

<style>

    body {background-color: yellow;} 

</style>-

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

$(function() {

    if ($.browser.webkit) {

        $("body").css("background", "#4d4d4d");

    }

});

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

<style type="text/css">

    body {

    -webkit-animation: colorchange 60s infinite; 

    animation: colorchange 20s infinite;

}

@-webkit-keyframes colorchange {

     0%  {background: #33FFF3;}

    25%  {background: #78281F;}

    50%  {background: #117A65;}

    75%  {background: #DC7633;}

    100% {background: #9B59B6;}

}

@keyframes colorchange {

     0%  {background: #33FFF3;}

    25%  {background: #78281F;}

    50%  {background: #117A65;}

    75%  {background: #DC7633;}

    100% {background: #9B59B6;}

}   

</style>

Jquery callback

 

A callback function is executed after the current effect is finished.

after the shadow is 100% complete

 $("button").click(function(){

  $("p").hide("slow", function(){

    alert("The paragraph is now hidden");

  });

});

JQuery button with function with HTML button get value with Class name

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript">

var value = $('.txtTest').val();

</script>

<input runat="server" id="txtTest" value="test" class="txtTest" />

JQuery button with function with HTML button set value by button ID

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    $(function(){
        $("#input1").val("Hello world");
    });
</script>
<input type="text" id="input1" />

</script>

JQuery get value and set value by ASP.NET textbox ID with ternary operator

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

function test() {

         

         var recipient = $("#<%=txtTheoryHours.ClientID%>").val();

         

         var theoryHours = $('#<%=txtTheoryHours.ClientID %>').val() == '' ? 0 : $('#<%=txtTheoryHours.ClientID %>').val();

         var practicalHours = $('#<%=txtPracticalHours.ClientID %>').val() == '' ? 0 : $('#<%=txtPracticalHours.ClientID %>').val();

//to get the value

         var ojtHours = $('#<%=txtOJTHours.ClientID %>').val() == '' ? 0 : $('#<%=txtOJTHours.ClientID %>').val();

         var genericNOSHours = $('#<%=txtGenericNOSHours.ClientID %>').val() == '' ? 0 : $('#<%=txtGenericNOSHours.ClientID %>').val();

         var nsqfReimburseCourseDuration = parseInt(theoryHours) + parseInt(practicalHours) + parseInt(ojtHours) + parseInt(genericNOSHours);

//to set the value

         $('#<%=txt_NSQFReimburseCourseDuration.ClientID %>').val(nsqfReimburseCourseDuration);

         $('#<%=txt_NSQFcourseDuration.ClientID %>').val(parseInt(theoryHours) + parseInt(practicalHours));

        

     }

<script>

<asp:TextBox ID="txtTheoryHours" runat="server" MaxLength="4"  placeholder="Enter theory hours"

                    CssClass="form-control" onchange="test()"  OnTextChanged="txtTheoryHours_textChanged" ></asp:TextBox>

or we can use clientidmode to static and directly use txt id

 <asp:TextBox ID="txtPIPD" runat="server" ClientIDMode="Static"/>

javascript

 $(function () {

            $("#txtPIPD").datepicker({

                changeMonth: true,

                changeYear: true

            });

        });

JQuery tabs C# ASP.NET

 <style type="text/css">

        .nav-tabs > li > a.tab1,.nav-tabs > li.active > a.tab1, .nav-tabs > li.active > a.tab1:hover, .nav-tabs > li.active > a.tab1:focus {

    color: #fff;

    cursor: pointer;

    background-color: #4aad44;

    border: 1px solid #ddd;

    border-bottom-color: transparent;

    border-top-right-radius:10px;

    border-top-left-radius:10px;

}

        .nav-tabs > li> a.tab2,.nav-tabs > li.active > a.tab2, .nav-tabs > li.active > a.tab2:hover, .nav-tabs > li.active > a.tab2:focus {

    color: #fff;

Website Default.aspx popup image C# ASP.NET with Jquery

 <%--Add Popup New JS on 30092021--%>

    <script type="text/javascript" src="slider.js"></script>

    <script type='text/javascript'>

        $(function () {

            var overlay = $('<div id="overlay"></div>');

            overlay.show();

            overlay.appendTo(document.body);

            $('.popup').show();

            $('.close').click(function () {

Calling a web service from Jquery

Also uncomment the following code to run the code without error

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 

 [System.Web.Script.Services.ScriptService]

 https://www.c-sharpcorner.com/blogs/how-to-call-asp-net-web-service-using-jquery-ajax