traffic-counter/assets/scripts/x-editable.demo.js

/**
 * Theme: Ninja Admin Template
 * Author: NinjaTeam
 * Module/App: X-Editable
 */

(function($) {
	"use strict";

	$(document).ready(function(){
		$('#inline-username').editable({
			type: 'text',
			pk: 1,
			name: 'username',
			title: 'Enter username',
			mode: 'inline'
		});

		$('#inline-firstname').editable({
			validate: function(value) {
				if($.trim(value) == '') return 'This field is required';
			},
			mode: 'inline'
		});

		$('#inline-sex').editable({
			prepend: "not selected",
			mode: 'inline',
			source: [
				{value: 1, text: 'Male'},
				{value: 2, text: 'Female'}
			],
			display: function(value, sourceData) {
				var colors = {"": "#98a6ad", 1: "#5fbeaa", 2: "#5d9cec"},
					elem = $.grep(sourceData, function(o){return o.value == value;});

				if(elem.length) {
					$(this).text(elem[0].text).css("color", colors[value]);
				} else {
					$(this).empty();
				}
			}
		});

		$('#inline-status').editable({mode: 'inline'});

		$('#inline-group').editable({
			showbuttons: false,
			mode: 'inline'
		});

		$('#inline-dob').editable({mode: 'inline'});
		$('#inline-event').editable({mode: 'inline'});

		$('#inline-comments').editable({
			showbuttons: 'bottom',
			mode: 'inline'
		});

		$('#inline-fruits').editable({
			pk: 1,
			limit: 3,
			source: [
				{value: 1, text: 'banana'},
				{value: 2, text: 'peach'},
				{value: 3, text: 'apple'},
				{value: 4, text: 'watermelon'},
				{value: 5, text: 'orange'}
			],
			mode: 'inline'
		}); 
	});

	$("#switch-inline").on("change",function(){
		if ($(this).prop("checked")){
			destroy_all();
			$('#inline-username').editable({
				type: 'text',
				pk: 1,
				name: 'username',
				title: 'Enter username',
				mode: 'inline'
			});

			$('#inline-firstname').editable({
				validate: function(value) {
					if($.trim(value) == '') return 'This field is required';
				},
				mode: 'inline'
			});

			$('#inline-sex').editable({
				prepend: "not selected",
				mode: 'inline',
				source: [
					{value: 1, text: 'Male'},
					{value: 2, text: 'Female'}
				],
				display: function(value, sourceData) {
					var colors = {"": "#98a6ad", 1: "#5fbeaa", 2: "#5d9cec"},
						elem = $.grep(sourceData, function(o){return o.value == value;});

					if(elem.length) {
						$(this).text(elem[0].text).css("color", colors[value]);
					} else {
						$(this).empty();
					}
				}
			});

			$('#inline-status').editable({mode: 'inline'});

			$('#inline-group').editable({
				showbuttons: false,
				mode: 'inline'
			});

			$('#inline-dob').editable({mode: 'inline'});
			$('#inline-event').editable({mode: 'inline'});

			$('#inline-comments').editable({
				showbuttons: 'bottom',
				mode: 'inline'
			});

			$('#inline-fruits').editable({
				pk: 1,
				limit: 3,
				source: [
					{value: 1, text: 'banana'},
					{value: 2, text: 'peach'},
					{value: 3, text: 'apple'},
					{value: 4, text: 'watermelon'},
					{value: 5, text: 'orange'}
				],
				mode: 'inline'
			}); 
		}else{
			destroy_all();
			$('#inline-username').editable({
				type: 'text',
				pk: 1,
				name: 'username',
				title: 'Enter username'
			});

			$('#inline-firstname').editable({
				validate: function(value) {
					if($.trim(value) == '') return 'This field is required';
				}
			});

			$('#inline-sex').editable({
				prepend: "not selected",
				source: [
					{value: 1, text: 'Male'},
					{value: 2, text: 'Female'}
				],
				display: function(value, sourceData) {
					var colors = {"": "#98a6ad", 1: "#5fbeaa", 2: "#5d9cec"},
						elem = $.grep(sourceData, function(o){return o.value == value;});

					if(elem.length) {
						$(this).text(elem[0].text).css("color", colors[value]);
					} else {
						$(this).empty();
					}
				}
			});

			$('#inline-status').editable();

			$('#inline-group').editable({
				showbuttons: false
			});

			$('#inline-dob').editable();
			$('#inline-event').editable();

			$('#inline-comments').editable({
				showbuttons: 'bottom'
			});

			$('#inline-fruits').editable({
				pk: 1,
				limit: 3,
				source: [
					{value: 1, text: 'banana'},
					{value: 2, text: 'peach'},
					{value: 3, text: 'apple'},
					{value: 4, text: 'watermelon'},
					{value: 5, text: 'orange'}
				]
			}); 
		}
	});

	function destroy_all(){
		$('#inline-username').editable('destroy');
		$('#inline-firstname').editable('destroy');
		$('#inline-sex').editable('destroy');
		$('#inline-status').editable('destroy');
		$('#inline-group').editable('destroy');
		$('#inline-dob').editable('destroy');
		$('#inline-event').editable('destroy');
		$('#inline-comments').editable('destroy');
		$('#inline-fruits').editable('destroy'); 
	}	

})(jQuery);