Although Prototype.js is also used to write, the implementation of the class is still using the method in JavaScript advanced programming because of its lack of understanding. When using AJAX for data validation, XML was used initially as a data source, but after a period of time, XML was found to be inefficient, and JSON was used as the data source.
A year has passed, the customer has put forward new requirements, initially as long as the input box two data match on the line, now the request is two Drop-down menu data also to match, so I took this opportunity to refactor the code once.
Demand：
1, according to the Drop-down menu product name, product packaging selection, the right side of the picture to carry out the corresponding changes.
2, the product name, product packaging, production date, production batches are verified correctly, the right figure appears corresponding hints.
Brief Description：
Using Prototyp.js to complete class building, object-oriented implementation, event-oriented to make code clearer, use Ajax for state management, and make the validation process more user-friendly, and JSON's efficiency as a data source is also satisfying.
Linkage Drop down List and AJAX Validation
This JS script has special meaning for me.
I got a new start one year ago, the "I" and "solve" this linkage drop down list and data validation. At, 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 "the" to "make" up Class. The process of AJAX validation, I used XML as data source at the beginning. Aftet time past, I changed data source in 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 to products with the change of product name and package.
2. After the validation with product name, package, date, batch, and change images for 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 is more friendly for customer. I ' m also satisfied with the efficiency of JSON.
Core code | Core Code:
Copy Code code 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; Validating Data Paths | Product Data URL
This.validdata = ValidData; Validate Data | Product data
This.prodtype = $ (prodtype); Product Validation Category | Product Type
This.prodpack = $ (prodpack); Product Verification Packaging | Product Package
This.proddate = proddate; Product Validation Date ID | Product Date
This.prodpatch = Prodpatch; Product Validation Batch ID | Product Batch
This.prodimg = $ (prodimg); Product Verification Pictures | Product Images
THIS.VALIDBTN = $ (VALIDBTN); Product Verification Button | Validate button
This.validmsg = $ (validmsg); Product Validation Process Tips | 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 () {//Binding product category Drop-down List Data | 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 dropdown list Event Monitor | EventListener of Product Type
var o = this.prodpack;
O.length = 1;
O.selectedindex = 0; For IE after packing choosed the the
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 Packaging dropdown 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 packaging dropdown list Event Monitor | EventListener of product Package
var o = this.prodpack;
This.prodImg.writeAttribute ("src", o[o.selectedindex].id);
},
Productvalid:function () {//product validation | 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 Product and packaging!") ");
}
}else{
Alert ("Please fill in the Production Date and product batch number!") ");
}
},
_validprod:function (oreq) {//product validation 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");
});
