Code Samples

Saturday, December 17, 2016

Capture text pasted into / cut from a text field with JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Capture text pasted into / cut from a text field with JQuery</title>
    <script src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        #txt_complaint {
            width: 300px;
            margin: 10px;
            height: 30px;
            left: calc(50% - 150px);
            position: absolute;
        }
    </style>
</head>
<body>

<input type="text" id="txt_complaint"/>

<script type="text/javascript">
    $("#txt_complaint").bind('paste', function(e) {
        var elem = $(this);

        setTimeout(function() {
            var text = elem.val();
            alert("Value=" + text);
        }, 10);
    });

    $("#txt_complaint").bind('cut', function(e) {
        var elem = $(this);

        setTimeout(function() {
            var text = elem.val();
            alert("Value=" + text);
        }, 10);
    });
</script>

</body>
</html>

Send email with attachment which contains byte[] via java mail

Java Send Email Using Smtp Server

DataSource dataSource = new ByteArrayDataSource(bytes, "application/pdf");
MimeBodyPart pdfBodyPart = new MimeBodyPart();
pdfBodyPart.setDataHandler(new DataHandler(dataSource));
pdfBodyPart.setFileName("bankAdminReport.pdf");

Log / Track / Lookup every request & response in Laravel

Download example code from here

First create a php file under "App\Http\Middleware" named "LogAfterRequest.php" with following contents:

<?php
namespace App\Http\Middleware;

use Closure;

class LogAfterRequest
{

    public function handle($request, Closure $next)
    {
        $this->logRequest($request);
        return $next($request);
    }

    public function terminate($request, $response)
    {
        $this->logResponse($request, $response);
    }

    private function logResponse($request, $response)
    {
        $response = (array)$response;
        $txt = $this->objectToString($response);
        file_put_contents("logs/res_" . time() . "_" . rand(1, 100) . "_" . $this->makeLogFilename($request) . ".txt", $txt);
    }

    private function logRequest($request)
    {
        //$this->cleanLogDirectory();
        $log = json_encode((array)$request->server);
        $log = json_decode("{\"" . substr($log, 15))->parameters;
        $txt = "";
        foreach ($log as $k => $v) {
            $txt .= $k . "===" . str_replace("\n", "", $v) . "\r\n";
        }
        file_put_contents("logs/req_" . time() . "_" . rand(1, 100) . "_" . $this->makeLogFilename($request) . ".txt", $txt);
    }

    private function objectToString($obj, $prefix = "")
    {
        $txt = "";
        foreach ($obj as $k => $v) {
            $t = gettype($v);
            switch ($t) {
                case "object":
                case "array":
                    $k = $k . "\r\n";
                    $v = "\r\n" . $this->objectToString($v, $prefix . "\t");
                    break;
                default:
                    $v = str_replace("\n", "", $v);
            }
            $k = preg_replace("/[^a-zA-Z0-9]+/", "", $k);
            $txt .= $prefix . $k . "===" . $v . "\r\n";
        }
        return $txt;
    }

    private function cleanLogDirectory()
    {
        $files = scandir("logs");
        foreach ($files as $file) {
            if ($file != "." && $file != ".." && !is_dir($file) && file_exists($file)) {
                unlink($file);
            }
        }
    }

    private function makeLogFilename($request)
    {
        $log = json_encode((array)$request->server);
        $log = json_decode("{\"" . substr($log, 15))->parameters;
        $name = str_replace("/", "_", $log->REQUEST_URI);
        return preg_replace("/[^a-zA-Z0-9]+/", "_", $name);
    }
}

?>

and add the following line "\App\Http\Middleware\LogAfterRequest::class" to Karnel.php as follows:

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{

    protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \App\Http\Middleware\LogAfterRequest::class
    ];

    protected $middlewareGroups = [
        'user' => [
            \App\Http\Middleware\LogAfterRequest::class,
            \App\Http\Middleware\LogAfterRequest2::class
        ]
    ];
}

?>

Adding Desktop Notifications to Your Web Applications

Download example from here

<button onclick="notifyMe()">Notify me!</button>

<script type="text/javascript">
    // request permission on page load
    document.addEventListener('DOMContentLoaded', function () {
        if (!Notification) {
            alert('Desktop notifications not available in your browser.');
            return;
        }
        if (Notification.permission !== "granted") {
            Notification.requestPermission();
        }
    });

    function notifyMe() {
        if (Notification.permission !== "granted") {
            Notification.requestPermission();
        }
        else {
            setTimeout(function() {
                var notification = new Notification('Notification Title', {
                    icon: 'images.jpg',
                    body: "Hey there! You've been notified!, Hey there! You've been notified!, Hey there! You've been notified!",
                });

                notification.onclick = function () {
                    alert("Notification event clicked");
                };
            }, 1000);
        }
    }
</script>

Rendering text to html with Angular JS

Download example code from here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rendering text to html with Angular JS</title>
    <script src="angular.js"></script>
    <script src="angular-sanitize.js"></script>
