Drop down menu populated with database entries and multiple viewers on one page

8 posts by 2 authors in: Forums > CMS Builder
Last Post: February 10, 2017   (RSS)

By jreddigital - January 30, 2017

Hi,

I am creating a page for a planning commission's maps. They are offering different map types for download, e.g. aerial, land use, transportation.

I need a index showing the many type of maps available and I am creating a List page with multiple viewers.  

Each map viewer will have a drop down menu (or jump menu) where a town name can be selected.

The site visitor selects a town name and then will go to a Detail page where they can download the map and see more information about the map.

An html List page with the layout I want is here:  http://strafford.org/maps/standmapsList.html

An html Detail page is here. http://strafford.org/maps/standmapsDetaillanduse.html

Even after extensively reviewing forum posts, I am unable to

1) load the multiple viewers on the index page.  My attempt is here:  http://strafford.org/maps/standmapsList.php

2) I am also unable to get the town names in the database to appear in a dropdown menu or jump menu).

My attempt at the List page using three section viewers is not working.  As others have experienced, I only see one viewer and the error "Unknown optionsType"

The List viewer page with php is here:  http://strafford.org/maps/standmapsList.php

So I need help with the multiple viewers on the Map listing page and I need help forming a jump menu or dropdown menu that is populated from the town field in the database.

No doubt I have some important code lines, but at this point I feel  am creating a  three ring circus. The Detail pages are working correctly at least.

Thanks in advance for your help. J

Code for List viewer page with php is below:

-------------------- header --------------------
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
   require_once "/home/straffor/public_html/cmsAdmin/lib/viewer_functions.php";

// load viewer library
  $libraryPath = 'cmsAdmin/lib/viewer_functions.php';
  $dirsToCheck = array('/home/straffor/public_html/','','../','../../','../../../');
  foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
  if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
    
   // load records from 'standmaps_2015_aerial'
  list($standmaps_2015_aerialRecords, $standmaps_2015_aerialMetaData) = getRecords(array(
    'tableName'   => 'standmaps_2015_aerial',
    'loadUploads' => false,
    'allowSearch' => true,
  ));
 
  // load records from 'standmaps_2015land'
  list($standmaps_2015landRecords, $standmaps_2015landMetaData) = getRecords(array(
    'tableName'   => 'standmaps_2015land',
    'loadUploads' => false,
    'allowSearch' => false,
  ));
 
// load records from 'standmaps_transport'
  list($standmaps_transportRecords, $standmaps_transportMetaData) = getRecords(array(
    'tableName'   => 'standmaps_transport',
    'loadUploads' => false,
    'allowSearch' => false,
  ));
?>

-------------------- end header --------------------------------

-------------------- code with dropdown menus --------------------


     <h3>2015 Aerial </h3>
   
            <form method="get" action="standmaps_2015_aerial.php" >

              <?php $options = getListOptions('standmaps_2015_aerial', 'townaerial15'); ?>

             <select name="<?php echo htmlencode($standmaps_2015_aerialRecord['townaerial15']) ?>">

               <option value=""></option>

            <option value="">Any</option>

            <?php foreach($options as $value => $label): ?>

           <option value="<?php echo $value; ?>" ><?php echo $label; ?></option>

             <?php endforeach; ?>

            </select>

               <input type="submit" name="go_button" id="go_button" value="Go" onclick="MM_jumpMenuGo('jumpMenu','parent',0)" />
            </form>
            
-------------------- end code with dropdown menus --------------------       

macwebster

By jreddigital - February 7, 2017

Hi Ross, thank you very much for your reply.

Success on part one! I have all the sections reading properly on the Map Index page and all the links connect properly to a Detail page.  I made a simplified version of the page (removing global nav) and it is viewed here 

http://strafford.org/maps/standmapsList.php

and the code is uploaded as an attachment - both as the page above and in a 'simple' version cleaning out scripts, etc.

I am looking forward to learning how to program the dropdowns and the client is excited - many months of work on their part for this.

