2013年10月4日 星期五

jQuery UI Dialog 按下 Enter 自動送出

WWWWWWWOOOOOOOOOOOOOOOOOWWWW

3年來第一篇技術文章 XD

jQuery的Dialog對於我這種UI白癡來說實在很好用,但是他沒有內建Dialog表單的熱鍵,所以沒有辦法按下Enter就自動送出表單,解決方法是利用focse mothod加入熱鍵檢察,並執行click指令


$( "#form" ).dialog({
    buttons: {
        "送出": function() {
            $.ajax({  // 新增帳號
                type: "POST",
                url: 'manager.php?a=add',
                data: { name:name.val() },
                dataType: "json",
                error: function(xhr) {
                    alert("ajax error");
                },
                success: function(response) {
                    if ( response.status){ //成功
                        $( "#form" ).dialog( "close" ); //關閉dialog                             }else { //失敗show錯誤訊息
                        updateTips( tips, response.code );
                    }
                }
            });
        },
        "取消": function() {
            $( this ).dialog( "close" );
        }
    },
    focus: function() {
        $(':input', this).unbind('keyup'); // 解除事件綁定 不然會重複送出
        $(':input', this).keyup(function(event) {
            if (event.keyCode == 13) { // 偵測到按Enter
                $(this).parent().parent().parent().find("button:first").click(); // 尋找送出按鈕 層級依照頁面設定測試
            }
        });
    }
});