Apache_httpd_to_Tomcat-Mod_Proxy_Setup.txt | 轉址

sudo vi /opt/lampp/etc/httpd.conf

Make sure the following are uncommented:
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Add these:
ProxyPass         /eInvoiceLocate http://localhost:8080/eInvoiceLocate
ProxyPassReverse  /eInvoiceLocate http://localhost:8080/eInvoiceLocate

Reload Apache conf
# cd /opt/lampp/bin
# sudo ./apachectl -k graceful

apache xmlhttprequest cannot load origin is not allowed by access-control-allow-origin |ajax 跨網頁存取圖片遇到cors

修改這個檔:

/opt/lampp/etc/httpd.conf

在 <Directory "/opt/lampp/htdocs"> 區段加入:

Header set Access-Control-Allow-Origin "*"

Header set Access-Control-Allow-Headers "x-requested-with"

Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

重起

sudo /opt/lampp/bin/apachectl -k graceful

關於cors

https://developer.mozilla.org/zh-TW/docs/HTTP/Access_control_CORS

Open new tab without popup blocker after ajax call on user click | 用ajax開新tab時，避免瀏覽器會詢問是否可開

是這樣的，我網頁上有個按鈕，點擊時會去
用jquery的ajax http get 去跟後端取資料，
並且取得後會開啟一個新分頁.

此時有個現象，
當ajax http get裡面的參數"async"設為true,
開新分頁時，browser 會問你可不可以跳視窗.

當ajax http get裡面的參數"async"設為false,
開新分頁時，browser 就不會問，而是直接地就
開啟新分頁.

PS:開啟新分頁是用window.open(url, '_blank')

以下為網友"Kenqr"的回答:

非由使用者的操作直接引發的開新視窗 瀏覽器會詢問，
點按鈕後直接開新視窗會被視為是使用者的操作引發的，
但async true時會在另一個thread執行，就不會被當成是使用者的操作，
可以改成點擊後直接開新分頁，新分頁裡再用ajax讀資料，
或是先開新分頁，原分頁讀到資料後再傳給新分頁應該也行

==================================
ref:http://stackoverflow.com/questions/18885676/open-new-tab-without-popup-blocker-after-ajax-call-on-user-click

[js] use jquery simulate trigger click event

jQuery(document).ready(function(){
    jQuery('#foo').on('click', function(){
         jQuery('#bar').simulateClick('click');
    });
});

jQuery.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE Boss!
        }
    });
}

Purpose:simulate click function,
i use for bind of dynamic load page.

[js] pass parameter between two web app

flow:web_A pass parameter to web_B

method: use http get
.in web_A 's js file
   
   var url = "url?"+window.abStoreUserToken+"="+data[0]['userToken'];
   window.location = url;  
    
.in web_B 's js file

   //handle url redirect
    var hashTagQuery = handleHashTagString(window.location.search);
   
   //get parameter from another web 
    if(hashTagQuery['abStoreUserToken']!=null){
         sessionStorage.setItem(window.abStoreUserToken, _toJSONString(hashTagQuery['abStoreUserToken']));
    }
  
   //change url without reload, and clear ori url from history
    window.history.replaceState("object or string", "Title", "url without parameter" );
    
    
  

ref:
http://www.myexception.cn/javascript/249482.html
http://stackoverflow.com/questions/1961069/getting-value-get-or-post-variable-using-javascript

jquery screen resize event

    $(window).on('resize', function() {
        var win = $(this); //this = window
        console.log(win.height());
        console.log(win.width());
    });

Purpose:Do things when screen be resized

close modal when url is change (use hashchange event)

    $(window).on('hashchange', function(e) {

        console.log("hashchange");
     
        $('#playAudioModal').modal('hide');

    });  

Purpose:Do things when  when url is change

bootstrap set navtabs border

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
{
    border-color: #DDDDDD #DDDDDD transparent;
}

ref:
http://stackoverflow.com/questions/18949634/bootstrap-3-strange-thin-line-under-navtabs-in-firefox

bootstrap modal close event

   
$(document).on('hidden.bs.modal', '#your_modal_id', function() {
        console.log("you can do things here");
    });
  

Purpose:Do things when modal closed

