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