Category Archives: Plugin

Jquery Repeater

Github:

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

Javascript

<script src="/plugins/jquery.repeater.min.js"></script>
<script>
var valid_products = '{!! $row->valid_products !!}';

$(document).ready(function(){
    $('#bt_submit').on('click', function(e){
        $('#iform').submit();
    });

    $('#iform').ajaxForm({
        dataType: 'json',
        beforeSubmit: function(arr, $form, options) {
            //console.log(arr);
            var new_arr = [];
            for(var i = 0; i < arr.length; i++){
              var name = arr[i];
              var pattern = /valid_products.+/;
              if(pattern.test(name) == false){
                new_arr.push(arr[i]);
              }
            }

            var values = $('.repeater').repeaterVal();
            var item = {
              name: 'valid_products', 
              value: values
            }
            new_arr.push(item);
            //console.log(values);
            //return false;

            return new_arr;
        },
        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 + 'store/{{$controller}}';
            }
        },
        error: function(data){
            console.log(data);
            var res = data.responseJSON;
            show_response_error(res.errors);
        }
    });

    $('[name="discount_type"]').trigger('change');

    var $repeater = $('.repeater').repeater({
      isFirstItemUndeletable: true,
      defaultValues: {
          'discount': 100
      },
    });

    valid_products = $.parseJSON(valid_products);
    console.log(valid_products);
    $repeater.setList(valid_products);
});
</script>

var valid_products = '{!! $row->valid_products !!}';

$(document).ready(function(){

$('#bt_submit').on('click', function(e){

$('#iform').submit();

});

$('#iform').ajaxForm({

dataType: 'json',

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

//console.log(arr);

var new_arr = [];

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

var name = arr[i];

var pattern = /valid_products.+/;

if(pattern.test(name) == false){

new_arr.push(arr[i]);

}

var values = $('.repeater').repeaterVal();

var item = {

name: 'valid_products',

value: values

}

new_arr.push(item);

//console.log(values);

//return false;

return new_arr;

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 + 'store/{{$controller}}';

}

error: function(data){

console.log(data);

var res = data.responseJSON;

show_response_error(res.errors);

}

});

$('[name="discount_type"]').trigger('change');

var $repeater = $('.repeater').repeater({

isFirstItemUndeletable: true,

defaultValues: {

'discount': 100

});

valid_products = $.parseJSON(valid_products);

console.log(valid_products);

$repeater.setList(valid_products);

});

</script>

HTML

<div class="form-group {{$field[0]}} repeater">
    <label for="{{$field[0]}}" class="col-md-3 control-label">
        {{$field[1]}}
        @if(isset($field[2]) && $field[2] == true)
        *
        @endif
    </label>
    <div class="col-md-9 filled">
        <input data-repeater-create type="button" value="Add"/>
        <table class="table table-hover dynamic_values">
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Discount</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody data-repeater-list="{{$field[0]}}">
                <tr data-repeater-item>
                    <td>
                        <select class="form-control product-list" name="item_code">
                            <option value="">-- Select --</option>
                            @foreach($options as $key => $item)
                                @php
                                    $opt_value = $item->item_code;
                                    $display = $item->name . ' (' . $item->subtitle . ') : $' . $item->price;
                                @endphp
                                <option value="{{$opt_value}}">{{$display}}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <input type="text" class="form-control" name="discount" value="100">
                    </td>
                    <td>
                        <input data-repeater-delete type="button" value="Delete"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@if(isset($field[2]) && $field[2] == true)

@endif

</label>

<thead>

<tr>

<th>Discount</th>

<th>Action</th>

</tr>

</thead>

<td>

<option value="">-- Select --</option>

@foreach($options as $key => $item)

@php

$opt_value = $item->item_code;

$display = $item->name . ' (' . $item->subtitle . ') : $' . $item->price;

@endphp

<option value="{{$opt_value}}">{{$display}}</option>

@endforeach

</select>

</td>

<td>

</td>

<td>

</td>

</tr>

</tbody>

</table>

</div>

Handling Ajax Response Errors From Laravel Form Request Validation: lalavalidate.js

//A jquery plugin to handle error response from server and the server side
//use Laravel form validator to verify fields.
(function( $ ){
    var settings = {
        default_msg: '請檢查必填欄位', 
        show_default_msg: true,
        err_class_name: 'lala_error'
    }

    $.fn.lalavalidate = function(methodOrOptions) {
        //If methodOrOptions is a method name
        //console.log(methodOrOptions);
        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.' );
        }    
    };

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

            return this.each( function() {
                var $form = $(this);
                
                $form.find('input, select, textarea').each(function(){
                    var $e = $(this);
                    var type = $e[0].type;

                    if(type == 'radio' || type == 'checkbox'){
                        //console.log(type);
                        var name = $e.attr('name');
                        var $last = $form.find('[name="' + name + '"]:last');

                        $e.on('focus', function(){
                            var $err = $last.parent().find('.' + err_class_name);
                            if($err.length > 0){
                                $err.remove();
                            }
                        });
                    }else{
                        $e.on('focus', function(){
                            var $parent = $e.parent();
                            var $err = $parent.find('.' + err_class_name);
                            if($err.length > 0){
                                $err.remove();
                            }
                        });
                    }
                });
            });
        },
        show_errors: function(response){
            //console.log(response);
            return this.each( function() {
                var $this = $(this);

                //Process responseJSON first
                if (typeof response.responseJSON != 'undefined') {
                    var json = response.responseJSON;
                    var errors = json.errors;
                    //console.log(errors);
                    if(settings.show_default_msg == true){
                        alert(settings.default_msg);
                    }

                    display_field_errors($this, errors);
                }else if(typeof response.responseText != 'undefined') {
                    alert(response.responseText);
                }else{
                    alert(response);
                }
            });
        }
    };

    function display_field_errors($form, errors){
        var err_class_name = settings.err_class_name;

        for(var key in errors){
            var err = errors[key];
            var $el = $form.find('[name="' + key + '"]');

            if($el.length != 0){
                var type = $el[0].type;

                if(type == 'radio' || type == 'checkbox'){
                    var $last = $el.last();
                    var $err = $last.parent().find('.' + err_class_name);
                    if($err.length > 0){
                        $err.remove();
                    }

                    var $error = $('<div class="' + err_class_name + '" style="display:block;color:#ff0000;">' + err[0] + '</div>');
                    $last.parent().append($error);
                }else{
                    var $err = $el.parent().find('.' + err_class_name);
                    if($err.length > 0){
                        $err.remove();
                    }

                    var $error = $('<div class="' + err_class_name + '" style="display:block;color:#ff0000;">' + err[0] + '</div>');
                    $el.parent().append($error);
                }
            }
        }
    }

})( jQuery );

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

