SIGNUP Form With Validation AngularJs

HTML

<form class="register-form" name="formRegister">
                    <p class="form_logo">
                        <img title="" alt="" src="img/logo.png" class="">
                    </p>
                    <label ng-class="{ 'has-errors' : formRegister.userEmail.$invalid && !formRegister.userEmail.$pristine, 'no-errors' : formRegister.userEmail.$valid}">
                        <input focus id="registerEmails" type="email" placeholder="Email" ng-model="userEmail">
                    </label>              
                    <label ng-class="{ 'has-errors' : formRegister.userPassword.$invalid && !formRegister.userPassword.$pristine, 'no-errors' : formRegister.userPassword.$valid}">
                        <input focus type="password" placeholder="Password" id="userPassword" name="userPassword" ng-model="userPassword" required />
                    </label>
                    <label ng-class="{ 'has-errors' : formRegister.confirmPassword.$invalid && !formRegister.confirmPassword.$pristine, 'no-errors' : formRegister.confirmPassword.$valid}">
                        <input focus type="password" id="confirmPassword" name="confirmPassword" placeholder="Retype Password" ng-model="confirmPassword" required compare-to="userPassword">
                    </label>
                    <div class="msg-block ng-invalid" ng-show="formRegister.$error">
                        <span class="msg-error ng-invalid" ng-show="formRegister.confirmPassword.$error.pwmatch">
                            Password doesn't match.
                        </span>
                    </div>
                    <button ng-click="doRegister()" class="button button-block button-balanced" ng-disabled="formRegister.$invalid" style="padding:0 !important">
                        SIGN UP
                    </button>
                    <p class="message">Already registered? <a ng-href="#/app/login">Sign In</a></p>
                 
                </form>


Directive


//password compare
app.directive('compareTo', [function () {
    return {
        require: "ngModel",
        scope: {
            otherModelValue: "=compareTo"
        },
        link: function (scope, element, attributes, ngModel) {
            var firstPassword = '#' + attributes.compareTo;
            element.on('keyup', function () {
                scope.$apply(function () {
                    var v = element.val() === $(firstPassword).val();
                    ngModel.$setValidity('pwmatch', v);
                });
            });
        }
    };

}]);


//move to next input when enter
app.directive('focus', function () {
    return {
        restrict: 'A',
        link: function ($scope, elem, attrs) {
            elem.bind('keydown', function (e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    e.preventDefault();
                    //          elem.next().focus();

                    if (elem.attr('id') == "registerEmail") {
                        $(':input:eq(' + ($(':input').index(this) + 1) + ')').on('focus', function () {
                            $(this).attr('type', 'date');
                        });
                        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus().click();
                    }
                    else {
                        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
                    }
                }
            });
        }
    }
});

read more

Formate Date to mm-dd-yyyy

//Formate Date to mm-dd-yyyy
    $scope.formatDate = function (date) {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('-');
    }

//To Get

 data.data.Birth_date=$scope.formatDate(data.data.Birth_date);

read more

Extend default Jquery function

For Example to resize canvas

(function($) {
$.fn.extend({
//Let the user resize the canvas to the size he/she wants
resizeCanvas:  function(w, h) {
var c = $(this)[0]
c.width = w;
c.height = h
}
})
})(jQuery)

$("#canvas").resizeCanvas(434, 434)



<canvas id="canvas">
</canvas>

read more

Print with javascript

Javascript

