dl-ajax-example
Differences
This shows you the differences between two versions of the page.
|
dl-ajax-example [2009/05/11 21:21] jay |
dl-ajax-example [2009/06/06 18:08] (current) jay |
||
|---|---|---|---|
| Line 8: | Line 8: | ||
| ===== Steps ===== | ===== Steps ===== | ||
| - | 1. Contact ChannelSUITE tech support and request the DealerLocator zip file (ChannelSUITE customers only, please!) that contains the necessary .js and .css files. Unlike the iframe approach where the html styles are supplied by the channelsuite server, the html returned by the ajax approach uses styles specified on your site, giving you a lot more control over the appearance of your dealer locator results. | + | 1. Set up a DealerLocator.css file. Here's a [[DealerLocator.css | good place to start]]. Unlike the iframe approach where the html styles are supplied by the channelsuite server, the html returned by the ajax approach uses styles specified on your site, giving you a lot more control over the appearance of your dealer locator results. |
| - | 2. Include the prototype.js, DealerLocator.js and CSS files in your html <head> section. | + | 2. Include the necessary javascript and CSS files in your html <head> section. You'll need to know the base URL of your channelsuite install, probably something like //yourcompany.channelsuite.com// |
| <code html> | <code html> | ||
| <link href="DealerLocator.css" rel="stylesheet" type="text/css"> | <link href="DealerLocator.css" rel="stylesheet" type="text/css"> | ||
| - | <script type="text/javascript" src="prototype.js"></script> | + | <script type="text/javascript" src="http://yourChannelsuiteURL/API/js/prototype.js"></script> |
| - | <script type="text/javascript" src="DealerLocator.js"></script> | + | <script type="text/javascript" src="http://yourChannelsuiteURL/API/js/submitJSONP.js"></script> |
| </code> | </code> | ||
| - | 3. Set up a form in your html to allow your website visitors to enter some search parameters. See the main [[dealer_locator]] page for info on the supported search parameters. The form element id parameters must match the search parameter names, and the onSubmit parameter must be specified as shown. In the following example we allow search by country. Please contact support for the list of available country codes. | + | 3. Set up a form in your html to allow your website visitors to enter some search parameters. See the main [[dealer_locator]] page for info on the supported search parameters. The form element id parameters must match the search parameter names, and the onSubmit parameter must be specified as shown. In the following example we allow search by country. Please see the [[api_helper_functions]] section for an explanation of the available country codes. |
| <code html> | <code html> | ||
| - | <form method=POST target="dealerLocatorFrame" onSubmit="return fetchit()" | + | <form method=POST id="dls" name="dls" |
| - | action="http://<your channelsuite URL>/API/DealerLocator/"> | + | onSubmit="return submitJSONP('dls','putdiv','http://<your channelsuite URL>/API/DealerLocator/');" |
| + | action="http://<your channelsuite URL>/API/DealerLocator/"> | ||
| Please select your country: | Please select your country: | ||
| <select id="country" name=country> | <select id="country" name=country> | ||
| Line 40: | Line 43: | ||
| 4. Place a div with id="output-div" somewhere in your html page; the html code returned by the ajax call will | 4. Place a div with id="output-div" somewhere in your html page; the html code returned by the ajax call will | ||
| - | replace the contents of output-div. Also, optionally place an empty iframe to use to catch normally submitted search results when javascript is not available. | + | replace the contents of output-div. Also, optionally place an empty iframe to catch normally submitted search results when javascript is not available, add the iframe id as a target= in the form tag. |
| <code html> | <code html> | ||
| Line 49: | Line 52: | ||
| 5. Edit the DealerLocator.css file to match the rest of your site | 5. Edit the DealerLocator.css file to match the rest of your site | ||
| - | |||
| - | 6. Edit DealerLocator.js and change the url variable to http://<your channelsuite URL>/API/DealerLocator | ||
| that should do it! | that should do it! | ||
dl-ajax-example.1242076900.txt.gz · Last modified: 2009/05/11 21:21 by jay