Chen Jian's Java Blog 

Redux weird thing 2 - You can still have local state in components

by Chen Jian


Posted on 2018-06-19 12:00 in Frontend


Disclamer: "Weird" is a neutral word here. In Redux you are supposed to put "all" the data in the store. However, "temp" data like unsubmitted form input, should be inside the components. Data in the store should be cleaned, "official" daa.


Redux weird thing 1 - combineReducers

by Chen Jian


Posted on 2018-06-18 12:00 in Frontend


If your root component has more than one child component, you will have a big state , so is your reducer // the initial state const initialState = { counter: { value: 0 }, toDo: { itemList: [ {id: 1, text:...


Basic Redux Counter example

by Chen Jian


Posted on 2018-06-15 12:00 in Frontend


In this example, The "CounterComponet" is included by the root component called "AppComponent". No Store composition is used here. You still have to pass the props to "AppComponent", which in turn passes...


Frontend frameworks and things you should know in addition to React/Angular

by Chen Jian


Posted on 2018-06-11 12:00 in Frontend


Language ES2015 : A new generation of Javascript language specs. It supports modules and classes. It's also know as ES6 Typescript : An object-oriented language that will be converted to Javascript and then be run in browsers ...


Regex + Javascript: pitfalls concerning dot, backslash and others

by Chen Jian


Posted on 2017-04-26 12:00 in Frontend


console.log("====== ^ and $ ====="); console.log(/a/.test("abc")); //true console.log(/^a$/.test("abc")); //false. Add ^ ad $ to confirm a non-partial match console.log("====== dot ====="); console.log(/^.$/.test("a")); //true. A dot means...


Click to edit in Mobile Angular UI

by Chen Jian


Posted on 2016-06-17 12:00 in Frontend


0. Assume the text's ng-model to be changed is  {{someText}} 1. Create a modal. 2. Let there be an input in the modal. The input's ng-model should not be {{someText}}, but {{anotherText}} 3. Let there be 2 buttons in the modal. One is...


Angularjs: Controllers' dependency and parameter should be in the same order

by Chen Jian


Posted on 2016-05-23 12:00 in Frontend


The order should be exactly the same HomeControllers.controller('LogoutController', ['$scope','$rootScope', '$localStorage', '$location', '$http', function($scope, $rootScope, $localStorage, $location, ...


DataTables to prevent xss attack

by Chen Jian


Posted on 2016-03-28 12:00 in Frontend


The solution is: use "render": $.fn.dataTable.render.text() to escape html tags $( document ).ready(function() { $('#someTable').DataTable({ "processing": true, "serverSide": true, ...


Format timestamps (miliseconds) to datetime in Javascript

by Chen Jian


Posted on 2016-03-28 12:00 in Frontend


You need to import moment.js function fmt_timestamp(ts){ if (!ts){ return ''; } var t = moment(ts) var formatted = t.format("MM/DD/YYYY hh:mm:ss"); return formatted; }


点击文本然后修改,建议用X-editable

by Chen Jian


Posted on 2015-01-07 12:00 in Frontend


http://vitalets.github.io/x-editable/ 可以跟bootstrap或者跟jquery整合,蛮好用的。 如果跟dataTables结合起来用,相当于是extJs了,很不错。 下面是一个结合使用的例子: <script src="/assets/js/bootstrap-editable.min.js"></script> <link...


前后端结合,让DataTables页面接受url中的过滤参数

by Chen Jian


Posted on 2014-12-10 12:00 in Frontend


一个DataTables页的典型流程是: 1. 访问一个url让系统渲染一个普通的前端页面 2. 页面上内含一段javascript, 生成DataTables对象,然后立即向后端请求数据,最后在本页中填充数据 默认情况下DataTables不做任何初始过滤,待用户在searchField输入框中输入值后,才会做过滤。 现在的需求的,在上述#1步的url中即传入参数,如list.jsp?userId=123. 期望在第2步结束后, 1. userId对应的searchField...


typeahead.js + remote ajax完整例子

by Chen Jian


Posted on 2014-11-05 12:00 in Frontend


typeahead.js的样例文档很不详细,必须查API,而API也写得比较简略。 我这里给一个比较典型的样例,供参考。 典型用况:修改一条person记录。服务端要你上传personId参数, 但用户只记得personName; 这时你要让用户在一个输入框里输入personName, 搜索出person信息,用户选中一个记录,系统再在另一个只读的输入框里记录被选中的personId, 最后提交表单上传到服务端。 表单DOM: <form> <table>...


auto complete 建议用twitter的typeahead.js

by Chen Jian


Posted on 2014-11-05 12:00 in Frontend


虽然文档让人读起来很痛苦,但功能很全,社区也很大。推荐使用。


jquery表单处理建议使用malsup出的jQuery Form Plugin

by Chen Jian


Posted on 2014-11-04 12:00 in Frontend


jquery表单处理建议使用malsup出的jQuery Form Plugin,还可以。


DataTables: 按列搜索的最佳实践

by Chen Jian


Posted on 2014-11-02 12:00 in Frontend


典型情况下,按列搜索需要满足: 1. 输入文字,在某列中搜索 2. 下拉选择,在某列中搜索 3. 输入框、下拉列表都应该放在表头,而不是表尾。 我是这样做的: html dom这么写 把搜索那一行作为tfoot加进来 <table id="myTable"> <thead> <tr> <th>姓名</...