1. 程式人生 > >通過jquery load在list頁面多次載入詳情頁,導致的多form校驗以及提交問題

通過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,其實有些時候真的想怎麼簡單怎麼來,可以迫於一些壓力,只能按照一些方式來完成,這其中會出現很多問題,本來還想著追根究底,後來發現能達到目的已經很不錯了,一聲嘆息。