Return to Snippet

Revision: 26690
at May 6, 2010 14:43 by bitmanic


Updated Code
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;
			}
		});
	}));


}

Revision: 26689
at May 6, 2010 14:41 by bitmanic


Initial Code
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;
			}
		});
	}));


}

Initial URL


Initial Description


Initial Title
PartsFinder Plus code

Initial Tags


Initial Language
JavaScript