Saturday, January 14, 2017

Implement Redirect Interceptor For All Http Call - Angular JS

Download resources from here


<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-resource.js"></script>

<div data-ng-app="myApp" data-ng-controller="MyCtrl">[[dataFromAngularJS]]</div>

<script type="text/javascript">
    var app = angular.module('myApp', ['ngResource'], function ($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    });
    app.config(['$httpProvider', '$controllerProvider', function ($httpProvider, $controllerProvider, $window) {
        $httpProvider.interceptors.push('redirectInterceptor');
    }])
    .run(function ($rootScope, $window) {
        console.log("MY_APP START RUNNING");
        $rootScope.baseUrl = "/";
    })
    .factory('redirectInterceptor', function ($q, $location, $window, $rootScope) {
        return {
            response: function (response) {
                console.log("GOT DATA VIA AJAX CALL");
                console.log(response);
                return response;
            },
            responseError: function(response) {
                console.log("GOT ERROR VIA AJAX CALL");
                console.log(response);
                response.data = "ERROR";
                return $q.reject(response);
            }
        }
    });

    app.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.dataFromAngularJS = "Data From Angular JS";

        $http.get('data.html').
        success(function(response, status, headers, config) {
            $scope.dataFromAngularJS = "Success=" + response;
        }).
        error(function(response, status, headers, config) {
            $scope.dataFromAngularJS = "Error=" + response;
        });
    }]);
</script>

Abort / Cancel jQuery Ajax Request Example




<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var $xhr = $.ajax({
            url: "search.php",
            type: "POST",
            data: {id: 1, name: "Pritom Kumar"},
            beforeSend: function(xhr){
                xhr.setRequestHeader('X-Test-Header1', 'test-value1');
                xhr.setRequestHeader('X-Test-Header2', 'test-value2');
            },
            dataType: "json"
        }).done(function(data, textStatus, jqXHR) {

        }).fail(function(jqXHR, textStatus, errorThrown) {
            alert("Failed With Reason=" + textStatus);
        });
        setTimeout(function() {
            $xhr.abort();
        }, 100);
    });
</script>


Send Calendar invite using Php & SwiftMailer

Download full source code from here

This code works fine with Gmail, Yahoo, Office 365, Outlook & Others. Some screenshots of different mail system are below.

Sample Request


BEGIN:VCALENDAR
VERSION:2.0
CALSCALE:GREGORIAN
BEGIN:VEVENT
DTSTART:20170118T134600Z
DTEND:20170118T141600Z
DTSTAMP:20170118T132600Z
UID:PKMf3c65f6ac8d3c3e1a99f3464acb6d11723400878
ORGANIZER;CN=email@organizer.pkm:mailto:email@organizer.pkm
ATTENDEE;CUTYPE=INDIVIDUAL;ROLE=REQ-PARTICIPANT;PARTSTAT=NEEDS-ACTION;RSVP=TRUE;
    CN=pritomkucse@yahoo.com;X-NUM-GUESTS=0:mailto:pritomkucse@yahoo.com
ATTENDEE;CUTYPE=INDIVIDUAL;ROLE=REQ-PARTICIPANT;PARTSTAT=NEEDS-ACTION;RSVP=TRUE;
    CN=pritomkucse@gmail.com;X-NUM-GUESTS=0:mailto:pritomkucse@gmail.com
CLASS:PRIVATE
DESCRIPTION:Some Calendar Description
LOCATION:Some Calendar Location
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Some Calendar Summary
TRANSP:OPAQUE
PRIORITY:5
BEGIN:VALARM
DESCRIPTION:REMINDER
TRIGGER:-P0DT0H10M0S
ACTION:DISPLAY
END:VALARM
END:VEVENT
END:VCALENDAR

Sample response

Google Email Inbox View:


Google Calendar Box View:


Yahoo Email Inbox View:


Yahoo Calendar Box View:


Office 365 Email Inbox View:


Customized Email Inbox View



Outlook 2013 Email Inbox View



Calendar Reminder Notification Example



Friday, December 30, 2016

TinyMCE Get Word Counts Using jQuery

Sample code snippet (Full TinyMCE Example)

var log = $(".log"), previous_content = "";
var plugins = [
    "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
    "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
];
tinymce.init({
    selector: ".rich_editor",
    setup: function (editor) {
        editor.on('change redo undo', function () {
            editor.save();
            var body = tinymce.activeEditor.getBody();
            var content = tinymce.trim(body.innerText || body.textContent);
            if(content != previous_content) {
                content = $.trim(content.replace( /[^\w ]/g, " "));
                var word_count = content == "" ? 0 : content.split( /\s+/ ).length;
                log.prepend("Word_Count=" + word_count + "<br/>");
                log.prepend("Editor_Text=" + content + "<br/>");
                previous_content = content;
            }
        });
    }
});

Sample output


Simple TineMCE Editor Example With jQuery

Download full example from here

Sample code snippet


var plugins = [
    "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker aa_custom_text aa_inline_image",
    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
    "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
];
tinymce.init({
    selector: "textarea.rich_editor",
    height: 400,
    plugins: plugins,
    contextmenu: "link image inserttable | cell row column deletetable",

    toolbar1: "newdocument | aa_custom_text aa_inline_image | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
    toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor",
    toolbar3: "table | hr removeformat code | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

    menubar: false,
    statusbar: false,
    toolbar_items_size: 'small'
});

Sample output


How to insert an item into an array at a specific index javascript

var arr = ["X1", "X2", "X3", "X4", "X5"];

Inserting "X2.2" into position "2" without deleting "0" item
arr.splice(2, 0, "X2.2");

First Array Values:
X1,   X2,   X3,   X4,   X5

After insert new value:
X1,   X2,   X2.2,   X3,   X4,   X5

Create GUID / UUID in JavaScript


<script type="text/javascript">
    function guid() {
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
        }

        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    }
    alert(guid());
</script>