Detect input text box change

 We can use jQuery to identify input text change as shown below. This method uses setTimeout and clearTimeout to force the change event fire only after user finishes typing.

JS

var timer;
$("#title").on("input", function(e) {
  var textValue = $(this).val();
  if ($(this).data("lastvalue") != textValue ) {

    $(this).data("lastvalue", textValue );
    clearTimeout(timer);

    timer = setTimeout(function() {
      //code to handle change
      console.log(textValue);
    }, 500);
  };
});

HTML

<script src="jquery.min.js"></script>
<input type="text" id="title">

Cheers

Samitha

validate input type without the protocol for the url

 We can use jQuery validate to format input URL with a valid URL as shown below

rules: {

    url_field: {

      required: true,

      url: true,

      normalizer: function (value){

                value = value.replace(/^https?:\/\//, '');

                return 'http://' + value;

            }

    }

  }

Cheers

Samitha

Add or Update query string parameter

 If we want to dynamically add or change query string,  URL API can be used as shown below

const url = new URL(location.href);

url.searchParams.set('queryStringKey', 'queryStringValue');

Cheers

Samitha

Statistics Tool to Check Website Performance

 This is used for generating different HTTP codes. It can be useful for testing how scripts handle different responses.

Usage:

Add the status code to the URL, 

Ex: httpstat.us/200

More information can be found here.

cheers

Samitha

Get Client IP Address Using Jquery

  http://jsonip.com is an free API which will return IP as a json response.

 

Response sample: {"ip":"192.100.200.10","about":"/about","Pro!":"http://getjsonip.com"}

Example

$.ajax({

    type: "GET",

    async: false,

    url: "http://jsonip.com",

    success: function (data) {

        alert(data.ip);

    }

});

SQL Server error: The server principal is not able to access the database under the current security context

 

This is a common error shown when SQL server is not mapped with the database you need to access. Follow the steps below for a resolution

• Go to Security folder in the server.
• Double click it and go to Logins folder.
• Find your user id and double-click it.
• Login Properties window will open up.
• In that go to User Mapping.
• Tick all the Databases that you want to map with that Login.

This can also be achieved using a SQL (specially if you are restoring a db)

USE dbNamw;

ALTER USER {userName} WITH login = {loginName}

Cheers

Samitha

JavaScript format Date ( DD/MM/YYYY)

 Following function will check if input date is entered in DD/MM/YYYY format,  It also validates a minimum date that can be entered to an input field (original code from here)

         function IsValidDate(inputDate) {

            const regex = /^\d{2}\/\d{2}\/\d{4}$/;

            var minDate = new Date("01/01/1900 12:00:00");

            if (inputDate.match(regex) === null) {

                return false;

            }

            const [day, month, year] = inputDate.split('/');

            const isoFormattedStr = `${year}-${month}-${day}`;

            const date = new Date(isoFormattedStr);

            const timestamp = date.getTime();

            if (typeof timestamp !== 'number' || Number.isNaN(timestamp)) {

                return false;

            }

            if (isoFormattedStr < minDate.toISOString()) {

                return false;

            }

            return date.toISOString().startsWith(isoFormattedStr);

        }

Cheers

Samitha

setInterval() and setTimeout()

If we want to execute a specific JS function after some time there are two options to use fro,.  

• setTimeout used  run a function once after the interval specified 
• setInterval used   run a function repeatedly, after the interval specified and repeating continuously at that interval.

If we want to stop the indefinite function call  we can use clearInterval with setInterval.

Cheers,

Samitha

The Ultimate Guide to CSS

 I found following website to be very useful. It provides comprehensive breakdown of the CSS support for widely used email clients in both mobile and desktops. 

wfdsdfgh6    campaignmonitor.com

Regards,

Samitha

Get All Elements in a HTML document

 We can use Jquery or javascript to get all DOM elements

Jquery

var elements= $('*');

Javascript

var elements= document.getElementsByTagName('*');

Cheers

Samitha

DataTable filter by date time

As per  Expression property of the DataColumn , a filter on DateTime column is created enclosing the date between the number symbol (#)

 DateTimeColumn = #dateTimeValue#

In addition the date should be formatted according to the format MM-dd-yyyy  as displayed below.

Dim strQuery = String.Format("DateExpired= #{0}#", dtExpired.ToString("MM-dd-yyyy"))    

 The query above could still fail if the columns also contain times. In such case you should change your formatting to include also output for time "HH:mm:ss" or instead  BETWEEN which is more clear.

Another workaround is use SQL CASE to check date and return a flag based ton the value as follows

SELECT 

CASE when DateExpired IS NOT NULL AND DateExpired <= Convert(date, getdate()) then 'Y' else 'N' end IsExpired

cheers

Samitha

Allow checking only one checkbox in a group

 If we want to behave the checkbox as radio buttons we can use JS as shown below.

JS

     function CheckOnce(checkbox) {

          $("[id$='_chkLocations']").each(function (i, obj) {

              if (obj !== checkbox) obj.checked = false

              if (obj.checked) {

                 //do something

             }

          });

      }

HTML

<input type="checkbox" ID="chkLocation" onclick="CheckOnce(this)">

<input type="checkbox" ID="chkLocation" onclick="CheckOnce(this)">

Cheers

Samitha

 

Adding visibility attribute

 There are two ways to add the visibility attribute for an element. They have a difference in the way it renedered in the HTML as shown below.

  1. $("#elementid").attr("style", "visibility: hidden")

  This will be rendered as 

style="visibility: hidden;"

 2. $("#elementid").css("visibility", "hidden")

  This will be rendered as 

style="width: 50px; color: red; visibility: hidden;"

 

 

In summary the first one will set the style attribute and the second one will append to the existing style attribute.

Cheers

Samihta

Error SQL70001 This statement is not recognized in this context

 If your project is using SSDT database project some times you may encounter the error “This statement is not recognized in this context”.

To fix this, right click and view the Properties dialog for the SQL script. Change the Build Action property to None.

Cheers

Samitha

Placing icon inside an input element

 Sometime icons inside an input element will give more User Experience to the viewer. Following code snippet shows how to put  font awesome icons in an input field.

CSS

<style>

        .input-icons i {

            position: absolute;

        }

          

        .input-icons {

            width: 100%;

            margin-bottom: 5px;

        }

          

        .icon {

            padding: 5x;

            min-width: 20px;

        }

          

        .input-field {

            width: 100%;

            padding:5px;

            text-align: center;

        }

    </style>

HTML

<div class="input-icons">

            <i class="fa fa-user icon"></i>

            <input class="input-field" type="text">

            <i class="fa fa-instagram icon"></i>

</div>




The output will be as follows




Cheers

Samitha



Map JSON objects to class

There are some online websites that will convert a given JSON string to respective classes. This will make developer's life easy. Here is some of the online websites that does the job for you.

1. JsonToCsharp

2. site24x7

3, JsonFormatter

4. wtools

Cheers,

Samitha