</head>
<body>

<div data-ng-app="myApp" data-ng-controller="MyController">
    <div ng-bind-html="myHTML()"></div>
</div>

<script type="text/javascript">
    var app = angular.module("myApp", ["ngSanitize"]);

    app.controller("MyController", function ($scope, $sce) {
        $scope.snippet = "<div>This is a DIV element; alert('SURE???')</div>";
        $scope.myHTML = function () {
            return $sce.trustAsHtml($scope.snippet);
        }
    });
</script>

</body>
</html>

Tuesday, December 13, 2016

Add remove required validation in angular dynamically in angular js

<!doctype html>
<html>
<head>
    <title>Add remove required validation in angular dynamically in angular js</title>
    <script src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>

<div data-ng-app="myApp" data-ng-controller="MyController">
    <form name="myForm" method="get" validate-form novalidate>
        <div class="container">
            Type:
            <select ng-model="type" my-validation>
                <option value="required">Required</option>
                <option value="not_required">Not Required</option>
            </select>
        </div>
        <div class="container">
            Name:
            <input type="text" name="name" ng-model="name" ng-required="isFieldRequired()" my-validation/>
            <span ng-show="myForm.name.$invalid" style="color:red;font-size:30px;">*</span>
        </div>
        <div><input type="submit" value="Submit"/></div>
    </form>
</div>

<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("MyController", function($scope) {
        $scope.type = "required";
        $scope.isFieldRequired = function() {
            return $scope.type == "required";
        }
    });

    app.directive('validateForm', function () {
        return {
            restrict: 'A',
            link: function ($scope, form) {
                form.on('submit', function () {
                    $(form).find(".container").css("border", "");
                    if($scope.myForm.$invalid) {
                        var error = $scope.myForm.$error;
                         for (var key in $scope.myForm.$error) {
                             for (var index = 0; index < $scope.myForm.$error[key].length; index++) {
                                 var err = $scope.myForm.$error[key][index];
                                 console.log("Field=" + err.$name + ', Error=' + key);
                             }
                         }


                        var firstInvalid = $(form[0].querySelector('.ng-invalid'));

                        if (firstInvalid.length > 0) {
                            firstInvalid.closest(".container").addClass("error_element").css("border", "2px solid red");
                            firstInvalid.focus();
                            return;
                        }
                    }
                    console.log("Form Validated");
                });
            }
        };
    });

    app.directive("myValidation", function() {
        return {
            restrict: "A",
            require: "ngModel",
            link: function(scope, elem, attrs, ctrl) {
                console.log(attrs)
            }
        }
    })
</script>

</body>
</html>

Angularjs Focus Specific Error Input On Form Submit

<!doctype html>
<html>
<head>
    <title>Angularjs Focus Specific Error Input On Form Submit</title>
    <script src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>

<div data-ng-app="myApp" data-ng-controller="MyController">
    <form name="myForm" method="get" validate-form novalidate>
        <div class="container">
            Name: <input type="text" name="name" ng-model="name" ng-required="true" ng-maxlength="10" ng-minlength="5" my-validation/>
        </div>
        <div class="container">
            Email: <input type="email" name="email" ng-model="email" ng-required="true" my-validation/>
        </div>
        <div class="container">
            Type:
            <input type="radio" name="type" ng-model="type" value="A" ng-required="true" my-validation/> A
            <input type="radio" name="type" ng-model="type" value="B" ng-required="true" my-validation/> B
            <input type="radio" name="type" ng-model="type" value="C" ng-required="true" my-validation/> C
        </div>
        <div><input type="submit" value="Submit"/></div>
    </form>
</div>

<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("MyController", function($scope) {
        $scope.name = "";
        $scope.email = "";
    });

    app.directive('validateForm', function () {
        return {
            restrict: 'A',
            link: function ($scope, form) {
                form.on('submit', function () {
                    $(form).find(".container").css("border", "");
                    if($scope.myForm.$invalid) {
                        var error = $scope.myForm.$error;
                         for (var key in $scope.myForm.$error) {
                             for (var index = 0; index < $scope.myForm.$error[key].length; index++) {
                                 var err = $scope.myForm.$error[key][index];
                                 console.log("Field=" + err.$name + ', Error=' + key);
                             }
                         }


                        var firstInvalid = $(form[0].querySelector('.ng-invalid'));

                        if (firstInvalid.length > 0) {
                            firstInvalid.closest(".container").addClass("error_element").css("border", "2px solid red");
                            firstInvalid.focus();
                            return;
                        }
                    }
                    alert("Form Validated");
                });
            }
        };
    });

    app.directive("myValidation", function() {
        return {
            restrict: "A",
            require: "ngModel",
            link: function(scope, elem, attrs, ctrl) {
                console.log(attrs)
            }
        }
    })
</script>

</body>
</html>

Pages

Saturday, December 17, 2016

Tuesday, December 13, 2016