lycong

Fix 问题: 进入编辑页面,当点击其他地方时,判断页面是否修改过,并提示相关信息。

        问题如下:例如要修改某个人的信息时,进入编辑页面,当点击其他地方时,判断信息是否已被修改过,并提示相关信息。
        本例中以个人通讯录信息为背景, 解决方法如下:
1.首先要有个 Object保存 一开始时从服务器得到的初始数据:
 
 var cachedFormContent = {};

      
function fCacheForm() {   //首先cache个人通讯录的信息
          cachedFormContent.FN = fGetOri("FN");
          cachedFormContent.email 
= fGetOri("EMAIL;PREF");
          cachedFormContent.groups 
= fGetOriGrps();
          cachedFormContent.BDAY 
= fGetOriBDAY();
          cachedFormContent.CELL 
= fGetOri("TEL;CELL;VOICE");
          cachedFormContent.ICQ 
= fGetOri("ICQ");
          cachedFormContent.URL 
= fGetOri("URL");
          cachedFormContent.ADR_HOME 
= fGetOri("ADR;HOME");
          cachedFormContent.PC_HOME 
= fGetOri("PC;HOME");
          cachedFormContent.TEL_HOME 
= fGetOri("TEL;HOME;VOICE");
          cachedFormContent.ORGNAME 
= fGetOri("ORGNAME");
          cachedFormContent.ADR_WORK 
= fGetOri("ADR;WORK");
          cachedFormContent.PC_WORK 
= fGetOri("PC;WORK");
          cachedFormContent.TEL_WORK 
= fGetOri("TEL;WORK;VOICE");
          cachedFormContent.FAX 
= fGetOri("TEL;WORK;FAX");

      }
2. 利用 JSON标签从服务器端得到个人通讯录的信息,并转化为js能识别的内容,并写一个函数用来获得原来的字段所对应的值
var original = <wm:JSON value="${original_user}" />;    //得到初始的个人通讯录资料

      
function fGetOri(name) {  //name:为字段名, 返回:通讯录个人属性
          var empty = "";
          
if (original[name] == null{
              
return empty;
          }

          
return original[name];
      }


      
function fGetOriGrps() {    //从服务器得到的初始分组
          var pabGrps = [];
          pabGrps 
=<wm:JSON value="${original_user['groups']}" />;
          
return pabGrps;
      }
3.写函数判断 离开前查看内容是否修改过, 从cacheFormContent 和当前内容对比, 同时要有函数获取当前属性的value值
      function fCheckBeforeLeaving() {  //离开前查看是否修改过
          var result = true;
          
if (fHaveBeenModified()) {
              
return false;
          }

          
return result;
      }


      
function fHaveBeenModified() {    //cache 和当前不同 则表示修改过
          var c = cachedFormContent;
          
return c.FN != fGetContent("p_FN"|| c.email != fGetContent("p_EMAIL;PREF"|| compareGrps(c, fGetGrps())
                  
|| c.BDAY != fGetContent("p_BDAY")
                  
|| c.CELL != fGetContent("p_TEL;CELL;VOICE"|| c.ICQ != fGetContent("p_ICQ"|| c.URL != fGetContent("p_URL")
                  
|| c.ADR_HOME != fGetContent("p_ADR;HOME"|| c.PC_HOME != fGetContent("p_PC;HOME"|| c.TEL_HOME != fGetContent("p_TEL;HOME;VOICE")
                  
|| c.ORGNAME != fGetContent("p_ORGNAME"|| c.ADR_WORK != fGetContent("p_ADR;WORK"|| c.PC_WORK != fGetContent("p_PC;WORK")
                  
|| c.TEL_WORK != fGetContent("p_TEL;WORK;VOICE"|| c.FAX != fGetContent("p_TEL;WORK;FAX");
      }


      
function fGetGrps() {         //获得所属联系组
          var grps = document.getElementsByName("p_groups");
          
var checked_grps = [];
          
for (var i = 0; i < grps.length; i++{
              
var grp = grps[i];
              
if (grp.checked) {
                  checked_grps[checked_grps.length] 
= grp.value;
              }

          }


          
return checked_grps;
      }


      
function compareGrps(c, grp) {
          
var groups = c.groups;
          
if (groups.length != grp.length) {
              
return true;
          }

          
for (var i = 0; i < groups.length; i++{
              
if (groups[i] != grp[i]) {
                  
return true;
              }


          }

          
return false;
      }


      
function fGetContent(item0) {
          
var content = document.getElementsByName(item0);
          
var val = content[0].value;
          
return val;
      }
4.利用javascript 的 setTimeout()函数 来 每隔一段时间就更新一次cacheFormContent的值(其实在这里每次获取的值都是相同,只是用作开始时就获取cacheFormContent),最后用window.onbeforeunload进行加载,注意不要用onload (2者之间的差别请差相关资料)

      setTimeout(fCacheForm, 
50);


      window.onbeforeunload 
= function() {
          
var msg = gLang.pab.msg;
          
var pabForm = $("pabEdit");
          
if (check && !fCheckBeforeLeaving()) {   //检查是否已修改过,并提示要保存
              return msg["pab_save_before_cancel"];
              pabForm.submit();
          }

      }

posted on 2008-06-16 21:50 cong 阅读(537) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航:
 

My Links

Blog Stats

常用链接

留言簿(1)

随笔分类

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