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

原创 2015年05月21日 23:49:01

业务需求:现做微信端支付的东西(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,其实有些时候真的想怎么简单怎么来,可以迫于一些压力,只能按照一些方式来完成,这其中会出现很多问题,本来还想着追根究底,后来发现能达到目的已经很不错了,一声叹息。

相关文章推荐

PHP 加载一次页面时, 浏览器请求多次, 导致出错

问题描述: 在一个项目中, 有一段统计页面浏览次数的代码, 其实现的方式是, 每次页面加载, 就 UPDATE SET 一次, 给数据表中对应的值加一. 碰到的一个问题是, 刷新页面时...

在使用Jquery的load方法加载时,只加载第一次的问题解决方法

.load方法没有设置 cache参数 默认true  解决办法几个:  1.使用.ajax方法并设置 cache参数为false(本人使用的是这种,试了可行)     $.ajaxSetu...

JQuery load 事件第二次不执行问题

w3c上的解释:  当指定的元素(及子元素)已加载时,会发生 load() 事件。 该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。 根据不同的浏览器(Firefo...

Elasticsearch 5.0 _all field的简单认识

前言:本文的目的是为后续磁盘空间利用优化做铺垫,主要知识点来源于官网一、_all 是什么在Elasticsearch中,_all field维护这一个很大的字符串数组(text类型)。这个字符串是其他...

关于jquery-ui,页面横向纵向拖动布局的方法。

$(function() {     $( ".sortable" ).sortable({     placeholder: "ui-state-highlight" , //拖动时,用css...
  • bjwmfk
  • bjwmfk
  • 2015年07月30日 10:43
  • 757

安卓仿微信朋友圈动态数据加载(包括评论和点赞,以及动态详情页)

在项目里面使用到了类似微信朋友圈的功能,所以就研究了一下,大家先看看效果吧! 效果图一: 效果图二: 效果图三: 效果图四: 效果图五: 效果图...

jq+ajax请求本地数据加载商品列表页并跳转详情页

效果:json文件:{ "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","pub...
  • web_hwg
  • web_hwg
  • 2017年07月12日 11:00
  • 685

Jquery实现页面加载自动提交form表单

Jquery在也页面加载完成后自动提交表单
  • bestcxx
  • bestcxx
  • 2016年01月12日 19:27
  • 3387

ListView的Intent跳转详情页, 滑动与点击Position错乱导致数据混乱问题解决

问题描述具体问题是这样:今天在项目中遇到了从一个ListView界面,通过点击Item中的控件(我这里做的是图片,后改为布局)跳转到详情页面,并且将部分数据传入到下一个Activity。来个图 问题...
  • tsaopin
  • tsaopin
  • 2015年08月20日 19:33
  • 1887
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:通过jquery load在list页面多次加载详情页,导致的多form校验以及提交问题
举报原因:
原因补充:

(最多只允许输入30个字)