通过jquery load在list页面多次加载详情页,导致的多form校验以及提交问题

业务需求:现做微信端支付的东西(bla),业务需求很清晰,可是开发需求领导已经规定了,大致描述速下:
用户登陆之后进入到未支付订单的列表页list,在list页中采用jquery load,将所有的订单明细页面列出,并且在本页面中可以支付;

剖析:pc端原来的实现是,登陆之后进入列表页list,list中有查看明细可以分别查看各个明细页面,在明细页面中展示信息(部分支付金额是可以修改的),并且完成支付操作;
刚开始的时候强烈建议领导在微信端也如此操作,可领导说这用load是要求的,木办法硬着头皮来;

用到的东西有jquery的load,jquery validate;

现在我按照问题出现的顺序一个个描述并且列出解决途径:

1,在列表页中在$(function){}中将详情页load下来:

$(function(){
                $("input[id^='list_id_']").each(function(){
                    var id = this.value;
                                        $("#list_div_"+id).load("payinfo.action?id="+id);

});

注意 load的那个标签不能是table,我采用的div不然在firefox下不会出现的(这是我实践过的),还有避免form下有form的情况存在;

2,详情页的js怎么在list页中通过firebug看不到
这个确实看不到,不过可以看ajax 的异步返回,里面返回的页面有详情页所有内容包括js,而且js是能执行的;

3,由于我load进来的每个页面都有一个form,所以要保证每个form都能提交,而且必须是在验证之后提交;validate是常用的验证,由于我们在提交form之前需要弹窗,然后选择一个东西支付
这里写图片描述

在点击支付的时候需要校验数据完整性,并且弹出支付途径,点击支付途径才能支付
这里写图片描述

我的解决方法可能不是最好的,但是功能上是没有问题的,但是绝对不是最科学的
3.1,给每一个form的id加上角标来区分要提交的form,单个form内,所有的数据项,id=“attr_”+角标,name不变(方便提交)
3.2,validate

//这两种取form的方法都可以
$("form[id^='inputForm_']").validate({ 
            /* $("#inputForm_"+id).validate({ */
                rules: {
            ${attrview.attrKey}_${(orderpaydetail.id)!''} : {
                        required: true
                       },
                },

3.3,原来写在submitHandler中的方法发现促了问题,只能提交第一个form,其他的form不能提交了,重新注册提交事件

 $('#inputForm_'+id).submit(function() {           
                   $(this).ajaxSubmit(options);
                   return false; 
            }); 

注意这个代码在validate上面
3.4,大家可能注意到了我的validate 的rules也有id角标
但是默认validate是按照name校验的,我没有修改name属性的名称,是因为后台的获取,所以我想办法将validate有name校验改成由id校验,其实很简单:我google找到的:
http://blog.csdn.net/xiaoxiong_web/article/details/41346641
我们把jquery.validate.js中的element.name,全部都替换成element.id就可以了,注意要完全匹配element.name别把其他的也替换了产生错误

3.5,发现第一个form有一个必填项没弄好的时候,其他form同名属性也会出现必填提示,查看代码发现validate的errorPlacement是按照name的,所以得修改成按照id的

 errorPlacement: function(error, element) {
                    var selector = "[id='" + element.attr("id") + "']";
                    error.insertAfter($(selector));
                }

好了问题基本解决,
==新的问题出现了
form提交之前的先验证还没好
4,在点击支付的时候,先校验form,可以在弹出支付框

    function validateTips(id){
                  validator=$('#inputForm_'+id).validate(options);
                  if(validator.form()){
                      tipsWindown('选择支付银行','id:radio_div_'+id,'320','155','true','','true','id');
                  }

            }

我的问题基本解决了,只能说满足需求了,但是有好多问题

1,按道理详情页被多次load进来,他的js只需要load进来一次即可,可我这里是每次都load了(有人说jquery的load会过滤详情页的js和css)
2,有高手提醒,想这样多次load进来的最好应该避免在$(function()中的代码,可是我还是有采用的

3,其实有些时候真的想怎么简单怎么来,可以迫于一些压力,只能按照一些方式来完成,这其中会出现很多问题,本来还想着追根究底,后来发现能达到目的已经很不错了,一声叹息。

阅读更多
文章标签: load validate
个人分类: 前端
上一篇urlrewritefilter sitemesh struts2
下一篇struts2 ajax jsonp跨域
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