Dropdown Pulls in Content

A dropdown list selection can pull in content and publish it in a div. Make a selection and Ajax pulls in content for that selection.

Some possibilities of use:

• A product selection loads a description of the product.

• A location selection brings up a map with driving directions to that location.

• A contact form is loaded on demand.

• A genre selection loads a relevant list of books.

• A color selection lists color codes, swatches, and names of complimentary colors.

Caveats and implementation instructions are below this live example.

The example pulls in only .html files. But there is no such limitation; I used .html because they are static pages. Most website content can be pulled in with Ajax and successfully published in a div, including content with html, head, and body tags.

For dynamic pages (PHP pages, as an example), the page as obtained from the server is inserted into the div. It would be static, not dynamic, after it's published in the div.

Caveats

Any website content can be published, but some may result in something different than expected. Here are three caveats.

1. CSS stylesheets in the content pulled in with the content will affect the rest of the page where the content is published. That's because CSS affects the entire page.

2. If the content being pulled in contains relative URLs, the URLs will break unless the directory of the content that was pulled in is the same as the directory of the page where the content is published. That's because relative URLs that work in one directory won't work in a different directory path.

3. JavaScript in pages that are pulled in is unlikely to work. That's because JavaScript is parsed when a web page first loads, not every time new content is pulled in. (Outside the scope of this article, but mentioned as a possibility in case your project needs it, there are techniques that can be used to run JavaScript pulled in after a page has completed loading.)

Implementation Instructions

Let's start with the source code used in the example further above. Implementation with customization notes follow.

<select onchange="PresentSelectedContent(this.options[this.selectedIndex].value)">
<option value="">- Select content to view -</option>
<option value="/library/external/DropdownAjaxForm.html">A working contact form</option>
<option value="/library/external/DropdownAjaxFlowers.html">Brighton Beach Flowers</option>
<option value="/library/external/DropdownAjaxLinks.html">Related Links</option>
</select>

<div id="div-for-on-request-content" style="border:1px solid #ccc; border-radius:5px; padding:10px;">
Selected content will be here.
</div>

<script type="text/javascript">
/* 
   Dropdown Pulls in Content
   Version 1.0
   June 7, 2015

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2015 Will Bontrager Software LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software LLC grants 
   you a royalty free license to use this 
   software provided this notice appears 
   on all copies. 
*/

/* Customization */
//
// One place to customize.
//
// Specify the id value of the div within which the requested 
//    contents shall be published.

var PublishContentIntoDivWithThisID = "div-for-on-request-content";

/* End of customization */

function PresentSelectedContent(url)
{
   if( ! url.length ) { return; }
   var http = GetHTTPconnection();
   if(! http) { return false; }
   http.onreadystatechange = function() { RequestMethodGETResponse(http); }
   http.open("GET",url,true);
   http.send('');
}

function RequestMethodGETResponse(http)
{
   if(http.readyState == 4)
   {
      if(http.status == 200) { document.getElementById(PublishContentIntoDivWithThisID).innerHTML = http.responseText; }
      else { alert('\n\nContent request error, status code:\n'+http.status+' '+http.statusText); }
   }
}

function GetHTTPconnection()
{
   var http;
   try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch (e)
   {
      try { http = new ActiveXObject("Microsoft.XMLHTTP"); }
      catch (e2)
      {
         try { http = new XMLHttpRequest(); }
         catch (e3) { http = false; }
      }
   }
   return http;
}

</script>

The source code in the above box contains three sections. Each section is discussed separately further below.

1. The dropdown selection field, colored red. Customize this according to what you need.

2. The div within which pulled-in content is published, colored brown. Style it as desired.

3. The JavaScript, colored black. One place to customize is colored blue.

The sections, each discussed separately.

1. The dropdown selection field, colored red.

Keep the <select...> and </select> tags as they are.

The first option with the null value is optional. The JavaScript will act only when a selection changes. If the option's value is null, the JavaScript doesn't act.

For all other options, the value of the option needs to be the URI (the URL minus the http:// and domain) of the page or file to be pulled in. The option text can be whatever makes sense for your implementation. It's a limitation of Ajax that it can pull in only pages/files from the same domain as the web page loaded in the browser.

Put the dropdown selection field where it needs to be for your site visitors to use. It doesn't need to be between form tags. That's because no form is being submitted, only a JavaScript function is run when a selection changes.

2. The div within which pulled-in content is published, colored brown.

The div needs an id value. (The value will be specified in the customization section of the JavaScript.)

The design of the div may be anything that can be done with CSS.

Optionally, the content of the div may be pre-filled with text, such as the example's "Selected content will be here." When a selection is made from the dropdown and content retrieved with Ajax, any pre-filled text will be replaced with the new content.

Put the div where it needs to be for your site visitors to see.

3. The JavaScript, colored black. One place to customize, colored blue.

In the clearly-marked customization section of the JavaScript, specify the id value of the div in the previous step. The example id value is colored blue in the above source code. Replace it with the correct id value.

Put the JavaScript in the web page source code anywhere that JavaScript can run. Optionally, it may be pulled in from an external JavaScript file.

Using "Dropdown Pulls in Content"

Site visitors select an item from the dropdown. The requested content is pulled in.

Once set up, pages can be added and removed from the dropdown list as needed.

(This article first appeared in Possibilities ezine.)

Will Bontrager