/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
function partsFinderPlus(pfpOptions){ /* // User Options // ---------------------------------------------------------------------- // The following array of options should be included on the PSN page var pfpOptions = { manufacturer: "Honda", category: "ATVs", resultsWrapper: "div#pfp" } */ // Declare global variables var pfpConfig = { yearRepopUrl: '/yearRepop.asp', // PSN page that outputs year lists yearRepopWrapper: 'div#yearSelect', // Wrapper for year lists yearSelect: 'select#yearDropDown', // Year list <select> element modelRepopUrl: '/modelRepop.asp', // PSN page that outputs model lists modelRepopWrapper: 'div#modelSelect', // Wrapper for model lists modelSelect: 'select#modelDropDown', // Model list <select> element getFvehUrl: '/getFveh.asp' // PSN page that outputs the FVEH ID of a vehicle } // Use AJAX to include PSN's fiche.js script, which will be referenced by some of our generated code. $.ajax({ type: "GET", url: "/fiche.js", dataType: "script", success: function(){ // If the fiche script loads successfully, do another AJAX call for the initial year list $.ajax({ type: "GET", url: pfpConfig.yearRepopUrl, data: "category="+pfpOptions.category+"&make="+pfpOptions.manufacturer, // To get a proper year list, we need to pass a category and make to the page. cache: false, success: function(html){ // If the year list loads successfully, append it to the inside of the blank year list wrapper. $(pfpConfig.yearRepopWrapper).append(html); }, complete: function(){ // Once the years have loaded, make an AJAX call for models. // We need to get a year value to pass in the model list generator - use the year list's default value for this. var currentYear = $(pfpConfig.yearSelect).val(); $.ajax({ type: "GET", url: pfpConfig.modelRepopUrl, data: "category="+pfpOptions.category+"&make="+pfpOptions.manufacturer+"&year="+currentYear, cache: false, success: function(html){ // If the model list loads succesfully, append it to the inside of the blank model list wrapper. $(pfpConfig.modelRepopWrapper).append(html); // Get rid of the inline javascript 'onchange' event that is hardcoded into all PSN model lists. $(pfpConfig.yearSelect).click(function(){ $(this).removeAttr('onchange'); }); } }); } }); } }); // When the user changes years, return a new model list for that year. We bind the function to the 'change' event // with jQuery's live() feature, which allows us to target elements inserted dynamically into the DOM (whereas a // regular 'change' event would not. $(pfpConfig.yearSelect).live('change',(function() { var currentYear = $(pfpConfig.yearSelect).val(); $.ajax({ type: "GET", url: pfpConfig.modelRepopUrl, data: "category="+pfpOptions.category+"&make="+pfpOptions.manufacturer+"&year="+currentYear, cache: false, success: function(html){ // If the model list loads succesfully, append it to the inside of the blank model list wrapper. $(pfpConfig.modelRepopWrapper).html(html); } }); return false; } )); // When the user selects a model, forward them to the fiche selection page. We bind the function to the 'change' event // with jQuery's live() feature, which allows us to target elements inserted dynamically into the DOM (whereas a // regular 'change' event would not. $(pfpConfig.modelSelect).live('change',(function(){ var currentYear = $(pfpConfig.yearSelect).val(); var currentModel = $(pfpConfig.modelSelect).val(); $(this).removeAttr('onchange'); $.ajax({ type: "GET", url: pfpConfig.getFvehUrl, data: "category="+pfpOptions.category+"&make="+pfpOptions.manufacturer+"&year="+currentYear+'&model='+currentModel, cache: false, success: function(html){ // If the fveh ID is returned successfully, build the URL and redirect the user to the fiche selection page. location.href="./fiche_select2.asp?category="+pfpOptions.category+"&make="+pfpOptions.manufacturer+"&year="+currentYear+"&fveh="+html; } }); })); }