開發中遇到的坑:
1、ajaxfileupload plugin
問題描述: 上傳apk,在IE11下彈出保存/打開/取消框,返回的是一個json文件, 實際應該執行ajaxfileupload success回調函數。
問題解答: 經過調試,返回結果並未執行success回調函數,而是執行error回調函數(語法錯誤),服務端需要修改響應content-Type。
response.setContentType("text/html");
response.getWriter().write(json.toJSONString());
因爲ajaxfileupload 只支持ContentType(“text/html”);
ajaxfileupload不支持響應頭ContentType爲application/json設置,不支持原因可能是爲了瀏覽器兼容,因爲ie不支持application/json格式, 另外firefox, chrome瀏覽器iframe在接收application/json格式的時候會自動將其轉化爲html格式,自動在json數據前後加上pre標籤導致ajaxfileupload插件取json數據錯誤
<pre style="word-wrap: break-word; white-space: pre-wrap;">
{"message":"上傳成功","code":200}
</pre>
參考:http://www.oschina.net/question/107380_151555
2、異步請求數據,但用戶登錄已失效,需要跳轉到登錄界面
問題描述: 異步請求數據,但用戶登錄已失效,需要跳轉到登錄界面。
問題解答:
方法一: 前端匹配服務端返回的內容,匹配成功就跳到登錄界面;
方法二: 服務端收到ajax請求但登錄信息已失效,此時返回一個特定的狀態碼,比如1002,告知前端,前端判斷是1002則跳到登錄界面。 項目中採用的是方法二。
參考1:http://www.cnblogs.com/dudu/p/ajax_302_found.html
參考2:http://stackoverflow.com/questions/199099/how-to-manage-a-redirect-request-after-a-jquery-ajax-call/304654#304654
3、trigger事件不能觸發click事件
<p id="clickDemo">clickDemo</p>
$(function(){
$("#clickDemo").on("click", function () {
alert("click");
});
$("#clickDemo").trigger("click");
});
需要先註冊click事件,才能使用trigger方法,否則無法調用
4、form表單reset()
reset()方法不能對 type=”hidden” 的元素生效,對其他表單元素均有效,包括display: “none”; & visibility:”hidden” 的元素。
5、ajaxfileupload plugin 2
問題描述:上傳img,第一次能觸發file的change事件,第二次便不能。
問題解答:經過調試,上傳第一張圖片後,在回調函數中查看file元素,id已經被更改成jUpload33334534545435這樣的值,拼接的是時間戳。因爲我是在jquery的擴展對象中寫的,第二次上傳圖片時並沒有重新獲取dom元素,而是之前暫存的dom元素。在觸發click事件後,重新獲取dom元素,重新綁定change事件即可。
var $chooseImgBtn = $(this),
$parent = $chooseImgBtn.parent(),
domObj = $.getUploadImgRelateDom($chooseImgBtn);
$chooseImgBtn.on("click", function () {
domObj = $.getUploadImgRelateDom($chooseImgBtn);
domObj.$file.trigger("click");
domObj.$file.on("change", function () {
....
}
}
6、服務端返回的是json字符串,不是對象
問題描述: 在上傳apk後的輪詢請求返回的是json字符串,不是對象,用Object.xx這樣的方式無法獲取
問題解答: 給ajax請求的選項設置dataType:”json”即可。總是會忘記,切記。
7、點擊列表按鈕彈出bootstrap的模態框,頁面總是滾動到頂部
問題描述: 點擊列表按鈕彈出bootstrap的模態框,頁面總是滾動到頂部
問題解答: 檢查許久才知,觸發按鈕是用a標籤寫的,href的值是”#”,js並未阻止默認時間,所以就會回到頂部.
8、bootstrap模態框不能滾動
問題描述: 上傳應用彈窗,當出現錯誤彈窗提示後,上傳模態框變不能滾動了(模態框很長)
問題解答:
默認頁面body標籤是這樣的
<body>
當顯示上傳模態框後
<body class="modal-open" style="padding-right: 10px;">
在添加表單內容過程中,出錯時,使用bootbox.alert()彈出提示,此時class modal-open被去掉。
<body class="" style="padding-right: 10px;">
當把關閉bootbox.alert()彈出的提示,此時上傳模態框任然是顯示狀態
<body class="modal-open" style="padding-right: 10px;">
看了 bootstrap的源碼
.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
所以就是因爲沒有class modal-open,所以模態框無法滾動。
解決辦法是:執行方法,監聽 alert 彈窗關閉後的事件,然後添加 class modal-open.
addModalOpenClassToBody: function () {
$(".bootbox-alert").on('hidden.bs.modal', function (e) {
$("body").addClass("modal-open");
});
}
總結: 因爲modal的顯示和隱藏,會影響toggleClass的賦值。
9、點擊上架或下架多次後,表格寬度越來越小
問題描述: 點擊上架或下架之前會先詢問是否下架或上架,用的是 bootbox.confirm(txt, callback)方法, 點擊確定會發起上架下架的請求,請求成功或失敗都會彈出提示消息,bootbox.alert().
問題解答:
默認頁面body標籤是這樣的,
<body>
彈出確認模態框後,
<body class="modal-open" style="padding-right: 10px;">
點擊確認模態框的確認按鈕後,成功回調裏彈出成功提示模態框後,
<body class>
點擊提示模態框ok按鈕後,
<body class style="padding-right: 10px;">
原理同第8點,解決方法: 執行方法,監聽 alert 彈窗關閉後的事件,然後設置padding值爲null.
bootboxAlertResetPadding: function () {
$(".bootbox-alert").on('hidden.bs.modal', function (e) {
$("body").removeAttr("style");
});
}