Category Archives: Plugin

jQuery scrollTo Plugin

Official

https://demos.flesler.com/jquery/scrollTo/

Examples

$('body').scrollTo($('#area_' + id), 800, {offset:-100});

jQuery UI Datepicker & DateTimePicker Addon

Download

https://jqueryui.com/download

https://github.com/trentrichardson/jQuery-Timepicker-Addon

https://www.dropbox.com/s/qhwuvv3asnr0vs8/jquery_datetimepicker.zip?dl=0

HTML

<link href="{{BASE_URL}}/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<link href="{{BASE_URL}}/plugins/DateTimePicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />

<script src="{{BASE_URL}}/plugins/jquery-ui-1.10.4.custom.min.js"></script>
<script src="{{BASE_URL}}/plugins/jquery-ui-timepicker-addon.js"></script>

Javascript:

$('.datetimepicker').datetimepicker({
	"dateFormat": "yy-mm-dd",
	"timeFormat": "HH:mm"
});

$('.datepicker').datepicker({
	dateFormat: "yy-mm-dd"
});

$('.datetimepicker').datetimepicker({

"dateFormat": "yy-mm-dd",

"timeFormat": "HH:mm"

});

$('.datepicker').datepicker({

dateFormat: "yy-mm-dd"

});

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": "----",
                        "display setting": {
                           "name": "display setting",
                          "items": {
                            "enable": { "name": "enable",icon: "fa-circle-o"},
                            "disable": { "name": "disable" ,icon: "fa-times"}
                          }
                        },
			"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

113

114

115

116

117

118

119

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": "----",

"display setting": {

"name": "display setting",

"items": {

"enable": { "name": "enable",icon: "fa-circle-o"},

"disable": { "name": "disable" ,icon: "fa-times"}

}

"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

Rex's Personal Site

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

Category Archives: Plugin

jQuery scrollTo Plugin

jQuery UI Datepicker & DateTimePicker Addon

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)