PartsFinder Plus code


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. function partsFinderPlus(pfpOptions){
  2.  
  3. /*
  4. // User Options
  5. // ----------------------------------------------------------------------
  6.  
  7. // The following array of options should be included on the PSN page
  8. var pfpOptions = {
  9. manufacturer: "Honda",
  10. category: "ATVs",
  11. resultsWrapper: "div#pfp"
  12. }
  13. */
  14.  
  15. // Declare global variables
  16. var pfpConfig = {
  17. yearRepopUrl: '/yearRepop.asp', // PSN page that outputs year lists
  18. yearRepopWrapper: 'div#yearSelect', // Wrapper for year lists
  19. yearSelect: 'select#yearDropDown', // Year list <select> element
  20. modelRepopUrl: '/modelRepop.asp', // PSN page that outputs model lists
  21. modelRepopWrapper: 'div#modelSelect', // Wrapper for model lists
  22. modelSelect: 'select#modelDropDown', // Model list <select> element
  23. getFvehUrl: '/getFveh.asp' // PSN page that outputs the FVEH ID of a vehicle
  24. }
  25.  
  26.  
  27. // Use AJAX to include PSN's fiche.js script, which will be referenced by some of our generated code.
  28. $.ajax({
  29. type: "GET",
  30. url: "/fiche.js",
  31. dataType: "script",
  32. success: function(){
  33. // If the fiche script loads successfully, do another AJAX call for the initial year list
  34. $.ajax({
  35. type: "GET",
  36. url: pfpConfig.yearRepopUrl,
  37. data: "category="+pfpOptions.category+"&make="+pfpOptions.manufacturer, // To get a proper year list, we need to pass a category and make to the page.
  38. cache: false,
  39. success: function(html){
  40. // If the year list loads successfully, append it to the inside of the blank year list wrapper.
  41. $(pfpConfig.yearRepopWrapper).append(html);
  42. },
  43. complete: function(){
  44. // Once the years have loaded, make an AJAX call for models.
  45. // We need to get a year value to pass in the model list generator - use the year list's default value for this.
  46. var currentYear = $(pfpConfig.yearSelect).val();
  47. $.ajax({
  48. type: "GET",
  49. url: pfpConfig.modelRepopUrl,
  50. data: "category="+pfpOptions.category+"&make="+pfpOptions.manufacturer+"&year="+currentYear,
  51. cache: false,
  52. success: function(html){
  53. // If the model list loads succesfully, append it to the inside of the blank model list wrapper.
  54. $(pfpConfig.modelRepopWrapper).append(html);
  55. // Get rid of the inline javascript 'onchange' event that is hardcoded into all PSN model lists.
  56. $(pfpConfig.yearSelect).click(function(){
  57. $(this).removeAttr('onchange');
  58. });
  59. }
  60. });
  61. }
  62. });
  63.  
  64. }
  65. });
  66.  
  67.  
  68. // When the user changes years, return a new model list for that year. We bind the function to the 'change' event
  69. // with jQuery's live() feature, which allows us to target elements inserted dynamically into the DOM (whereas a
  70. // regular 'change' event would not.
  71. $(pfpConfig.yearSelect).live('change',(function()
  72. {
  73. var currentYear = $(pfpConfig.yearSelect).val();
  74. $.ajax({
  75. type: "GET",
  76. url: pfpConfig.modelRepopUrl,
  77. data: "category="+pfpOptions.category+"&make="+pfpOptions.manufacturer+"&year="+currentYear,
  78. cache: false,
  79. success: function(html){
  80. // If the model list loads succesfully, append it to the inside of the blank model list wrapper.
  81. $(pfpConfig.modelRepopWrapper).html(html);
  82. }
  83. });
  84. return false;
  85. }
  86. ));
  87.  
  88.  
  89. // When the user selects a model, forward them to the fiche selection page. We bind the function to the 'change' event
  90. // with jQuery's live() feature, which allows us to target elements inserted dynamically into the DOM (whereas a
  91. // regular 'change' event would not.
  92. $(pfpConfig.modelSelect).live('change',(function(){
  93. var currentYear = $(pfpConfig.yearSelect).val();
  94. var currentModel = $(pfpConfig.modelSelect).val();
  95. $(this).removeAttr('onchange');
  96. $.ajax({
  97. type: "GET",
  98. url: pfpConfig.getFvehUrl,
  99. data: "category="+pfpOptions.category+"&make="+pfpOptions.manufacturer+"&year="+currentYear+'&model='+currentModel,
  100. cache: false,
  101. success: function(html){
  102. // If the fveh ID is returned successfully, build the URL and redirect the user to the fiche selection page.
  103. location.href="./fiche_select2.asp?category="+pfpOptions.category+"&make="+pfpOptions.manufacturer+"&year="+currentYear+"&fveh="+html;
  104. }
  105. });
  106. }));
  107.  
  108.  
  109. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.