//A jquery plugin to handle error response from server and the server side

//use Laravel form validator to verify fields.

(function( $ ){

var settings = {

default_msg: '請檢查必填欄位',

show_default_msg: true,

err_class_name: 'lala_error'

}

$.fn.lalavalidate = function(methodOrOptions) {

//If methodOrOptions is a method name

//console.log(methodOrOptions);

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.' );

}

};

var methods = {

init : function(options) {

settings = $.extend(settings, options);

var err_class_name = settings.err_class_name;

//console.log(settings);return;

return this.each( function() {

var $form = $(this);

$form.find('input, select, textarea').each(function(){

var $e = $(this);

var type = $e[0].type;

if(type == 'radio' || type == 'checkbox'){

//console.log(type);

var name = $e.attr('name');

var $last = $form.find('[name="' + name + '"]:last');

$e.on('focus', function(){

var $err = $last.parent().find('.' + err_class_name);

if($err.length > 0){

$err.remove();

}

});

}else{

$e.on('focus', function(){

var $parent = $e.parent();

var $err = $parent.find('.' + err_class_name);

if($err.length > 0){

$err.remove();

}

});

}

});

show_errors: function(response){

//console.log(response);

return this.each( function() {

var $this = $(this);

//Process responseJSON first

if (typeof response.responseJSON != 'undefined') {

var json = response.responseJSON;

var errors = json.errors;

//console.log(errors);

if(settings.show_default_msg == true){

alert(settings.default_msg);

}

display_field_errors($this, errors);

}else if(typeof response.responseText != 'undefined') {

alert(response.responseText);

}else{

alert(response);

}

});

}

};

function display_field_errors($form, errors){

var err_class_name = settings.err_class_name;

for(var key in errors){

var err = errors[key];

var $el = $form.find('[name="' + key + '"]');

if($el.length != 0){

var type = $el[0].type;

if(type == 'radio' || type == 'checkbox'){

var $last = $el.last();

var $err = $last.parent().find('.' + err_class_name);

if($err.length > 0){

$err.remove();

}

var $error = $('<div class="' + err_class_name + '" style="display:block;color:#ff0000;">' + err[0] + '</div>');

$last.parent().append($error);

}else{

var $err = $el.parent().find('.' + err_class_name);

if($err.length > 0){

$err.remove();

}

var $error = $('<div class="' + err_class_name + '" style="display:block;color:#ff0000;">' + err[0] + '</div>');

$el.parent().append($error);

}

})( jQuery );

Usage:

$(document).ready(function () {
    $('#iform').lalavalidate();
        
    $('#iform').ajaxForm({
        dataType: 'json',
        beforeSubmit: function (arr, $form, options) {
            if ($('#agree').prop('checked') == false) {
                alert('勾選同意使用條款及合約後才可送出表單');
                return false;
            }

            var pass1 = $('[name="password"]').val();
            var pass2 = $('[name="rpassword"]').val();
            if (pass1 != pass2) {
                alert('請輸入相同的密碼');
                return false;
            }
        },
        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);
                alert('註冊成功，請至您的電子郵件信箱收取確認信');
                window.location.href = base_url;
            }
        },
        error: function (data) {
            //console.log(data);
            $('#iform').lalavalidate('show_errors', data);
        }
    });
});

$(document).ready(function () {

$('#iform').lalavalidate();

$('#iform').ajaxForm({

dataType: 'json',

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

if ($('#agree').prop('checked') == false) {

alert('勾選同意使用條款及合約後才可送出表單');

return false;

}

var pass1 = $('[name="password"]').val();

var pass2 = $('[name="rpassword"]').val();

if (pass1 != pass2) {

alert('請輸入相同的密碼');

return false;

}

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);

alert('註冊成功，請至您的電子郵件信箱收取確認信');

window.location.href = base_url;

}

error: function (data) {

//console.log(data);

$('#iform').lalavalidate('show_errors', data);

}

});

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>

    {{ csrf_field() }}
</form>

</div>

</div>

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

</label>

</div>

</div>

</div>

</form>

Javascript Example:

$(document).ready(function(){
    $('#iform').lalavalidate();

    $('#iform').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){
            $('#iform').lalavalidate('show_errors', data);
        }
    });

    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(){

$('#iform').lalavalidate();

$('#iform').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){

$('#iform').lalavalidate('show_errors', data);

}

});

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 );

Reference:

https://stackoverflow.com/questions/1117086/how-to-create-a-jquery-plugin-with-methods

Rex's Personal Site

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

Category Archives: Plugin

Jquery Repeater

Handling Ajax Response Errors From Laravel Form Request Validation: lalavalidate.js

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

July 2020
M	T	W	T	F	S	S
« Jun
		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	31