Category Archives: Plugin

Form Repeater

Git

https://github.com/DubFriend/jquery.repeater

Example:

https://keenthemes.com/metronic/preview/demo1/crud/forms/widgets/form-repeater.html

bootstrap tagsinput

Official:

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

HTML

<input type="text" class="form-control" name="nickname" data-role="tagsinput">

1	<input type="text" class="form-control" name="nickname" data-role="tagsinput">

$e.tagsinput('add', 'tag1,tag2');

1	$e.tagsinput('add', 'tag1,tag2');

Submit form using Jquery Form Plugin (ajaxform)

Form HTML Example

<form id="iform" name="iform" class="kt-form" action="/b2b/login" method="POST">
	<div class="input-group">
		<input class="form-control" type="text" placeholder="統一編號或身份證" name="account" autocomplete="off">
	</div>
	<div class="input-group">
		<input class="form-control" type="password" placeholder="密碼" name="password">
	</div>
	<div class="row kt-login__extra">
		<div class="col">
			<label class="kt-checkbox">
				<input type="checkbox" name="remember" value="yes"> 記住我
				<span></span>
			</label>
		</div>
		<div class="col kt-align-right">
			<a href="/b2b/forget" id="kt_login_forgot" class="kt-link kt-login__link">忘記密碼?</a>
		</div>
	</div>
	<div class="kt-login__actions">
		<button id="kt_login_signin_submit" class="btn btn-pill kt-login__btn-primary">登入</button>
	</div>
</form>

</div>

</div>

<input type="checkbox" name="remember" value="yes"> 記住我

</label>

</div>

</div>

</div>

</form>

Javascript Example:

$(document).ready(function(){
    $('#signup_form').ajaxForm({
        dataType: 'json', 
		//Values in data object will be generated in the begining
		//that means value could be empty
        data: {
            cat: selected_nodes()
        }, 
		//If extra data is dynamic, use beforeSubmit instead
		beforeSubmit: function(arr, $form, options) {
            //console.log(arr);
            var param = {
               name: 'category', 
               value: selected_nodes(), 
               type: 'text', 
               required: false
            }

            arr.push(param);
        }, 
        success: function(data, statusText, xhr, $form){
            //console.log(data);
            if(typeof data.status == 'undefined'){
                alert(data);
            }else if(data.status == 'fail'){
                alert(data.message);
            }else{
                //console.log(data);
                window.location.href = base_url;
            }
        }, 
        error: function(data){
            //console.log(data);
            var response = data.responseJSON;
            show_response_error(response.errors);
        }
    });

    sample();
});

function selected_nodes(){
    var tree = $("#cat_tree").fancytree("getTree");
    var nodes = tree.getSelectedNodes();
    //console.log(nodes);
    var values = [];
    for(var i = 0; i < nodes.length; i++){
        var node = nodes[i];
        values.push(node.key);
    }
    console.log(values.join(','));
    return values.join(',');
}

function sample(){
    var $c = $('#signup_form');
    set_value('name', 'Rex', $c);
    set_value('pid', 'H155062727', $c);
    set_value('mobile', '0952000000', $c);
    set_value('password', '12345', $c);
    set_value('passwordAgain', '12345', $c);
}

//This function will display errors from laravel validator
function show_response_error(errors){
    var str = '';
    //console.log(errors);

    for(var key in errors){
        var err = errors[key];
        str += err[0] + '\n';
    }
    
    alert(str);
}

