JavascriptカスケードドロップダウンメニューおよびAJAXデータ検証コアコード

Prototypeも使いましたが.jsは作成しますが、それを理解していないため、クラスの実装は「JavaScript高度なプログラム設計」の方法を使用しています.AJAXを使用してデータ検証を行う場合、最初はXMLをデータソースとして使用していたが、しばらく使用した後、XMLの効率が低すぎることに気づき、JSONを使用してデータソースとして使用した.
1年が過ぎて、お客様はまた新しい需要を提出して、最初は入力ボックスの2つのデータが一致すればいいので、今の要求は2つのドロップダウンメニューのデータも一致しなければならないので、私はこの機会を利用して、コードを再構築しました.
必要:
1、プルダウンメニューの製品名、製品包装の選択によって、右の画像は相応の変化を行う.
2、製品名、製品包装、生産日、生産ロットが正しく検証された後、右図に相応の提示が現れた.
簡単な説明:
Prototypを使用します.jsはクラスの構築を完了し、オブジェクト向けに機能を実現し、イベントガイドはコードをより明確にし、AJAXの状態管理を使用し、検証プロセスをユーザーにより友好的にし、JSONはデータソースとしての実行効率も満足させる.
Linkage Drop Down List And AJAX Validation
This JS script has special meaning for me.
I got a new start one year ago, the first task was to solve this linkage drop down list and data validation. At that time I had no deep understanding of Javascript. With my ability of study, after the reference to the code of colleague's, I finally finished it in several days.
Although I used Prototype.js to code, I still used the method in the to make up Class. In the process of AJAX validation, I used XML as data source at the beginning. Aftet time past, I changed data source from XML to JSON for the low efficiency of XML.
Now the clients have new requirements, they need four data to be validated. So I rebuild the scripts.
Requirements:
1. change images of products with the change of product name and package.
2. after the validation with product name, package, date, batch, change images of products.
Brief:
Construct class with Prototype.js, use OOP's approach and event management to make a clear idea.
The management of AJAX status let the process be more friendly for customer. I'm also satisfied with the efficiency of JSON.
コアコード|Coreコード:

 
  
var ValidProduct = Class.create(); 
  
ValidProduct.prototype = { 
  
initialize:function(prodData,validDataUrl,validData,prodType,prodPack,prodDate,prodPatch,prodImg,validBtn,validMsg){ 
  
this.prodData = $H(prodData); //       | product type data 
  
this.validDataUrl = validDataUrl; //       | product data url 
  
this.validData = validData; //     | product data 
  
this.prodType = $(prodType); //       | product type 
  
this.prodPack = $(prodPack); //       | product package 
  
this.prodDate = prodDate; //      ID | product date 
  
this.prodPatch = prodPatch; //      ID | product batch 
  
this.prodImg = $(prodImg); //       | product images 
  
this.validBtn = $(validBtn); //       | validate button 
  
this.validMsg = $(validMsg); //         | validate message 
  
this.init(); 
  
}, 
  
init:function(){//      | Application init 
  
this.productTypeBind(); 
  
this.prodType.observe("change",this.productTypeChange.bind(this)); 
  
this.prodPack.observe("change",this.productPackChange.bind(this)); 
  
this.validBtn.observe("click",this.productValid.bind(this)); 
  
}, 
  
productTypeBind:function(){//             | Binding product type data 
  
this.prodPack.selectedIndex = 0; //for IE after page refreshed 
  
var o = this.prodType; 
  
this.prodData.each(function(pair){ 
  
o.options.add(new Option(pair.key, pair.value.code)); 
  
}); 
  
}, 
  
productTypeChange:function(e){//             | Eventlistener of product type 
  
var o = this.prodPack; 
  
o.length = 1; 
  
o.selectedIndex = 0; //for IE after packing choosed the first 
  
this.prodImg.writeAttribute("src",o[0].id); 
  
var selected = this.prodType.selectedIndex; 
  
if (selected!=0){ 
  
this.productPackBind(this.prodType[selected].text); 
  
} 
  
}, 
  
productPackBind:function(choosedValue){//             | Binding product package data 
  
var o = this.prodPack; 
  
$H(this.prodData.get(choosedValue).type).each(function(pair){ 
  
var newOption = new Option(pair.key, pair.value.packing); 
  
newOption.id = pair.value.img; 
  
o.options.add(newOption); 
  
}); 
  
}, 
  
productPackChange:function(e){//             | Eventlistener of product package 
  
var o = this.prodPack; 
  
this.prodImg.writeAttribute("src",o[o.selectedIndex].id); 
  
}, 
  
productValid:function(){//     | validate product 
  
var v1 = $F(this.prodDate).strip(), v2 = $F(this.prodPatch).strip(); 
  
if(v1!=""&&v2!=""){ 
  
if(this.prodPack.selectedIndex != 0){ 
  
var validAjax = new Ajax.Request(this.validDataUrl,{ 
  
method:"get", 
  
parameters:"rnd="+Math.random(), 
  
onCreate: function(){ 
  
this.validMsg.show(); 
  
}.bind(this), 
  
onComplete:this._validProd.bind(this) 
  
}); 
  
}else{ 
  
alert("        ！"); 
  
} 
  
}else{ 
  
alert("              ！"); 
  
} 
  
}, 
  
_validProd:function(oReq){//    Ajax callback 
  
this.validMsg.hide(); 
  
var v1 = this.prodType.getValue(), v2 = this.prodPack.getValue(); 
  
var v3 = $F(this.prodDate).strip(), v4 = $F(this.prodPatch).strip(); 
  
var imgUrl = this.prodPack[this.prodPack.selectedIndex].id; 
  
//alert(v1+"n"+v2+"n"+v3+"n"+v4+"n"+imgUrl); 
  
var prodBatchs = oreq.responseText.evalJSON()[this.validData]; 
  
var result=prodBatchs.any(function(a){ 
  
return (v3==a[1] && v4==a[0] && a[2].startsWith(v1) && v2==a[3]); 
  
}); 
  
if(result){ 
  
this.prodImg.writeAttribute("src", imgUrl.split(".")[0] + "-valid.jpg"); 
  
}else{ 
  
this.prodImg.writeAttribute("src", "images/invalid.jpg"); 
  
}; 
  
} 
  
} 
  
document.observe("dom:loaded",function(){ 
  
var validOne = new ValidProduct(prodTypeData,"data/batchs_new2.txt","batchs","productType", 
  
"productPack","prodate","probatch","credit-img","vaSubmit","ajaxsearch"); 
  
});