Javascript cascade drop-down menu and core code for AJAX data verification

Although Prototype. js is also used for writing, the class implementation still uses the method in JavaScript advanced programming because of its ignorance. When AJAX is used for data verification, XML is initially used as the data source. However, after a period of time, it is found that the XML efficiency is too low, so JSON is used as the data source.

A year later, the customer raised a new demand. Initially, as long as the two data in the input box are consistent, the current requirement is that the data in the two drop-down menus must also be consistent. Therefore, I used this opportunity to refactor the code once.

Requirement:
1. Select the product name and product package according to the drop-down menu, and change the picture on the right.
2. After the product name, product packaging, production date, and production batch are verified correctly, a prompt is displayed on the right.

Brief Description:
Use Prototyp. js completes class construction, implements functions in an object-oriented manner, event-oriented makes the code clearer, and uses AJAX state management to make the verification process more user-friendly, the execution efficiency of JSON as a data source is also satisfactory.
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 Code | Core Code:
Copy codeThe Code is as follows:
Var ValidProduct = Class. create ();
ValidProduct. prototype = {
Initialize: function (prodData, validDataUrl, validData, prodType, prodPack, prodDate, prodPatch, prodImg, validBtn, validMsg ){
This. prodData = $ H (prodData); // product category data | product type data
This. validDataUrl = validDataUrl; // verify the data path | product data url
This. validData = validData; // verify data | product data
This. prodType = $ (prodType); // product verification category | product type
This. prodPack = $ (prodPack); // product verification package | product package
This. prodDate = prodDate; // product verification date ID | product date
This. prodPatch = prodPatch; // product verification batch ID | product batch
This. prodImg = $ (prodImg); // product verification image | product images
This. validBtn = $ (validBtn); // Product verification button | validate button
This. validMsg = $ (validMsg); // Product verification process prompt | validate message
This. init ();
},
Init: function () {// program initialization | 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 () {// data in the bound product category drop-down list | 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) {// product category drop-down list event listener | 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) {// bind product package drop-down list data | 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) {// product package drop-down list event listener | Eventlistener of product package
Var o = this. prodPack;
This. prodImg. writeAttribute ("src", o [o. selectedIndex]. id );
},
ProductValid: function () {// product verification | 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 ("Please select products and packages! ");
}
} Else {
Alert ("please fill in the product production date and product batch number! ");
}
},
_ ValidProd: function (oReq) {// Product verification 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 (){
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 ");
});