Angular’s jqLite

Following jquery functions are available in angular jqlite:

• addClass()
• after()
• append()
• attr() – Does not support functions as parameters
• bind() – Does not support namespaces, selectors or eventData
• children() – Does not support selectors
• clone()
• contents()
• css() – Only retrieves inline-styles, does not call getComputedStyle(). As a setter, does not convert numbers to strings or append ‘px’, and also does not have automatic property prefixing.
• data()
• detach()
• empty()
• eq()
• find() – Limited to lookups by tag name
• hasClass()
• html()
• next() – Does not support selectors
• on() – Does not support namespaces, selectors or eventData
• off() – Does not support namespaces, selectors or event object as parameter
• one() – Does not support namespaces or selectors
• parent() – Does not support selectors
• prepend()
• prop()
• ready()
• remove()
• removeAttr()
• removeClass()
• removeData()
• replaceWith()
• text()
• toggleClass()
• triggerHandler() – Passes a dummy event object to handlers.
• unbind() – Does not support namespaces or event object as parameter
• val()
• wrap()

Advertisements

Set decimal numbers allow only feature to multiple textboxes – jQuery

Below code snippets allows developer to set all textboxes with decimal numbers allow only feature at the load of DOM.

function allowDecimalNumberOnly(textboxId) {
    $('#' + textboxId).on("keypress", function (event) {
        $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && 
            (event.which < 48 || event.which > 57) && (event.which != 8) && 
             event.keyCode != 37 && event.keyCode != 39 ) {
            event.preventDefault();
        }
    });
}

Example: 
$(document).ready(function () { 
       allowDecimalNumberOnly('txtUserSalary'); 
       allowDecimalNumberOnly('txtUserHeight'); 
});

P.S. This function allows the working of delete/backspace and right/left movement keys in textbox.

Set numbers allow only feature to multiple textboxes – jQuery

Below code snippets allows developer to register all textboxes with non-decimal numbers allow only feature at the load of DOM.

function allowNumberOnly(textboxId) {
    $('#' + textboxId).on("keypress", function (event) {
        $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
        if (event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37
            || event.keyCode == 39) {
            return true;
        }
      else if ((event.which < 48 || event.which > 57) && (event.which != 8)){
            event.preventDefault();
        } else return true;
    });
}

Example:

$(document).ready(function () {
      allowNumberOnly('txtUserAge');
      allowNumberOnly('txtUserId');
});

P.S. This function allows the working of delete/backspace and right/left movement keys in textbox.

Set the Index column of the grid / table – jQuery

During development one often come across this issue specially if you are using custom client side grids, that after deleting row in grid, the index of whole grid is disturbed and results in random/missing index values. Well the simple way to resolve this issue is to iterate whole grid and re-index the rows.

$("#tableID tr").each(function (i) {
            $(this).children("td:first").text(i);
        });

P.S. Just mention grid id in selector list and everything is handled by these two lines of codes.

Remove spaces within string value – jquery/Javascript

String.prototype.removeSpaces = function () {
        if (this != null && this != "" && this != undefined)
            return this.replace(/\s+/g, '');
        return this;
    }             

var str = "string value";
str = str.removeSpaces();

Show/Hide Spinner – AngularJS/jQuery/Javascript

<div id="dvProgress" style="display: none; position: absolute; border: none; 
     z-index: 100; width: 100%; height: 100%; filter: alpha(opacity=80);
     -moz-opacity: .8; opacity: .8;">
    <img src="../Images/loader.gif" style="top: 48%; left: 42%;
      position: relative;" />
</div>

function showLoader(mode) {
            if (mode)
               $('#dvProgress').show();
            else
               $('#dvProgress').hide();
            }

Add Remove Days Code Snippet – jQuery/JavaScript

Date.prototype.removeDays = function (days) {
    var dat = new Date(this.valueOf());
    dat.setDate(dat.getDate() - days);
    return dat;
};

var dateVal = new Date();
dateVal = dateVal.removeDays(2)

Date.prototype.addDays= function (days) {
    var dat = new Date(this.valueOf());
    dat.setDate(dat.getDate() + days);
    return dat;
};

var dateValue = new Date();
dateValue = dateValue.addDays(1)