function PrintLabel(jsonData) {  
    jsonData = JSON.parse(jsonData);
    var frame1 = document.createElement('iframe');
    frame1.name = "frame1";
    frame1.style.position = "absolute";
    frame1.style.top = "-1000000px";

    document.body.appendChild(frame1);

    var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
    frameDoc.document.open();
    frameDoc.document.write('<html><head><title> &nbsp;</title><link href="../Content/Default.css" rel="stylesheet" />');
    frameDoc.document.write('</head><body>');
    for (var i = 0; i < jsonData.length; i++) {
        frameDoc.document.write("<div id='dvClient'><label style='font-family:\"Arial\"' id='pName'>" + jsonData[i].ClientName + "</label><div>");
        //frameDoc.document.write('</br>');
        frameDoc.document.write("<label style='font-family:\"Arial\"'>" + "Dr. " + jsonData[i].ProviderName + "</label>");
        frameDoc.document.write('</br>');
        frameDoc.document.write("<label style='font-family:\"Arial\"' id='patientPrint'>" + jsonData[i].PatientName + "  " + jsonData[i].PatientChart + "</label>");
        frameDoc.document.write('</br>');
        frameDoc.document.write("<label style='font-family:\"Arial\"'>" + jsonData[i].DrugName + "  " + jsonData[i].ShortOutDate + "</label>");
        frameDoc.document.write('</br>');
        frameDoc.document.write("<label style='font-family:\"Arial\"'>Qty: " + jsonData[i].outqty + " " + jsonData[i].UnitName + "  Lot: " + jsonData[i].lotno + " Exp: " + jsonData[i].ExpDate + "</label>");
        frameDoc.document.write('</br>');
        frameDoc.document.write("<label style='font-family:\"Arial\"'>" + jsonData[i].sig + "</label>");
        frameDoc.document.write('</br>');
        frameDoc.document.write("</br>");      
        frameDoc.document.write("<label style='font-family:\"Arial\"'>Caution:</label>");
        frameDoc.document.write('</br>');
        frameDoc.document.write("<div id='dvCaution'><label style='font-family:\"Arial\"'>Federal law prohibits </label></br>");
        frameDoc.document.write("<label style='font-family:\"Arial\"'>transfer of this drug to any </label></br>");
        frameDoc.document.write("<label style='font-family:\"Arial\"'>person other than patient </label></br>");
        frameDoc.document.write("<label style='font-family:\"Arial\"'>for whom prescribed.</label></br><div>");
        frameDoc.document.write("<br/>");
        frameDoc.document.write("<label style='font-family:\"Arial\"'>Call your doctor for medical</label></br>");
        frameDoc.document.write("<label style='font-family:\"Arial\"'>advice about drug side</label></br>");
        frameDoc.document.write("<label style='font-family:\"Arial\"'>you may report drug side effects</label></br>");
        frameDoc.document.write("<label style='font-family:\"Arial\"'>effects to the FDA at:</label></br>");
        frameDoc.document.write("<label style='font-family:\"Arial\"'>1-800-FDA-1088</label></br>");
        frameDoc.document.write("<br/>");
        frameDoc.document.write("<br/>");
    }
    frameDoc.document.write('</body></html>');
    frameDoc.document.close();
    setTimeout(function () {
        window.frames["frame1"].focus();
        window.frames["frame1"].print();
        document.body.removeChild(frame1);
    }, 500);
    return false;
}

CSS

/* A4 Landscape*/
@page {
    size: auto;
    margin: 0;

}

#pName {

    zoom: 1.5;

}

#dvClient {

    text-align: center;

}

#dvPatient {

    width: 2.20in;

    height: 1.25in;    

    background: white;    

}

read more

Pagination in mvc with sql with Jquery datatable sorting

SQL




CREATE PROCEDURE soFoo
(
@PageSize INT = NULL,
@CurrentPage INT,      
@firstname VARCHAR(50),
@lastname VARCHAR(50),
@providerid int,
@clientid int ,
@patientChart  VARCHAR(50) ,
@status int
)
AS
BEGIN

    DECLARE @Skip INT
    DECLARE @Take INT    
    DECLARE @SQL VARCHAR(MAX)

if(@providerid <= 0)
    BEGIN
SET @providerid =null
    END
if(@status < 0)
    BEGIN
SET @status=null
    END


IF(LEN(@lastname)=0)
BEGIN
 SET @lastname=null
END
else
begin
SET @lastname='%'+@lastname+'%'
end

SET @Skip = (@CurrentPage - 1) * @PageSize
    SET @Take = @CurrentPage * @PageSize
 
 
    SELECT *,(select statename from states where states.stateid=A.stateid) as statename  FROM (SELECT ROW_NUMBER() OVER
( ORDER BY IsActive desc) rownumber,*
from Patient
where isnull(firstname,'') like coalesce(@firstname,firstname,'')
and isnull(lastname,'') like coalesce(@lastname,lastname,'')
and patientChart = coalesce(@patientChart,patientChart,'')
and IsActive=coalesce(@status,IsActive,'')
AND Patient.clientid=@clientid
) A
      WHERE A.RowNumber > @Skip AND A.RowNumber <= @Take  
END

