应用市场CMS总结

最新推荐文章于 2017-10-23 10:52:30 发布

半颗茜

最新推荐文章于 2017-10-23 10:52:30 发布

阅读量611

点赞数

分类专栏：项目总结文章标签： bootbox

本文链接：https://blog.csdn.net/Liqianqian158288/article/details/50607665

版权

项目总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

开发中遇到的坑：

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");
    });
}

半颗茜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
应用市场CMS总结

开发中遇到的坑：1、ajaxfileupload plugin问题描述：上传apk，在IE11下弹出保存/打开/取消框，返回的是一个json文件, 实际应该执行ajaxfileupload success回调函数。问题解答：经过调试，返回结果并未执行success回调函数，而是执行error回调函数（语法错误），服务端需要修改响应content-Type。response.setContentT
复制链接

扫一扫

专栏目录