Javascript: 動態函數變量

通過arguments來取得變量，即使函數沒有聲明，也可以由序列ID獲得，很有趣…

var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)

Reference: https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

javascript: 對於動態生成的元素控制

有些html元素是通過javascript生成的，不能使用

$('.something').on('click', function(){...}); 

來控制新生成的物件，所以需要改為以下方式來取得現在的元素︰

$(document).on('click', '.something', function(){...});

javascript: 檢查變量是不是undefined

如果想檢查變量是不是underfined，可以用typeof 來取得變量的類型字串。

if (typeof myObject !== "undefined") {
    alert('myObject is existed');
}

javascript: 打印json

如果用console.log輸出json，瀏覽器會自動分析成obj，無法以字串形式儲存，需要用JSON.stringify(obj);才可以將json以string 來輸出。

如下︰
obj = [{id:1}, {id:2}]
<< console.log(obj)
>> "[object Object],[object Object]"

<< console.log(JSON.stringify(obj));
>> "[{id:1}, {id:2}]"

Javascript: 在同一個頁面中檢查有沒有選擇到多選項(checkbox)

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

其中checkedOne是Boolean值，可以直接進行邏輯判斷。

Reference: Making sure at least one checkbox is checked

JSF, AJAX: 在遞交ajax到後台處理, 再返回參數到javascript

在新增一個ajax的event後想要在後台處理一些邏輯，但是後台的變量並沒有在ajax完全執行後才回傳，導致無法馬上彈出提示信息。

問題︰我想要做的是下拉式選單的項目選擇後，到後台執行selectResult，其中會改變一個變量叫isSameResult，在oncomplete時把參量放到checkSameService的javascript函數中再做處理。

//-----**index.jsf**-----
<p:autoComplete ...>
 <p:ajax event="itemSelect" listener="#{bean.selectResult}" update="..." oncomplete="checkSameService(#{bean.isSameResult});"/>
</p:autoComplete>

<script>
function checkSameService(result) {
 alert(result);
}
</script>

//-----**Bean.java**-----
public void selectSerResult(SelectEvent event) {
 isSameResult = true;
}

雖然selectResult是處理完，變量也更新了(isSameResult由false變為true)，但傳到javascript時卻未更新(仍然是false)。

解決方案︰上網找了一陣子發現可以從後台把參數放入javascript︰

//-----**index.jsf**-----
<p:autoComplete ...>
 <p:ajax event="itemSelect" listener="#{bean.selectResult}" update="..." oncomplete="checkSameService(xhr, status, args);"/>
</p:autoComplete>

<script>
function checkSameService(xhr, status, args) {
 alert(args.isSame);
}
</script>

//-----**Bean.java**-----
public void selectSerResult(SelectEvent event) {
 isSameResult = true;
 RequestContext context = RequestContext.getCurrentInstance();
        context.addCallbackParam("isSame", isSameResult );
}

然後就可以成功在完成處理後把結果寄回到javascript了。

Reference: PrimeFace - loginDemo