Best, J

macwebster
Attachments:

standmapsListdev.php 12K

standmapsListdev-simple.php 5K

By ross - February 8, 2017

Looking good!

The code you need will end up being pretty much the same for each of the maps.

Let's focus on 2015 Arial to start with.

Keep in mind that with all provided code examples, you may still need to make adjustments to match your own setup.

<select onchange="alert(this.value);">
 <option value="">Select A City</option>
 <?php foreach ($standmaps_2015_aerialRecords as $record): ?>
  <option value="<?php echo htmlencode($record['townaerial15']) ?>"><?php echo htmlencode($record['townaerial15']) ?></option>
 <?php endforeach ?>
</select>

This will give you a drop down menu with each city as an option.  When you select a city, the code will

When you select a city, the code will simply alert it on the screen for you for now.

I see that you have a JavaScript function on your page that handles page re-directs and I'll leave it to you to hook that part up.

Give this code a try and let me know how you make out.

Thanks!

-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

By jreddigital - February 9, 2017

Thanks Ross.  

Before I get into the weeds of using javascript for this (my scripts are all related to the menu systems I use), why can't I just use the jumpmenu method similar to that discussed in this post: "A drop-down year list to display different categories books."  http://www.interactivetools.com/forum/forum-posts.php?A-drop-down-year-list-to-display-different-categories-books.-78685

Here is that code from that post...

<form method="get" action="birds_mag_list.php" >
   <?php $options = getListOptions('birds_mag_list', 'list'); ?>
     <select name="list">
       <option value="">&lt;select&gt;</option>
          <option value="">Any</option>
            <?php foreach($options as $value => $label): ?>
          <option value="<?php echo $value; ?>" ><?php echo $label; ?></option>
     <?php endforeach; ?>
    </select>
   <input type="submit" name="go_button" id="go_button" value="Go" onclick="MM_jumpMenuGo('jumpMenu','parent',0)" />
</form>

best, J

macwebster

By jreddigital - February 10, 2017 - edited: February 10, 2017

Hi Again,

The client wanted to have the maps page accessible, so I made a new development page here:

http://strafford.org/maps/standmapsListdm.php

The Aerial maps category has a demo jumpmenu /dropmenu.

But to return to my point above, I would like to avoid js/jquery connections and use a form with a jump menu. I think my client's users will be more comfortable with that as well. Is this possible?

I set one up on the development page as below, but I know there is something missing.

<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option value="" selected>Select</option>

<?php foreach ($standmaps_2015_aerialRecords as $record): ?>
<option value="<?php echo htmlencode($record['townaerial15']) ?>"><?php echo htmlencode($record['townaerial15']) ?></option>
<?php endforeach ?>
</select>
<input type="submit" name="go_button" id="go_button" value="Go" onclick="MM_jumpMenuGo('jumpMenu','parent',0)" />
</form>

thanks, J

macwebster

By ross - February 10, 2017

Hi there.

A jump menu like that should work.

I won't be able to completely debug it in the forum, but let's have a look anyway.

The first thing I notice, though, is your code is setting the "value" of each option as the name of the city:

<option value="<?php echo htmlencode($record['townaerial15']) ?>"><?php echo htmlencode($record['townaerial15']) ?></option>

The code you have to manage this drop down is set to redirect your page to whatever the value of the option selected is.

function MM_jumpMenu(targ,selObj,restore){ 
     //v3.0  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");  
     if (restore) selObj.selectedIndex=0;
}
</script>

What I think you want to do is have the "value" in each option set to the detail page URL like this:

<option value="<?php echo htmlencode($record['_link']) ?>"><?php echo htmlencode($record['townaerial15']) ?></option>

Notice where I put "_link".

You may need to modify this further but that's a start for now.

Let me know any questions.

-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

By jreddigital - February 10, 2017

You bet Ross, I'll wrestle with it and if I'm still stuck I hope I can use the consulting services ;-)

Thanks very much, J

macwebster