Friday, July 28, 2017

How to find current url & last 2 character of current url using java script.

Current URL & Pathname :

var pathname = window.location.pathname;       // Returns path only
var url      = window.location.href;                     // Returns full URL
alert(pathname);
alert(url);


Current URL Last 2 Character:

var url      = window.location.href.slice(-2);     // Returns last 2 character from current URL.
alert(url);

var member = "my name is amar";
var last2 = member.slice(-2);
alert(last2);        // returns "ar"

$rest = substr("abcdef", -1);    // returns "f"

Wednesday, February 15, 2017

How to Show listing of users, no of record, pagination and search fetch data using angular js?

JS file:

var adminmodule=angular.module('tasteapp',['ngRoute','ngResource','ui.bootstrap']);

 adminmodule.filter('startFrom', function () {
    return function(input, start) {
         if (!angular.isArray(input)) {
            return [];
         }
         start = +start; //parse to int
        return input.slice(start);
   };
});

OR

adminmodule.filter('startFrom', function() {
    return function(input, start) {
        if (!input || !input.length) { return; }
        start = +start; //parse to int
        return input.slice(start);
    }
});


/*Users management*/

adminmodule.controller("userslist", ["$scope", "$http","$filter","$timeout" , function($scope, $http,$filter,$timeout) {

    $scope.message="user history";
    $http.get(base_ur+"/users/userlistdata").success(function(response) {//$scope.userdata = response;
    $scope.users = response;

    if($scope.users.length > 0)
        {
            for(var i=0; i< $scope.users.length;i++)
            {
                $scope.users[i].sr_no = i+1;
            }
        }

        $scope.currentPage = 1; //current page
        $scope.entryLimit = 10; //max no of items to display in a page
        $scope.filteredItems = $scope.users.length; //Initially for no filter
        console.log($scope.filteredItems);
        $scope.totalItems = $scope.users.length;

        $scope.itemsPerPage = $scope.entryLimit;
    });

    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() {
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.setItemsPerPage = function(num) {
      $scope.itemsPerPage = num;
      $scope.currentPage = 1; //reset to first paghe
    };
 
    $scope.sort = function(keyname){
    $scope.sortKey = keyname;   //set the sortKey to the param passed
    $scope.reverse = !$scope.reverse; //if true make it false and vice versa
  }
}])

Controller file:

  public function userlistdata()
    {      
        $usersresult = $this->usermodel->getuserList();
        echo json_encode($usersresult);    

    }


View file:

 <tr ng-repeat="user in filtered = (users | filter:search | orderBy : sortKey :reverse) | startFrom:(currentPage-1)*entryLimit  | limitTo:entryLimit"></tr>

 <div class="col-md-12" style = "margin-left: 10px;" ng-show="filteredItems > 0">
 <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" items-per-page="itemsPerPage"></pagination>
 </div>

Thursday, April 23, 2015

jQuery Function with Examples

jQuery Functions with example which used mostly in web development

To use following functions you have to include jQuery file from jquery.com


.add() : Add elements to the set of matched elements. Example Add div to all p elements
?
1
$("p").add("div")


.addBack() : Add the previous set of elements on the stack to the current set, optionally filtered by a selector. Example Add class "background" to all the "div" having class "after"
?
1
$("div.after").find("p").addBack().addClass("background");


.after(): Insert content, specified by the parameter, after each element in the set of matched elements. Example Add the content "Test Message" just after "div" having "after" class
?
1
$('div.after').after('Test Message');


.ajaxComplete(): Register a handler to be called when Ajax requests complete. Example ajaxComplete will be called automatically just after finishing the ajax
?
1
2
3
4
5
6
$(document).ajaxComplete(function(event,request, settings) {
alert( "Request Complete." );
});
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax/test.html" );
});


.ajaxError(): Register a handler to be called when Ajax requests complete with an error. Example ajaxError will be called automatically just after finishing the ajax with error
?
1
2
3
4
5
6
$(document).ajaxError(function(event, jqxhr, settings, exception) {
alert( "Request Complete with Error." );
});
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax/test.html" );
});


.ajaxSend(): Attach a function to be executed before an Ajax request is sent. This is an Ajax Event. Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all handlers that have been registered with the .ajaxSend() method are executed at this time. Example ajaxSend will be called automatically when ajax is about to be sent.
?
1
2
3
4
5
6
$(document).ajaxSend(function(event, jqxhr, settings) {
alert( "Ajax Request just send" );
});
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax/test.html" );
});


.ajaxStart(): Register a handler to be called when the first Ajax request begins. This is an Ajax Event. Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time. Example ajaxStart will be called automatically when ajax request start
?
1
2
3
4
5
6
$(document).ajaxStart(function() {
alert( "Ajax Request just send" );
});
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax/test.html" );
});


.ajaxStop(): Description: Register a handler to be called when all Ajax requests have completed. Example Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.
?
1
2
3
$( ".log" ).ajaxStop(function() {
$(this).text( "Triggered ajaxStop handler." );
});


.ajaxSuccess(): Attach a function to be executed whenever an Ajax request completes successfully. Example Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.
?
1
2
3
$(document).ajaxSuccess(function() {
$( ".log" ).text( "Triggered ajaxSuccess handler." );
});


.andSelf():Add the previous set of elements on the stack to the current set. Example This function has been deprecated and is now an alias for .addBack(), which should be used with jQuery 1.8 and later. As described in the discussion for .end(), jQuery objects maintain an internal stack that keeps track of changes to the matched set of elements. When one of the DOM traversal methods is called, the new set of elements is pushed onto the stack. If the previous set of elements is desired as well, .andSelf() can help. animate(): Perform a custom animation of a set of CSS properties. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive. Example
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('a.clickMe').click(function() {
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>
Animation complete.');</div>
}
});
});


.contents(): Get the children of each element in the set of matched elements, including text and comment nodes. Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search throughthe immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .contents() and .children() methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.


Form Submit By Ajax - Simple Example
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function submitme(){
    var data= $('#form').serialize();
    var url ="/ajax/submiturl";
 
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: function(data){
            alert(data);
        },
        dataType: 'json'
    });
 
}