Controller

 public void Get(Models models)

        {

            int _currentPage = 1;

            DateTime Fromdate = DateTime.Now;

            Fromdate = Fromdate.AddDays(-30);

            DateTime Todate = DateTime.Now;

            string lotno = string.Empty;

            int PageSize = 7;

            int printInId = 0;

            if (!string.IsNullOrEmpty(Request.QueryString["printInId"]))

            {

                if (IsInt(Request.QueryString["printInId"]))

                    printInId = Convert.ToInt32(Request.QueryString["printInId"]);

            }

            if (!int.TryParse(Request.QueryString["pg"], out _currentPage))

            {

                _currentPage = 1;

            }

            if (!string.IsNullOrEmpty(Request.QueryString["fromDate"]))

            {

                Fromdate = Convert.ToDateTime(Request.QueryString["fromdate"]);

            }

            if (!string.IsNullOrEmpty(Request.QueryString["toDate"]))

            {

                Todate = Convert.ToDateTime(Request.QueryString["toDate"]);

            }

models.CurrentPage = _currentPage;

            var relRepository = uow.Repository<RelRepository>();

            var result =RelRepository.ExecWithStoreProcedure("spView @PageSize,@CurrentPage,@FromDate,@ToDate,@lotno,@clientid,@printInId",

                new SqlParameter("PageSize", SqlDbType.Int) { Value = PageSize },

                new SqlParameter("CurrentPage", SqlDbType.Int) { Value = _currentPage },

                new SqlParameter("FromDate", SqlDbType.DateTime, 100) { Value = Fromdate },

                new SqlParameter("ToDate", SqlDbType.DateTime, 100) { Value = Todate },              

                new SqlParameter("printInId", SqlDbType.Int) { Value = printInId }

                ).ToList();

            models.TotalRecordCount = (RelRepository.ExecWithStoreProcedure("spViewCount @FromDate,@ToDate,@printInId",

                new SqlParameter("FromDate", SqlDbType.DateTime, 100) { Value = Fromdate },

                new SqlParameter("ToDate", SqlDbType.DateTime, 100) { Value = Todate },             

                new SqlParameter("printInId", SqlDbType.Int) { Value = printInId }

                ).FirstOrDefault().TotalRecordCount);

            int pageCount = models.TotalRecordCount / PageSize;

            pageCount = models.TotalRecordCount % PageSize > 0 ? pageCount + 1 : pageCount;

            models..TotalPageCount = pageCount;

            models..lstDrugIn = result;

VIEW

<div class="box">

                        <!-- /.box-header -->

                        <div class="box-body no-padding">

                            <div class="row col-md-12">

                                <div class="col-md-6 no-padding">                                   

                                    <div class="col-md-3 no-padding" style="padding-left: 5px !important;">

                                        <label>

                                            <input type="text" id="txtDatepickerFrom" class="form-control datePicker" placeholder="From Date" />

                                        </label>

                                    </div>

                                    <div class="col-md-3 no-padding" style="padding-left: 5px !important;">

                                        <label>

                                            <input type="text" id="txtDatepickerTo" class="form-control datePicker" placeholder="To Date" />

                                        </label>

                                    </div>                                   

                                </div>

                                <div class="col-md-6 no-padding">

                                    <div class="col-md-8"  style="padding-left: 5px !important;">

                                        <label style="width:100%">

                                            @Html.DropDownListFor(m => m.drugid, Model.DrugList, "Select Drug", new { @class = "chosen-select", id = "dropDrugName", name = "drpList" })

                                        </label>

                                    </div>

                                    <div class="col-md-4 no-padding">

                                        <label>

                                            <button class="btn btn-primary" id="btnSearch" onclick="SearchData('search');return false;">Search</button>

                                            <button class="btn btn-primary" id="btnReset" onclick="SearchData('reset');return false;">Reset</button>

                                        </label>

                                    </div>

                                </div>                                                                                            

                            </div>

                            <div class="clearfix">&nbsp;</div>

                            <div class="row col-sm-12">

                                <table id="tableView" class="table tablesorter">

                                    <thead>

                                        <tr>                                        

                                            <th class="textRight">

                                                Price

                                            </th>

                                            <th></th>

                                        </tr>

                                    </thead>

                                    <tbody>

                                        @foreach (var item in @Model.lstDrugIn)

                                        {

                                            <tr>                                                

                                                <td style="text-align:right">@item.balanceqty</td>               

                                                <th class="col-md-2">

                                                </th>

                                            </tr>

                                        }

                                    </tbody>

                                </table>

                            </div>

                        </div>

                        <div class="box-footer">                           

                            <ul class="pagination pagination-sm no-margin pull-right">

                                @if (Model.CurrentPage > 1)

                                {

                                    <li>

                                        <a href="?pg=@(Model.CurrentPage > 1 ? (Model.CurrentPage - 1) : Model.CurrentPage)&fromDate=@(Request.QueryString["fromDate"] != null ? Request.QueryString["fromDate"] : "")&toDate=@(Request.QueryString["toDate"] != null ? Request.QueryString["toDate"] : "")">&laquo;</a>

                                    </li>

                                }

                                else

                                {

                                    <li class="disabled">

                                        <a href="javascript:void(0);">&laquo;</a>

                                    </li>

                                }

                                @if (Model.TotalPageCount > 0)

                                {

                                    for (int i = (Model.CurrentPage > 3 ? (Model.CurrentPage - 2) : 1); i < (Model.CurrentPage > 3 ? (Model.CurrentPage) + 3 : 6); i++)

                                    {

                                        if (Model.TotalPageCount >= i)

                                        {

                                            <li class="@(i == (Model.CurrentPage) ? "active" : "")">

                                                <a class="@(i == (Model.CurrentPage) ? "selected" : "")" href="?pg=@i&fromDate=@(Request.QueryString["fromDate"] != null ? Request.QueryString["fromDate"] : "")&toDate=@(Request.QueryString["toDate"] != null ? Request.QueryString["toDate"] : "")">@(i)</a>

                                            </li>

                                        }

                                    }

                                }

                                @if (Model.CurrentPage < Model.TotalPageCount)

                                {

                                    <li>

                                        <a href="?pg=@(Model.TotalPageCount == Model.CurrentPage ? (Model.TotalPageCount).ToString() : (Model.CurrentPage + 1).ToString())&fromDate=@(Request.QueryString["fromDate"] != null ? Request.QueryString["fromDate"] : "")&toDate=@(Request.QueryString["toDate"] != null ? Request.QueryString["toDate"] : "")">&raquo;</a>

                                    </li>

                                }

                                else

                                {

                                    <li class="disabled"><a href="javascript:void(0);">&raquo;</a></li>

                                }

                            </ul>

                        </div>

                        <!-- /.box-body -->

                    </div>

JQUERY

function getParameterByName(name) {

                name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

                var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

                    results = regex.exec(location.search);

                return results === null ? 0 : decodeURIComponent(results[1].replace(/\+/g, " "));

            }

 var drugName = getParameterByName('drugName');

                if (dateFrom.length > 0) {

                    $('#datepickerFrom').val(dateFrom);

                }

        $('#tableView').DataTable({

            "paging": false,

            "ordering": true,

            "info": false,

            "bFilter": false,

            "bInfo": false,

            "aaSorting": [[0, 'desc']]

        });

        $('#txtPrintInId').on('change', function () {           

            SearchData('Print');

        });

read more

Show loading screen in html page

Loading Image-

https://github.com/tajchert/WaitingDots/blob/master/images/dotsLoadingAnimation.gif

<div id="divLoading">
    </div>

To show

 $("#divLoading").addClass('show');

CSS


#divLoading
{
    display : none;
}
    #divLoading.show {
        display: block;
        position: fixed;
        z-index: 100;      
        background-image: url('../images/loading.gif');
        background-color: #666;
        opacity: 0.4;
        background-repeat: no-repeat;
        background-position: center;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
    }
