Dealer Locator Ajax Sample Code

Overview

Add a Dealer Locator search to your existing public website by embedding including a little javascript to do an ajax call. In the ajax approach, you use a form similar to the one from the iframe approach, but use javascript to intercept the form submit and do an ajax request back to the channelsuite server. The returned html table is inserted into a <div> in your code and rendered by your browser without redrawing the whole page.

Steps

1. Set up a DealerLocator.css file. Here's a 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 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

<link href="DealerLocator.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://yourChannelsuiteURL/API/js/prototype.js"></script>
<script type="text/javascript" src="http://yourChannelsuiteURL/API/js/submitJSONP.js"></script>

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.

  <form method=POST id="dls" name="dls"
    onSubmit="return submitJSONP('dls','putdiv','http://<your channelsuite URL>/API/DealerLocator/');" 
    action="http://<your channelsuite URL>/API/DealerLocator/">
 
    Please select your country: 
    <select id="country" name=country>
      <option value='' selected>Select...</option>
      <option value=1>USA</option>
      <option value=36>China</option>
      <option value=160>Taiwan</option>
      <option value=158>Sweden</option>
      <option value=30>Canada</option>
      <option value=81>Japan</option>
      <option value=174>UK</option>
    </select>
    <br/><br/>
    <div align=center><input value="Find Dealers" type="submit"></div>
  </form>

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 catch normally submitted search results when javascript is not available, add the iframe id as a target= in the form tag.

  <div id="output-div">Results go Here!</div>
  <iframe name="dealerLocatorFrame" style="width: 95%;  border: none;" 
          src="" id="dealerLocatorFrame"></iframe>

5. Edit the DealerLocator.css file to match the rest of your site

that should do it!

[ channelSUITE Support Wiki ]

Sidebar

Table of Contents

Dealer Locator Ajax Sample Code

Overview

Steps

[ channelSUITE Support Wiki ]

User Tools

Site Tools

Sidebar

Table of Contents

Dealer Locator Ajax Sample Code

Overview

Steps

Page Tools