應用市場CMS總結

開發中遇到的坑:

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");
    });
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章