#loadinggif.show
{
    left : 50%;
    top : 50%;
    position : absolute;
    z-index : 101;
    width : 32px;
    height : 32px;
    margin-left : -16px;
    margin-top : -16px;
}
div.content {
   width : 1000px;
   height : 1000px;

}

read more

Integrate share with facebook,linkedin,twitter,google plus

HTML

<body>

    <nav>      
        <ul class="clearfix">

            <li>
                <ul>

             
                    <li><a href="javascript:void(0)" id="shareFB"><span class="fontawesome-facebook"></span></a></li>

                    <li><a id="shareTwit" href="http://twitter.com/share"><span class="fontawesome-twitter"></span></a></li>

                    <li><a id="googleLink"><span class="fontawesome-google-plus"></span></a></li>


                    <li>
                        <a id="shareLink" href="#">
                            <span class="fontawesome-linkedin"></span>
                        </a>
                    </li>

                    <li>
                        <a id="mailLink" href="#">
                            <span class="fontawesome-envelope"></span>
                        </a>
                    </li>
                </ul>

            </li>

        </ul>
    </nav>

</body>


JAVASCRIPT

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js">
</script>
<script src="https://connect.facebook.net/en_US/all.js">
</script>
<script type="text/javascript">
    var url = document.URL;
    var message = 'Healthcare for free';
    $(document).ready(function () {

        FB.init({
            appId: '247708942243803'
        });
        $('#shareFB').click(function (e) {
            e.preventDefault();
            FB.ui(
            {
                method: 'share',
                name: message,
                href: url,
                caption: message,
                description: message,
                message: '',

            });
        });
    });
</script>