get index of selected option with jQuery

//Just use the selectedIndex property of the DOM element:

 alert($("#dropDownMenuKategorie")[0].selectedIndex);

//reason:
// property. Adding [0] converts the jquery object 
to a javascript object which has the selectedIndex property. 
This example won't work without [0] 

more detail about selectedIndex
http://www.w3school.com.cn/jsref/prop_select_selectedindex.asp

Purpose:
as title

[粗心] html avoid side-effect when use jquery clone

我在動態新增element(購物車，搜尋結果等等頁面)時，
會先寫一個template用來clone用，

但是發現為何css的呈現都會用最後一筆的樣子
找了clone用法https://api.jquery.com/clone/
也跟他無關，後來發現是自己犯傻了.

原因說明詳見下面範例註解處.


範例

    template    += ' ';
    template    += '  
';
    template    += '  
';
    template    += '   ';
    template    += '   
';
    template    += '    
name
';
    template    += '    
';
    template    += '    
';
    template    += '   
';
    template    += '  
';
    template    += '  
';
    template    += ' ';


    $template = $(template);
    
    for (i = 0; i < channelItemJson.length; i++) {

        var $newItemCol = $template.clone();
        $newItemCol.find('img').attr('src', window.itemImgPreUrl + channelItemJson[i]['localCoverPath']);

        $newItemCol.find('p').text(channelItemJson[i]['name']);

        $newItemCol.find(".channel-item-detail").on("click", {
            elements: $newItemCol,

        }, handler2ItemDetail);
        
        //$('.search-all-price-group').show();
        //this strategy will cause side-effect
        //beacuse there are many '.search-all-price-group' class 
        
        //this is right
        $newItemCol.find('.search-all-price-group').show();
         
        $("#scroll-container").append($newItemCol.fadeIn());
    }

[jquery] prevent a parent's onclick event from firing when a child anchor is clicked

.html


this is test
    
    I don't want #clickable to handle this click event.

.js
$("#clickable a").click(function(e) {
   //do something
   e.stopPropagation();
})


$("#clickable").click(function(e) {
   //do something
   alert('clickable');
})

here is link that you test
http://jsfiddle.net/grp10d10/1/

[js] JQuery same click event for multiple elements

$('.class2 , .class3, .class3').on('click', function() { 
  alert(this.className);
  location.href = "test.htm"; 
});

[js] 移除jsonArray 當中某一項 | remove specific object from json arrray

var countries = {};

countries.results = [
    {id:'AF',name:'Afghanistan'},
    {id:'AL',name:'Albania'},
    {id:'DZ',name:'Algeria'}
];


Array.prototype.removeValue = function(name, value){
   var array = $.map(this, function(v,i){
      return v[name] === value ? null : v;
   });
   this.length = 0; //clear original array
   this.push.apply(this, array); //push all elements except the one we want to delete
}

說明:

countries.results.removeValue('name', 'Albania');
//移除掉key為'name' ,value為'Albania' 的那項item

Array.prototype.removeValue
//為Array這個object增加removeValue這個function.

var array = $.map(this, function(v,i){
     return v[name] === value ? null : v;
});
//jquery的traversing object功能， callback function裡面
//可以程式來對object做動作，做完再回傳到呼叫他的地方.

this.push.apply(this,array)
//將array所有內容家到原本的array裡面，
你可以想成jabva的 addAll


總結:
說穿了其實就是把json array 用for-loop跑完，
將符合標準的取出. 
最後再放回json array裡面



//===============================================================
ref:
http://api.jquery.com/jquery.map/
http://codex.wiki/post/147898-659/
http://stackoverflow.com/questions/1374126/how-to-extend-an-existing-javascript-array-with-another-array

jQuery用load方法加入的html無法bind on event

   假設 navbar-brand 為用jquery load進來的html
    
    此時下面寫法無法執行
    $("a.navbar-brand").on("click", function() {
        //code here

    });
    
    解法一
    不要用jquery load 進html，

    解法二
    Event Delegation
    ex:
    $(document).on("click", 'a.navbar-brand', function() {
      //code here

    });


ref:http://www.cnblogs.com/moonreplace/archive/2012/10/09/2717136.html