$(document).ready(function(){

$('#signup_form').ajaxForm({

dataType: 'json',

//Values in data object will be generated in the begining

//that means value could be empty

data: {

cat: selected_nodes()

//If extra data is dynamic, use beforeSubmit instead

beforeSubmit: function(arr, $form, options) {

//console.log(arr);

var param = {

name: 'category',

value: selected_nodes(),

type: 'text',

required: false

}

arr.push(param);

success: function(data, statusText, xhr, $form){

//console.log(data);

if(typeof data.status == 'undefined'){

alert(data);

}else if(data.status == 'fail'){

alert(data.message);

}else{

//console.log(data);

window.location.href = base_url;

}

error: function(data){

//console.log(data);

var response = data.responseJSON;

show_response_error(response.errors);

}

});

sample();

});

function selected_nodes(){

var tree = $("#cat_tree").fancytree("getTree");

var nodes = tree.getSelectedNodes();

//console.log(nodes);

var values = [];

for(var i = 0; i < nodes.length; i++){

var node = nodes[i];

values.push(node.key);

}

console.log(values.join(','));

return values.join(',');

}

function sample(){

var $c = $('#signup_form');

set_value('name', 'Rex', $c);

set_value('pid', 'H155062727', $c);

set_value('mobile', '0952000000', $c);

set_value('password', '12345', $c);

set_value('passwordAgain', '12345', $c);

}

//This function will display errors from laravel validator

function show_response_error(errors){

var str = '';

//console.log(errors);

for(var key in errors){

var err = errors[key];

str += err[0] + '\n';

}

alert(str);

}

Plugin Official Site:

http://malsup.com/jquery/form/#ajaxForm

Select2 doesn’t work in bootstrap modal

You can type anything in search box if you put a select2 element in modal.

Solution: Remove tabindex=”-1″ from modal HTML.

Reference:

https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal

jQuery Loading plugin

http://carlosbonetti.github.io/jquery-loading/

jquery plugin: fancytree tree view

https://github.com/mar10/fancytree
https://github.com/mar10/fancytree/wiki/TutorialExtensions
http://wwwendt.de/tech/fancytree/demo/#sample-3rd-jQuery-contextMenu.html
實作網站: 三國, topeak

function init(){
	$c = $("#c-tabs-1");

	$("#tree").fancytree({
		checkbox: true,//show checkbox
		source: {
			url: base_url + 'admin/ajax/child_nodes?parent_id=1'
		},
		lazyLoad: function(event, data){
			var node = data.node;
			data.result = $.ajax({
				url: base_url + 'admin/ajax/child_nodes',
				data: {parent_id: node.key}, 
				dataType: "json"
			});
		}, 
		click: function(event, data){
			var node = data.node;
			node_detail(node.key);
		}, 
		//Add custom class name
		createNode: function(event, data){
			var node = data.node;
			var member_type = node.data.member_type;
			//console.log(node.data.member_type);
			if(member_type == 1){
				node.addClass('is_agent');
			}else if(member_type == 2){
				node.addClass('is_member');
			}
		},
		//Get selected node
		select: function(event, data) {
			var selNodes = data.tree.getSelectedNodes();
			selected = $.map(selNodes, function(node){
				return node.key;
			});

			names = $.map(selNodes, function(node){
				return node.title;
			});
			//console.log(selected);
		},
		//Source data is loaded and ready to get all nodes
		init: function(event, data) {
			var tree = $("#cat_tree").fancytree("getTree");

			//Follow script will do, too.
			//var node = tree.getNodeByKey("40");
			//node.setActive(true);
			//node.setSelected(true);

			// Expand all tree nodes
			tree.visit(function(node){
				if(node.key == '40'){
					node.setActive(true);
					node.setSelected(true);
				}
			});
		}
	});

	$.contextMenu({
		selector: "#tree span.fancytree-title",
		items: {
			"edit": {name: "修改", icon: "fa-edit"},
			"normal": {name: "正常", icon: "fa-thumbs-up"},
			"sep2": "----",
			"new_agent": {name: "新增代理", icon: "fa-check-circle"},
			"new_member": {name: "新增會員", icon: "fa-check-square"}
		},
		callback: function(itemKey, opt) {
			console.log(opt);
			var node = $.ui.fancytree.getNode(opt.$trigger);
			alert("select " + itemKey + " on " + node);
		}
	});
}

function node_detail(node_id){
	var params = {
		member_id: node_id
	}
	//console.log(params);
	//return;

	$.get(base_url + 'admin/ajax/node_detail', params, function(data){
		if(typeof data.status == 'undefined'){
			alert(data);
		}else if(data.status == 'fail'){
			alert(data.message);
		}else{
			//console.log(data);
			var node = data.data;
			var $t = $('#detail_table');
			$t.find('.id').html(node.id);
			$t.find('.username').html(node.username);
		}
	});
}

function selected_nodes(){
    var tree = $("#cat_tree").fancytree("getTree");
    var nodes = tree.getSelectedNodes();
    //console.log(nodes);
    var values = [];
    for(var i = 0; i < nodes.length; i++){
        var node = nodes[i];
        values.push(node.key);
    }
    return values;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

function init(){

$c = $("#c-tabs-1");

$("#tree").fancytree({

checkbox: true,//show checkbox

source: {

url: base_url + 'admin/ajax/child_nodes?parent_id=1'

lazyLoad: function(event, data){

var node = data.node;

data.result = $.ajax({

url: base_url + 'admin/ajax/child_nodes',

data: {parent_id: node.key},

dataType: "json"

});

click: function(event, data){

var node = data.node;

node_detail(node.key);

//Add custom class name

createNode: function(event, data){

var node = data.node;

var member_type = node.data.member_type;

//console.log(node.data.member_type);

if(member_type == 1){

node.addClass('is_agent');

}else if(member_type == 2){

node.addClass('is_member');

}

//Get selected node

select: function(event, data) {

var selNodes = data.tree.getSelectedNodes();

selected = $.map(selNodes, function(node){

return node.key;

});

names = $.map(selNodes, function(node){

return node.title;

});

//console.log(selected);

//Source data is loaded and ready to get all nodes

init: function(event, data) {

var tree = $("#cat_tree").fancytree("getTree");

//Follow script will do, too.

//var node = tree.getNodeByKey("40");

//node.setActive(true);

//node.setSelected(true);

// Expand all tree nodes

tree.visit(function(node){

if(node.key == '40'){

node.setActive(true);

node.setSelected(true);

}

});

}

});

$.contextMenu({

selector: "#tree span.fancytree-title",

items: {

"edit": {name: "修改", icon: "fa-edit"},

"normal": {name: "正常", icon: "fa-thumbs-up"},

"sep2": "----",

"new_agent": {name: "新增代理", icon: "fa-check-circle"},

"new_member": {name: "新增會員", icon: "fa-check-square"}

callback: function(itemKey, opt) {

console.log(opt);

var node = $.ui.fancytree.getNode(opt.$trigger);

alert("select " + itemKey + " on " + node);

}

});

}

function node_detail(node_id){

var params = {

member_id: node_id

}

//console.log(params);

//return;

$.get(base_url + 'admin/ajax/node_detail', params, function(data){

if(typeof data.status == 'undefined'){

alert(data);

}else if(data.status == 'fail'){

alert(data.message);

}else{

//console.log(data);

var node = data.data;

var $t = $('#detail_table');

$t.find('.id').html(node.id);

$t.find('.username').html(node.username);

}

});

}

function selected_nodes(){

var tree = $("#cat_tree").fancytree("getTree");

var nodes = tree.getSelectedNodes();

//console.log(nodes);

var values = [];

for(var i = 0; i < nodes.length; i++){

var node = nodes[i];

values.push(node.key);

}

return values;

}

jquery-ui-contextmenu

https://github.com/mar10/jquery-ui-contextmenu

You can use icons in your framework or theme.

public\assets\admin\css\styles.min.css

Ajax (Model)

    static function tree($lang='en'){
        $list = [];
        $nodes = self::direct_children(0, $lang);
        //dd($nodes);
        foreach ($nodes as $key => $node) {
            $node_data = [
                'title' => $node->name, 
                'key' => $node->id, 
                'parent' => $node->parent_id, 
                'children' => self::children($node->id, $lang),
                'expanded' => true
            ];

            if($node_data['children'] != false){
                $node_data['folder'] = true;
            }

            $list[] = $node_data;
        }

        return $list;
    }

    static function direct_children($parent_id, $lang='en'){
        $result = self::where('parent_id', $parent_id)
            ->get();
        return $result;
    }

    static function children($parent_id, $lang, $data=[]){
        $children = self::direct_children($parent_id, $lang);
        //dd($children);
        if(count($children) == 0){
            return $data;
        }else{
            foreach($children as $key => $child){
                //logg(self::direct_children($child->id));
                $node_data = [
                    'title' => $child->name, 
                    'key' => $child->id, 
                    'parent' => $child->parent_id, 
                    'children' => self::children($child->id, $lang)
                ];

                if($node_data['children'] != false){
                    $node_data['folder'] = true;
                }

                $data[] = $node_data;
            }
        }

        return $data;
    }

static function tree($lang='en'){

$list = [];

$nodes = self::direct_children(0, $lang);

//dd($nodes);

foreach ($nodes as $key => $node) {

$node_data = [

'title' => $node->name,

'key' => $node->id,

'parent' => $node->parent_id,

'children' => self::children($node->id, $lang),

'expanded' => true

];

if($node_data['children'] != false){

$node_data['folder'] = true;

}

$list[] = $node_data;

}

return $list;

}

static function direct_children($parent_id, $lang='en'){

$result = self::where('parent_id', $parent_id)

->get();

return $result;

}

static function children($parent_id, $lang, $data=[]){

$children = self::direct_children($parent_id, $lang);

//dd($children);

if(count($children) == 0){

return $data;

}else{

foreach($children as $key => $child){

//logg(self::direct_children($child->id));

$node_data = [

'title' => $child->name,

'key' => $child->id,

'parent' => $child->parent_id,

'children' => self::children($child->id, $lang)

];

if($node_data['children'] != false){

$node_data['folder'] = true;

}

$data[] = $node_data;

}

return $data;

}

Reference:

Events:
https://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeEvents
Node methods:
https://wwwendt.de/tech/fancytree/doc/jsdoc/FancytreeNode.html

API Control Vimeo videos (play and mute) with Flex slider

Plugin: https://github.com/tanepiper/vimeo-froogaloop2/tree/master/javascript

var players = [];
$(document).ready(function(){
    $('.flexslider .slides > li').each(function(index){
        if($(this).find('iframe').length > 0){
            var iframe = $(this).find('iframe')[0];
            players[index] = $f(iframe);
        }else{
            players[index] = null;
        }
    });

    players[0].addEvent('ready', function() {
        players[0].api('play');
        players[0].api('setVolume', 0);
    });

	$('.flexslider.slider-panel-wrapper').flexslider({
		controlNav: false,
		directionNav: false,
		slideshow: false,
		animationSpeed: 800,
		animationLoop: true, 
		multipleKeyboard: true,
		pauseOnHover: true, 
		slideshowSpeed: 5000, 
		before: function(slider){
			change_before(slider);
		}
	});
});

function change_before(slider){
    var curr_index = slider.currentSlide;
    var total = slider.count;
    var direction = slider.direction;
    //console.log(slider);
    //return;

    if(players[curr_index] != null){
        players[curr_index].api('pause');
    }

    if(direction == 'next'){
        var next_index = curr_index + 1;
        if(next_index >= total){
            next_index = 0;
        }
    }else{
        var next_index = curr_index - 1;
        if(next_index < 0){
            next_index = total-1;
        }
    }

    if(players[next_index] != null){
        players[next_index].api('play');
        players[next_index].api('setVolume', 0);
    }
}

var players = [];

$(document).ready(function(){

$('.flexslider .slides > li').each(function(index){

if($(this).find('iframe').length > 0){

var iframe = $(this).find('iframe')[0];

players[index] = $f(iframe);

}else{

players[index] = null;

}

});

players[0].addEvent('ready', function() {

players[0].api('play');

players[0].api('setVolume', 0);

});

$('.flexslider.slider-panel-wrapper').flexslider({

controlNav: false,

directionNav: false,

slideshow: false,

animationSpeed: 800,

animationLoop: true,

multipleKeyboard: true,

pauseOnHover: true,

slideshowSpeed: 5000,

before: function(slider){

change_before(slider);

}

});

function change_before(slider){

var curr_index = slider.currentSlide;

var total = slider.count;

var direction = slider.direction;

//console.log(slider);

//return;

if(players[curr_index] != null){

players[curr_index].api('pause');

}

if(direction == 'next'){

var next_index = curr_index + 1;

if(next_index >= total){

next_index = 0;

}

}else{

var next_index = curr_index - 1;

if(next_index < 0){

next_index = total-1;

}

if(players[next_index] != null){

players[next_index].api('play');

players[next_index].api('setVolume', 0);

}

jQuery Plugin Development Example

(function( $ ){
	var settings = {
        type: 'remain', 
        onUpdate: null
    }

    var $c = null;
    var member_id = 0;
    var parent_id = 0;

    var methods = {
        init : function(options) {
        	settings = $.extend(settings, options);
            //console.log(settings);

            $c = $('#storedValueModal');

            /*
            Because this plugin will be initialized everytime datatable is loaded(refresh), so click listener should be unbind first.
            */
            $c.find('.bt_submit').unbind('click').on('click', function(e){
                e.preventDefault();
                if(settings.type == 'remain'){
                    update_points();
                }else if(settings.type == 'init_quota'){
                    update_quota();
                }
            });

            $c.find('.bt_search').unbind('click').on('click', function(e){
                e.preventDefault();
                get_list();
            });

            $c.find('.quick_search a').unbind('click').on('click', function(e){
                e.preventDefault();
                var $this = $(this);

                $c.find('.quick_search a.active').removeClass('active');
                $this.addClass('active');

                var $f = $c.find('[name="from"]');
                var $t = $c.find('[name="to"]');

                var today = moment();
                if($this.hasClass('today')){
                    $f.val(today.format('MM/DD/YYYY'));
                    $t.val(today.format('MM/DD/YYYY'));
                }else if($this.hasClass('yest')){
                    $f.val(today.clone().add(-1, 'days').format('MM/DD/YYYY'));
                    $t.val(today.clone().add(-1, 'days').format('MM/DD/YYYY'));
                }else if($this.hasClass('this_w')){
                    $f.val(today.clone().add(-7, 'days').format('MM/DD/YYYY'));
                    $t.val(today.format('MM/DD/YYYY'));
                }else if($this.hasClass('last_w')){
                    $f.val(today.clone().add(-14, 'days').format('MM/DD/YYYY'));
                    $t.val(today.clone().add(-7, 'days').format('MM/DD/YYYY'));
                }else if($this.hasClass('this_m')){
                    $f.val(today.clone().add(-30, 'days').format('MM/DD/YYYY'));
                    $t.val(today.format('MM/DD/YYYY'));
                }

                $c.find('.bt_search').trigger('click');
            });

        	return this.each( function() {
			    var $this = $(this);
			    
                $this.on('click', function(e){
                    e.preventDefault();

                    member_id = $this.data('id');
                    parent_id = $this.data('parent');

                    if($this.hasClass('change_remain') == true){
                        settings.type = 'remain';

                        $c.find('.modal_label').html('[帳戶餘額]儲值');
                        $c.find('.point_label').html('帳戶餘額');
                        $c.find('.bt_submit').html('儲值');
                    }else if($this.hasClass('change_quota') == true){
                        settings.type = 'init_quota';

                        $c.find('.modal_label').html('[預設額度]增減');
                        $c.find('.point_label').html('預設額度');
                        $c.find('.bt_submit').html('增減');
                    }

                    show();
                });
			});
        }
    };

    function show(){
        //console.log('show');
        refresh();
        $c.modal();
    }

    function refresh(){
        //console.log('refresh');
        clear();
        get_point_info();
        $c.find('.quick_search .today').trigger('click');
    }

    function clear(){
        set_value('points', '0', $c);
    }

    function get_point_info(callback){
        var params = {
            member_id: member_id
        };
        //console.log(params);

        $.get(base_url + 'admin/ajax/point_info', params, function(data){
            if(typeof data.status == 'undefined'){
                alert(data);
            }else if(data.status == 'fail'){
                alert(data.message);
            }else{
                //console.log(data.data);
                if(typeof callback == 'function'){
                    callback.call(null, data.data);
                }

                fill_form(data.data);
            }
        });
    }

    function fill_form(data){
        $c.find('.member_name').html(data.member.name);

        $c.find('.m_quota').html(data.member.init);
        $c.find('.m_remain').html(data.member.remain);
        $c.find('.p_remain').html(data.parent.remain);
        $c.find('.available').html(data.parent.remain);
    } 

    function get_list(){
        var params = {
            member_id: member_id, 
            from: get_value('from', $c), 
            to: get_value('to', $c)
        };
        //console.log(params);

        $.get(base_url + 'admin/ajax/point_logs', params, function(data){
            if(typeof data.status == 'undefined'){
                alert(data);
            }else if(data.status == 'fail'){
                alert(data.message);
            }else{
                if(typeof callback == 'function'){
                    callback.call(null, data.data, data.extra);
                }

                fill_table(data.data, data.extra);
            }
        });
    }

    function fill_table(data, extra){
        var $t = $c.find('.history_table');
        var $body = $t.find('tbody');
        $body.children().remove();

        for(var i = 0; i < data.length; i++){
            var item = data[i];
            $body.append(
                '<tr>' + 
                    '<td>' + item.id + '</td>' + 
                    '<td>' + get_status(item) + '</td>' + 
                    '<td>' + item.member_name + '</td>' + 
                    '<td>' + item.point + '</td>' + 
                    '<td>' + item.type_name + '</td>' + 
                    '<td>' + item.created_time + '</td>' + 
                    '<td>' + item.note + '</td>' + 
                    '<td>' + item.ip + '</td>' + 
                '</tr>'
            );
        }

        $t.find('tfoot .total').html(extra.total);
    }

    function get_status(item){
        var color_class = 'st-success';
        if(item.editor_status == 2){
            color_class = 'st-danger';
        }else if(item.editor_status == 3){
            color_class = 'st-warning';
        }

        var str = '<div class="status-group">' + 
            '<span class="status ' + color_class + '"></span><span class="st-text">' + item.editor_name + '</span></div>';
        return str;
    }

    function update_quota(){
        var params = {
            member_id: member_id, 
            points: get_value('points', $c), 
            type: 10, 
            note: '上級增減'
        };
        //console.log(params);
        //return;

        $.post(base_url + 'admin/ajax/points', params, function(data){
            if(typeof data.status == 'undefined'){
                alert(data);
            }else if(data.status == 'fail'){
                alert(data.message);
            }else{
                //console.log(data);
                alert('增減成功');
                refresh();

                //Refresh main table
                datatable.refresh();

                if(typeof settings.onUpdate == 'function'){
                    settings.onUpdate.call(this);
                }
            }
        });
    }

    function update_points(){
        var params = {
            member_id: member_id, 
            points: get_value('points', $c), 
            type: 11, 
            note: '上級儲值'
        };
        //console.log(params);
        //return;

        $.post(base_url + 'admin/ajax/points', params, function(data){
            if(typeof data.status == 'undefined'){
                alert(data);
            }else if(data.status == 'fail'){
                alert(data.message);
            }else{
                //console.log(data);
                alert('儲值成功');
                refresh();

                if(typeof settings.onUpdate == 'function'){
                    settings.onUpdate.call(this);
                }
            }
        });
    }

    $.fn.changePoints = function(methodOrOptions) {
    	//If methodOrOptions is a method name
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist.' );
        }    
    };


})( jQuery );

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

(function( $ ){

var settings = {

type: 'remain',

onUpdate: null

}

var $c = null;

var member_id = 0;

var parent_id = 0;

var methods = {

init : function(options) {

settings = $.extend(settings, options);

//console.log(settings);

$c = $('#storedValueModal');

Because this plugin will be initialized everytime datatable is loaded(refresh), so click listener should be unbind first.

$c.find('.bt_submit').unbind('click').on('click', function(e){

e.preventDefault();

if(settings.type == 'remain'){

update_points();

}else if(settings.type == 'init_quota'){

update_quota();

}

});

$c.find('.bt_search').unbind('click').on('click', function(e){

e.preventDefault();

get_list();

});

$c.find('.quick_search a').unbind('click').on('click', function(e){

e.preventDefault();

var $this = $(this);

$c.find('.quick_search a.active').removeClass('active');

$this.addClass('active');

var $f = $c.find('[name="from"]');

var $t = $c.find('[name="to"]');

var today = moment();

if($this.hasClass('today')){

$f.val(today.format('MM/DD/YYYY'));

$t.val(today.format('MM/DD/YYYY'));

}else if($this.hasClass('yest')){

$f.val(today.clone().add(-1, 'days').format('MM/DD/YYYY'));

$t.val(today.clone().add(-1, 'days').format('MM/DD/YYYY'));

}else if($this.hasClass('this_w')){

$f.val(today.clone().add(-7, 'days').format('MM/DD/YYYY'));

$t.val(today.format('MM/DD/YYYY'));

}else if($this.hasClass('last_w')){

$f.val(today.clone().add(-14, 'days').format('MM/DD/YYYY'));

$t.val(today.clone().add(-7, 'days').format('MM/DD/YYYY'));

}else if($this.hasClass('this_m')){

$f.val(today.clone().add(-30, 'days').format('MM/DD/YYYY'));

$t.val(today.format('MM/DD/YYYY'));

}

$c.find('.bt_search').trigger('click');

});

return this.each( function() {

var $this = $(this);

$this.on('click', function(e){

e.preventDefault();

member_id = $this.data('id');

parent_id = $this.data('parent');

if($this.hasClass('change_remain') == true){

settings.type = 'remain';

$c.find('.modal_label').html('[帳戶餘額]儲值');

$c.find('.point_label').html('帳戶餘額');

$c.find('.bt_submit').html('儲值');

}else if($this.hasClass('change_quota') == true){

settings.type = 'init_quota';

$c.find('.modal_label').html('[預設額度]增減');

$c.find('.point_label').html('預設額度');

$c.find('.bt_submit').html('增減');

}

show();

});

}

};

function show(){

//console.log('show');

refresh();

$c.modal();

}

function refresh(){

//console.log('refresh');

clear();

get_point_info();

$c.find('.quick_search .today').trigger('click');

}

function clear(){

set_value('points', '0', $c);

}

function get_point_info(callback){

var params = {

member_id: member_id

};

//console.log(params);

$.get(base_url + 'admin/ajax/point_info', params, function(data){

if(typeof data.status == 'undefined'){

alert(data);

}else if(data.status == 'fail'){

alert(data.message);

}else{

//console.log(data.data);

if(typeof callback == 'function'){

callback.call(null, data.data);

}

fill_form(data.data);

}

});

}

function fill_form(data){

$c.find('.member_name').html(data.member.name);

$c.find('.m_quota').html(data.member.init);

$c.find('.m_remain').html(data.member.remain);

$c.find('.p_remain').html(data.parent.remain);

$c.find('.available').html(data.parent.remain);

}

function get_list(){

var params = {

member_id: member_id,

from: get_value('from', $c),

to: get_value('to', $c)

};

//console.log(params);

$.get(base_url + 'admin/ajax/point_logs', params, function(data){

if(typeof data.status == 'undefined'){

alert(data);

}else if(data.status == 'fail'){

alert(data.message);

}else{

if(typeof callback == 'function'){

callback.call(null, data.data, data.extra);

}

fill_table(data.data, data.extra);

}

});

}

function fill_table(data, extra){

var $t = $c.find('.history_table');

var $body = $t.find('tbody');

$body.children().remove();

for(var i = 0; i < data.length; i++){

var item = data[i];

$body.append(

'<tr>' +

'<td>' + item.id + '</td>' +

'<td>' + get_status(item) + '</td>' +

'<td>' + item.member_name + '</td>' +

'<td>' + item.point + '</td>' +

'<td>' + item.type_name + '</td>' +

'<td>' + item.created_time + '</td>' +

'<td>' + item.note + '</td>' +

'<td>' + item.ip + '</td>' +

'</tr>'

);

}

$t.find('tfoot .total').html(extra.total);

}

function get_status(item){

var color_class = 'st-success';

if(item.editor_status == 2){

color_class = 'st-danger';

}else if(item.editor_status == 3){

color_class = 'st-warning';

}

var str = '<div class="status-group">' +

'<span class="status ' + color_class + '"></span><span class="st-text">' + item.editor_name + '</span></div>';

return str;

}

function update_quota(){

var params = {

member_id: member_id,

points: get_value('points', $c),

type: 10,

note: '上級增減'

};

//console.log(params);

//return;

$.post(base_url + 'admin/ajax/points', params, function(data){

if(typeof data.status == 'undefined'){

alert(data);

}else if(data.status == 'fail'){

alert(data.message);

}else{

//console.log(data);

alert('增減成功');

refresh();

//Refresh main table

datatable.refresh();

if(typeof settings.onUpdate == 'function'){

settings.onUpdate.call(this);

}

});

}

function update_points(){

var params = {

member_id: member_id,

points: get_value('points', $c),

type: 11,

note: '上級儲值'

};

//console.log(params);

//return;

$.post(base_url + 'admin/ajax/points', params, function(data){

if(typeof data.status == 'undefined'){

alert(data);

}else if(data.status == 'fail'){

alert(data.message);

}else{

//console.log(data);

alert('儲值成功');

refresh();

if(typeof settings.onUpdate == 'function'){

settings.onUpdate.call(this);

}

});

}

$.fn.changePoints = function(methodOrOptions) {

//If methodOrOptions is a method name

if ( methods[methodOrOptions] ) {

return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));

} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {

// Default to "init"

return methods.init.apply( this, arguments );

} else {

$.error( 'Method ' + methodOrOptions + ' does not exist.' );

}

};

})( jQuery );

Ajax Upload Plugin – Uploadifive

Document:

http://www.uploadify.com/documentation/

Usage:

<?php 
for($i = 1; $i <= 6; $i++): 
	$file_name = 'file' . $i;
?>
<div class="file-wrap">
	<button class="button  bt-delete" type="button" data-project-id="<?=val($project, 'id')?>" data-index="<?=$i-1?>">Delete</button>
	
	<input id="file_upload<?=$i?>" name="file_upload" type="file" multiple="true" class="bt-select uploadifive">
	
	<span class="file_name"></span>

	<?php 
	if(isset($files[$i-1]) == false || $files[$i-1] == false){
		$class = 'off';
		$url = '#';
		$name = '';
	}else{
		$class = '';
		$url = $files[$i-1];
		$name = basename($url);
	}
	?>
	<a href="<?=$url?>" class="file-link <?=$class?>" target="_blank"><?=$name?></a>

	<div id="queue<?=$i?>" class="queue"></div>
</div>
<?php endfor; ?>

<?php

for($i = 1; $i <= 6; $i++):

$file_name = 'file' . $i;

<button class="button bt-delete" type="button" data-project-id="<?=val($project, 'id')?>" data-index="<?=$i-1?>">Delete</button>

<input id="file_upload<?=$i?>" name="file_upload" type="file" multiple="true" class="bt-select uploadifive">

<?php

if(isset($files[$i-1]) == false || $files[$i-1] == false){

$class = 'off';

$url = '#';

$name = '';

}else{

$class = '';

$url = $files[$i-1];

$name = basename($url);

}

<a href="<?=$url?>" class="file-link <?=$class?>" target="_blank"><?=$name?></a>

<div id="queue<?=$i?>" class="queue"></div>

</div>

<?php endfor; ?>

var upload_app = function(){

    function init(){
        init_uploadfive();

		$('.file-wrap').each(function(index){
			var $wrap = $(this);

			var $link = $wrap.find('.file-link');
			//console.log($link.hasClass('off'));
			if($link.hasClass('off') == true){//no uploaded file
				upload_switch('on', $wrap);
			}else{
				upload_switch('off', $wrap);
			}
		});

		$('.bt-delete').on('click', function(e){
			var $this = $(this);

			if(confirm('Are you sure?')){
				delete_file($this.data('project-id'), $this.data('index'));
			}
		});
    }

    function init_uploadfive(){
    	<?php $timestamp = time();?>
    	$('.file-wrap').each(function(index){
			var $wrap = $(this);

	    	$wrap.find('.uploadifive').uploadifive({
				'auto'             : true,
				'buttonClass': 'button', 
				'height': 50, 
				'width': 165, 
				'queueID'          : $wrap.find('.queue').attr('id'),
				'buttonText': 'Select', 
				'checkScript'      : false,
				'formData'         : {
				   'timestamp' : '<?php echo $timestamp;?>',
				   'token'     : "<?php echo md5('unique_salt' . $timestamp);?>", 
				   'pid': '<?=$project->id?>', 
				   'index': index
				},
				'uploadScript'     : '<?=BASE_URL?>api/members_f/upload_ex_files/',
				'onAddQueueItem' : function(file) {
					$wrap.find('.file_name').show().html(file.name);
				},
				'onUploadComplete' : function(file, data) { 
					//console.log(file);//File info
					//console.log(data);//From server

					data = $.parseJSON(data);
					if(data == null){
						alert(data);
						return false;
					}

					if(data.status == 'fail'){
						alert(data.message);
						return false;
					}

					var res = data.response;

					$wrap.find('.uploadifive').uploadifive('clearQueue');
					$wrap.find('.file_name').hide();
					$wrap.find('.file-link').show().html(file.name).attr('href', res.file_url);
					$wrap.find('.uploadifive-button').hide();
					$wrap.find('.bt-delete').show();
				}
			});
		});
    }

    function upload_switch(mode, $wrap){
    	if(mode == 'on'){
    		$wrap.find('.uploadifive-button').show();
			$wrap.find('.bt-delete').hide();
			$wrap.find('.file-link').hide();
    	}else{
    		$wrap.find('.uploadifive-button').hide();
			$wrap.find('.bt-delete').show();
			$wrap.find('.file-link').show();
    	}
    }

    function delete_file(pid, index){
		var params = {
			pid: pid, 
			index: index
		}

		$.post(base_url + 'api/members_f/delete_ex_files', params, function(data){
			//console.log(data);
			if(typeof data.status == 'undefined'){
				alert(data);
				return;
			}

			if(data.status == 'fail'){
				alert(data.message);
				return;
			}
			
			var $bt = $('.bt-delete[data-index="' + index + '"]');
			var $wrap = $('.file-wrap').has($bt);
			upload_switch('on', $wrap);
		});
	}
 
    return {
        init: init
    }
}();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

var upload_app = function(){

function init(){

init_uploadfive();

$('.file-wrap').each(function(index){

var $wrap = $(this);

var $link = $wrap.find('.file-link');

//console.log($link.hasClass('off'));

if($link.hasClass('off') == true){//no uploaded file

upload_switch('on', $wrap);

}else{

upload_switch('off', $wrap);

}

});

$('.bt-delete').on('click', function(e){

var $this = $(this);

if(confirm('Are you sure?')){

delete_file($this.data('project-id'), $this.data('index'));

}

});

}

function init_uploadfive(){

<?php $timestamp = time();?>

$('.file-wrap').each(function(index){

var $wrap = $(this);

$wrap.find('.uploadifive').uploadifive({

'auto' : true,

'buttonClass': 'button',

'height': 50,

'width': 165,

'queueID' : $wrap.find('.queue').attr('id'),

'buttonText': 'Select',

'checkScript' : false,

'formData' : {

'timestamp' : '<?php echo $timestamp;?>',

'token' : "<?php echo md5('unique_salt' . $timestamp);?>",

'pid': '<?=$project->id?>',

'index': index

'uploadScript' : '<?=BASE_URL?>api/members_f/upload_ex_files/',

'onAddQueueItem' : function(file) {

$wrap.find('.file_name').show().html(file.name);

'onUploadComplete' : function(file, data) {

//console.log(file);//File info

//console.log(data);//From server

data = $.parseJSON(data);

if(data == null){

alert(data);

return false;

}

if(data.status == 'fail'){

alert(data.message);

return false;

}

var res = data.response;

$wrap.find('.uploadifive').uploadifive('clearQueue');

$wrap.find('.file_name').hide();

$wrap.find('.file-link').show().html(file.name).attr('href', res.file_url);

$wrap.find('.uploadifive-button').hide();

$wrap.find('.bt-delete').show();

}

});

}

function upload_switch(mode, $wrap){

if(mode == 'on'){

$wrap.find('.uploadifive-button').show();

$wrap.find('.bt-delete').hide();

$wrap.find('.file-link').hide();

}else{

$wrap.find('.uploadifive-button').hide();

$wrap.find('.bt-delete').show();

$wrap.find('.file-link').show();

}

function delete_file(pid, index){

var params = {

pid: pid,

index: index

}

$.post(base_url + 'api/members_f/delete_ex_files', params, function(data){

//console.log(data);

if(typeof data.status == 'undefined'){

alert(data);

return;

}

if(data.status == 'fail'){

alert(data.message);

return;

}

var $bt = $('.bt-delete[data-index="' + index + '"]');

var $wrap = $('.file-wrap').has($bt);

upload_switch('on', $wrap);

});

}

return {

init: init

}

}();

Select2 – Best select plugin

Official:

https://select2.github.io/

How to set value:

$field.val(value);
$field.trigger('change');

1 2	$field.val(value); $field.trigger('change');

Multiple Select (Like tags)

<select class="select2 multiple" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
</select>

</select>

$('.select2.multiple').select2("destroy");//If necessary
$('.select2.multiple').select2({
    'width': '100%'
});

$('.select2.multiple').select2("destroy");//If necessary

$('.select2.multiple').select2({

'width': '100%'

});

If selection text is blank, try to change font-size:

$('.select2 a span').css({
    'font-size': '13px'
});

$('.select2 a span').css({

'font-size': '13px'

});

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Category Archives: Plugin

Form Repeater

bootstrap tagsinput

Submit form using Jquery Form Plugin (ajaxform)

Form HTML Example

Javascript Example:

Select2 doesn’t work in bootstrap modal

jQuery Loading plugin

jquery plugin: fancytree tree view

Ajax (Model)

API Control Vimeo videos (play and mute) with Flex slider

jQuery Plugin Development Example

Ajax Upload Plugin – Uploadifive

Select2 – Best select plugin

Multiple Select (Like tags)

April 2020
M	T	W	T	F	S	S
« Mar
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30