<script>
    <!--Twitter-->
    $('#shareTwit').click(function (event) {
        var width = 575,
            height = 400,
            left = ($(window).width() - width) / 2,
            top = ($(window).height() - height) / 2,
            url = this.href,
            opts = 'status=1' +
                     ',width=' + width +
                     ',height=' + height +
                     ',top=' + top +
                     ',left=' + left;

        window.open(url, 'twitter', opts);

        return false;
    });



    //Google Plus

    $('#googleLink').click(function () {
        $('#googleLink').attr('href', 'https://plus.google.com/share?url=' + url + '');
        window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
        return false;
    });

    //linkedIn


    $('#shareLink').click(function () {
        $('#shareLink').attr('href', 'http://www.linkedin.com/shareArticle?mini=true&url=' + url + '&title=' + message + '&source=' + message + '');
        window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;
    });

    //Email

    $('#mailLink').click(function () {
        $('#mailLink').attr('href', 'mailto:?body=' + url + '&subject=' + message + '');

    });

    //Share with friends

    $('.ShareWithFreinds').click(function () {
        ShowDialog('#DivShareWithFreinds', 'Article Share with Freinds');
    });

</script>


CSS


Reset css -   http://meyerweb.com/eric/tools/css/reset/ 



<style type="text/css">
    @charset "utf-8";
    @import url('css/api.css');
    @import url('css/reset.css');

    [class*="fontawesome-"]:before {
        font-family: 'FontAwesome', sans-serif;
    }


    a {
        text-decoration: none;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }

    .clearfix {
        *zoom: 1;
    }

        .clearfix:before, .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }


    /* ---------- NAVIGATION ---------- */

    nav {
            float: right;
    margin-top: -18px;
    position: fixed;
    margin-left: -17px;
    }

        nav ul {
            background-color: #505664;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            display: inline-table;
            position: relative;
        }

            nav ul li {
                float: left;
            }

                nav ul li a {
                    color: #6daeb0;
                    display: block;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                    width: 60px;
                }

                    nav ul li a:hover {
                        color: #fff;
                    }

                nav ul li ul {
                    background-color: #6daeb0;
                    margin-top: 20px;
                    padding: 5px 0;
                    position: absolute;
                }

                    nav ul li ul:before {
                        background-color: #6daeb0;
                        content: "";
                        display: block;
                        height: 8px;
                        left: 26px; /* (nav ul li a { width: 60px; } / 2) - (nav ul li ul:before { width: 8px; } / 2) */
                        position: absolute;
                        top: -4px;
                        transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -webkit-transform: rotate(45deg);
                        width: 8px;
                        z-index: 1000;
                    }

                    nav ul li ul li {
                        float: none;
                    }

                        nav ul li ul li a {
                            color: #fff;
                        }

                            nav ul li ul li a:hover {
                                background-color: #5d9799;
                            }

</style>

read more

Call function if clicked except perticular class or id

$(document).click(function (e) {
    if (!$(e.target).is('.addSig')) {
        if ($('.tblSig').css('display') == 'none')
            $('.tblSig').show('slow')
        else
            $('.tblSig').hide('slow')
    }
    else {
        $('.tblSig').hide('slow')
    }
});

read more

Open page in new page and Print div - javascript

 //Print label

    function PrintLabel(inId) {
        var printLabelContent = "<html><head><title> &nbsp;</title></head><body><label style='font-family:\"Free 3 of 9\"' id='barcodeCode'>" + inId + "</label></br><label style='font-family:\"Arial\"' id='barcodeCodeId'>" + inId + "</label>" + '</body></html>';
        var thePopup = window.open('', "Customer Listing", "menubar=0,location=0,height=700,width=700");            
        thePopup.document.body.innerHTML = printLabelContent;
        var css = '@@page {size: auto;margin: 0; }',
        head = thePopup.document.head || thePopup.document.getElementsByTagName('head')[0],
        style = thePopup.document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }
        head.appendChild(style);      
        thePopup.document.getElementById('barcodeCode').style.zoom = "10.0";      
        thePopup.print();
        return false;
    }

read more

Enable live click in Jquery

to enable .live click in jquery add this function in document ready

  jQuery.fn.extend({
            live: function (event, callback) {
                if (this.selector) {
                    jQuery(document).on(event, this.selector, callback);
                }
            }
        });

full code ----

$(document).ready(function () {

        jQuery.fn.extend({
            live: function (event, callback) {
                if (this.selector) {
                    jQuery(document).on(event, this.selector, callback);
                }
            }
        });

        $('.sectionCredit').live('click', function () {        
            var $this = $(this);
            $('.sectionCredit').each(function () {
                if ($(this).hasClass('active')) {
                    $(this).removeClass('active');
                }
            });
            $this.addClass('active');
        })
    });

read more