jQuery autocomplete example memo

最近用到又忘了怎麼做，在Model顯示卡了些關~寫個文章記錄下!!

//Head 需要Include的Resource
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

//補充顯示的CSS設定
<style type="text/css">
.ui-autocomplete { 
position: absolute; 
cursor: default;
z-index:99999 !important;   //有時候(使用Model)會顯示不在最前面，故設定大些
display:block;
}  
</style>

//Body
<form action="#" role="form" method="post" id="ListForm" >  
  <input type="text" class="form-control inputFieldClass" id="inValue" name="inValue" ></input>
  <input type="hidden" id="tx_value" name="tx_value" />  
   <input type="hidden" id="tx_lable" name="tx_lable" /> 
</form>

//如果回傳是一個Class，其中一個變數才是要用的jQuery.parseJSON(data)這樣處理
<script>
$(function (){
    $(".inputFieldClass").on("focus", function(){
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "API_URL", 
                    dataType: "json",
                    type: "POST",
                    data: {
                        key: request.term     
                      },
                    success: function (data) {
                    if (data.isSuccess){
                    response($.map(jQuery.parseJSON(data.jsondata), function (item) {
                            return {
                            value: item.in_value,      
                            lable: item.in_lable
                            }
                        }));
                    }
                    }
                });
            },
            minLength: 2,   //輸入多少字元觸發
            select : function(event, ui) {  
                //候選項選擇帶入
    $("#tx_value").val(ui.item.value);  
                $("#tx_lable").val(ui.item.lable);  
                return false;
            }
        });
    });
});
</script>

Maven Call SOAP sample

At pos.xml add

<dependency>
    <groupId>com.mashape.unirest</groupId>
    <artifactId>unirest-java</artifactId>
    <version>1.4.9</version>
</dependency>

At controller add method

import com.mashape.unirest.http.Unirest;

String soap_postdata = "{\"DATA1\":\"XXX\",\"DATA2\":\"XXX\"}";
HttpResponse<JsonNode> jsonResponse = Unirest.post(soap_url)
  .header("cache-control", "no-cache")
  .header("accept", "application/json")
  .body(soap_postdata)
  .asJson();
if (jsonResponse != null) {
 if (jsonResponse.getStatus() == 200) {
    JSONObject json = jsonResponse.getBody().getObject();
       if (json.has("error")) {
   //SOAP Fail. json.has error
} else {
           //do it
        }
  }
}

補充說明:
呼叫後會有一堆這類的紀錄，貌似關不掉可以透過log關閉方式排除
[Thread-46] DEBUG org.apache.http.impl.conn.PoolingHttpClientConnectionManager - Closing expired connections
[Thread-46] DEBUG org.apache.http.impl.conn.PoolingHttpClientConnectionManager - Closing connections idle longer than 30 SECONDS

At logback.xml add
<logger name="com.mashape.unirest" level="ERROR" />

Spring java.io.CharConversionException DB2中文異常排除

錯誤訊息
error code [-4220]; [jcc][t4][1065][12306][4.19.72] 捕捉到 java.io.CharConversionException …

經查是在處理有中文字欄位時出現的Exception訊息，排除紀錄如下:

1. 從SERVERS處點滑鼠右鍵兩下，開啟Overview頁面。
務必確定SERVER是STOP狀態

2. 點選Open Launch configuration 開啟Edit Configuration頁面。而後切換至Arguments  。

3. 加上 -Ddb2.jcc.charsetDecoderEncoder=3 點選Apply後離開，啟動SERVER即可。

Spring Project 學習的資料

最近回到JAVA的開發環境，睽違十餘年再看改變的還挺大的，搜尋到一些橋接團隊有關的文章，整理一下~以便不時之需。


在Eclipse建立Spring Web專案by Maven


Apache Tiles 基本配置 使用方法 （Spring + Tiles - Maven Project）


Spring MVC中使用Thymeleaf模板引擎

node.js use websocket Chat Room sample

參考:https://www.nodebeginner.org/index-zh-tw.html

1. 開啟PowerShell並安裝
    npm install express       <- 框架
    npm install ws               <- websocket 

2. service.js

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('open', function open() {
  console.log('connected');
});

server.on('close', function close() {
  console.log('disconnected');
});

server.on('connection', function connection(ws, req) {
  const ip = req.connection.remoteAddress;
  const port = req.connection.remotePort;
  const clientName = ip + port;

  console.log('%s is connected', clientName)

  ws.send("Welcome " + clientName);

  ws.on('message', function incoming(message) {
    console.log('received: %s from %s', message, clientName);
    
    server.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send( clientName + " -> " + message);
      }
    });
  });
});

3. client.html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>

<body>
<script type="text/javascript">
var socket;
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket;
}
if (window.WebSocket) {
socket = new WebSocket("ws://localhost:8080/ws");
socket.onmessage = function (event) {
var ta = document.getElementById('responseText');
ta.value = ta.value + '\n' + event.data
};
socket.onopen = function (event) {
var ta = document.getElementById('responseText');
ta.value = "connection!";
};
socket.onclose = function (event) {
var ta = document.getElementById('responseText');
ta.value = ta.value + "connection close";
};
} else {
alert("你的浏览器不支持 WebSocket！");
}

function send(message) {
if (!window.WebSocket) {
return;
}
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);
} else {
alert("connection fail.");
}
}
</script>
<form onsubmit="return false;">
<h3>WebSocket Chat room：</h3>
<textarea id="responseText" style="width: 500px; height: 300px;"></textarea>
<br>
<input type="text" name="message" style="width: 300px" value="Welcome">
<input type="button" value="Send" onclick="send(this.form.message.value)">
<input type="button" onclick="javascript:document.getElementById('responseText').value=''" 
value="Clean">
</form>
<br>
</body>

</html>

4. 伺服器端啟動service.js
    客戶端透過瀏覽器開啟client.html即可對話

sudo kill $(ps aux | grep 'app.js' | awk '{print $2}') sudo node service.js &