Problems, need help? Have a tip or advice? Post it here.
8 posts Page 1 of 1
Salve!

It's been a while since last posting here, but I ran into something I can't solve by myself or by searching the forum:

I set up a page displaying a google map, where one can choose what kind of markers are to be displayed. This works all very fine.
Now, I use nested_pages and created a "page" (for the menu, so it just points to somewhere else) that links to said map. I would like to change the URL of the map and therefore chose "masquerade" within the pointer settings.

When I now select something in the sidebar to change the map the flash variables will not be saved, therefore the map doesn't change. As everything works fine when I choose "redirect" I can only assume that this is an issue with flash variables and masquerading. Is there some way to fix that?

Code: Select all
<!-- Main -->
<section class="main">

<article>

<header>
<h1>
Cryogenics Map
</h1>
</header>

<cms:set map_display="<cms:get_flash 'map_display' />" />
<cms:set map_categories="<cms:get_flash 'map_categories' />" />

<div id="map"></div>
<script>
function initMap() {

var locations = [
<cms:if map_display && map_categories>
<cms:pages folder=map_display custom_field="map_category=<cms:show map_categories/>">['<strong><cms:show k_page_title/></strong><br/><cms:show map_info/><br/><a href="<cms:show map_url/>"><cms:show map_url/></a>', '<cms:if map_category="uni">U<cms:else_if map_category="ins"/>I<cms:else_if map_category="rcg"/>R<cms:else_if map_category="ass"/>A</cms:if>', <cms:show map_lat/>, <cms:show map_long/>, 0],</cms:pages>
<cms:else_if map_display/>
<cms:if map_display='www'>
<cms:pages>['<strong><cms:show k_page_title/></strong><br/><cms:show map_info/><br/><a href="<cms:show map_url/>"><cms:show map_url/></a>', '<cms:if map_category="uni">U<cms:else_if map_category="ins"/>I<cms:else_if map_category="rcg"/>R<cms:else_if map_category="ass"/>A</cms:if>', <cms:show map_lat/>, <cms:show map_long/>, 0],</cms:pages>
<cms:else />
<cms:pages folder=map_display>['<strong><cms:show k_page_title/></strong><br/><cms:show map_info/><br/><a href="<cms:show map_url/>"><cms:show map_url/></a>', '<cms:if map_category="uni">U<cms:else_if map_category="ins"/>I<cms:else_if map_category="rcg"/>R<cms:else_if map_category="ass"/>A</cms:if>', <cms:show map_lat/>, <cms:show map_long/>, 0],</cms:pages>
</cms:if>
<cms:else/>
<cms:pages folder='europe'>['<strong><cms:show k_page_title/></strong><br/><cms:show map_info/><br/><a href="<cms:show map_url/>"><cms:show map_url/></a>', '<cms:if map_category="uni">U<cms:else_if map_category="ins"/>I<cms:else_if map_category="rcg"/>R<cms:else_if map_category="ass"/>A</cms:if>', <cms:show map_lat/>, <cms:show map_long/>, 0],</cms:pages>
</cms:if>
];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: <cms:if map_display='www'>1<cms:else/>3</cms:if>,
center: new google.maps.LatLng(<cms:if map_display='usa'>39.337336, -95.961341<cms:else/>49.011913, 8.416848</cms:if>),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({});

var marker, i;

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
label: (locations[i][1]),
map: map,
});

google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
   infowindow.setContent(locations[i][0]);
   infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCANSocqvHxej5TY5tuaJBWA-_6QgzFQiw&callback=initMap">
</script>
</article>

</section>

<!-- Sidebar -->
<aside class="sidebar">

<section>


<cms:form anchor='0' method='post'>
<cms:if k_success >
<cms:if frm_display='-'>
<cms:else/>
<cms:set_flash name='map_display' value=frm_display />
<cms:set_flash name='map_categories' value=frm_categories />
</cms:if>
<cms:redirect k_page_link />
</cms:if>
<cms:input name="display" type='radio' opt_values='<span></span>Worldwide=www | <span></span>Europe=europe | <span></span>USA=usa' opt_selected="<cms:if map_display><cms:show map_display/><cms:else/>europe</cms:if>" />
<cms:input name="categories" type='checkbox' opt_values='<span></span>Institutes=ins , <span></span>Research Centers/Groups=rcg , <span></span>Universities=uni , <span></span>Associations=ass' separator=',' opt_selected="<cms:if map_categories><cms:show map_categories/><cms:else/>ins , rcg , uni , ass</cms:if>" />
<cms:input type="submit" value="Show selected" name="submit"/>
</cms:form>

</section>

</aside>

Attachments

Hi,

I'll need to study the issue in its full context so would like access to your setup.
If that is possible, please PM me the access creds (Couch + FTP).

Thanks.
Hi Klaus,

Thanks for the creds.

The way you have setup things, the form uses POST method to send back the data. The template upon receiving it sets up a couple of flash messages and redirects immediately (hoping that the next fetch of the page will utilize these variables to show the map markers as specified).

Normally It works but with masquerading being used, Couch fetches in background the target page and in the process somehow the flash variables (they have a life-time of only one page load) are lost and you see the problem.

As a workaround, I used 'session' variables instead of the 'flash' and they seem to work just fine (please check the site) -
Form:
Code: Select all
<cms:set_session name='map_display' value=frm_display />
<cms:set_session name='map_categories' value=frm_categories />

Display:
Code: Select all
<cms:set map_display="<cms:get_session 'map_display' />" />
<cms:set map_categories="<cms:get_session 'map_categories' />" />

I think that should suffice as a workaround (with the added advantage that if the user visits the map page again, it would load using her previous settings).

If the arrangement suits you, the issue is resolved. Please let me know.

That said, I have a suggestion here.
For such kind of 'search' pages (particularly filtered search with may parameters), I think using 'GET' (instead of 'POST') is more suitable.

Two reasons -
1. You don't need to redirect after the form submission (as there is no fear of making any database entry twice if the form gets resubmitted - as happens in 'post').

2. The submitted parameters appear in the URL (as opposed to in POST where they are submitted in the background). This might look cluttered but is actually a very good thing - this allows the visitor to *bookmark* their search results. So, for example in your case, someone searching for 'all research centers and universities' in Europe, can copy the resulting URL (which now has the submitted parameters) and can save it or mail it to others etc.

Google maps site, for instance, uses the same method.

If the suggested methods appeals to you, here is your modified code -
Code: Select all
<!DOCTYPE HTML>
<html>
   <head>
      <title><cms:get_custom_field 'site_title' masterpage='settings.php' /> | Cryogenics Map</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!--[if lte IE 8]><script src="/assets/js/ie/html5shiv.js"></script><![endif]-->
      <link rel="stylesheet" href="/assets/css/main.css" />
      <!--[if lte IE 9]><link rel="/stylesheet" href="assets/css/ie9.css" /><![endif]-->
      <!--[if lte IE 8]><link rel="/stylesheet" href="assets/css/ie8.css" /><![endif]-->
      <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
   </head>
   <body>

      <!-- Header -->
         <header id="header">

            <!-- Logo -->
               <cms:embed 'logo.html' />

            <!-- Nav -->
               <cms:embed 'menu.html' />

         </header>

      <!-- Wrapper -->
         <div class="wrapper">

            <!-- Main -->
               <section class="main">
               
                  <article>
                  
                     <header>
                        <h1>
                           Cryogenics Map
                        </h1>
                     </header>
                     
                            <cms:capture into='my_form' >
                                <cms:form anchor='0' method='get'>
                                    <cms:if k_success >
                                        <cms:if frm_display='-'>
                                        <cms:else/>
                                            <cms:set map_display=frm_display scope='global' />
                                            <cms:set map_categories=frm_categories scope='global' />
                                        </cms:if>
                                    </cms:if>
                                    <cms:input name="display" type='radio' opt_values='<span></span>Worldwide=www | <span></span>Europe=europe | <span></span>USA=usa' opt_selected="<cms:if map_display><cms:show map_display/><cms:else/>europe</cms:if>" />
                                    <cms:input name="categories" type='checkbox' opt_values='<span></span>Institutes=ins , <span></span>Research Centers=resc , <span></span>Research Groups=resg , <span></span>Universities=uni , <span></span>Associations=ass' separator=',' opt_selected="<cms:if map_categories><cms:show map_categories/><cms:else/>ins , resc , resg , uni , ass</cms:if>" />
                                    <cms:input type="submit" value="Show selected" name="submit"/>
                                </cms:form>
                            </cms:capture>
                     
                     <div id="map"></div>
                     <script>
                     function initMap() {
                     
                        var locations = [
                           <cms:if map_display && map_categories>
                           <cms:pages folder=map_display custom_field="map_category=<cms:show map_categories/>">['<strong><cms:show k_page_title/></strong><br/><cms:show map_info/><br/><a href="<cms:show map_url/>"><cms:show map_url/></a>', '<cms:if map_category="uni">U<cms:else_if map_category="ins"/>I<cms:else_if map_category="resc"/>C<cms:else_if map_category="resg"/>G<cms:else_if map_category="ass"/>A</cms:if>', <cms:show map_lat/>, <cms:show map_long/>, 0],</cms:pages>
                           <cms:else_if map_display/>
                              <cms:if map_display='www'>
                              <cms:pages>['<strong><cms:show k_page_title/></strong><br/><cms:show map_info/><br/><a href="<cms:show map_url/>"><cms:show map_url/></a>', '<cms:if map_category="uni">U<cms:else_if map_category="ins"/>I<cms:else_if map_category="resc"/>C<cms:else_if map_category="resg"/>G<cms:else_if map_category="ass"/>A</cms:if>', <cms:show map_lat/>, <cms:show map_long/>, 0],</cms:pages>
                              <cms:else />
                              <cms:pages folder=map_display>['<strong><cms:show k_page_title/></strong><br/><cms:show map_info/><br/><a href="<cms:show map_url/>"><cms:show map_url/></a>', '<cms:if map_category="uni">U<cms:else_if map_category="ins"/>I<cms:else_if map_category="resc"/>C<cms:else_if map_category="resg"/>G<cms:else_if map_category="ass"/>A</cms:if>', <cms:show map_lat/>, <cms:show map_long/>, 0],</cms:pages>
                              </cms:if>
                           <cms:else/>
                           <cms:pages folder='europe'>['<strong><cms:show k_page_title/></strong><br/><cms:show map_info/><br/><a href="<cms:show map_url/>"><cms:show map_url/></a>', '<cms:if map_category="uni">U<cms:else_if map_category="ins"/>I<cms:else_if map_category="resc"/>C<cms:else_if map_category="resg"/>G<cms:else_if map_category="ass"/>A</cms:if>', <cms:show map_lat/>, <cms:show map_long/>, 0],</cms:pages>
                           </cms:if>
                        ];

                        var map = new google.maps.Map(document.getElementById('map'), {
                           zoom: <cms:if map_display='www'>1<cms:else/>3</cms:if>,
                           center: new google.maps.LatLng(<cms:if map_display='usa'>39.337336, -95.961341<cms:else/>49.011913, 8.416848</cms:if>),
                           mapTypeId: google.maps.MapTypeId.ROADMAP
                        });

                        var infowindow = new google.maps.InfoWindow({});

                        var marker, i;
                        
                        var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

                        for (i = 0; i < locations.length; i++) {
                           marker = new google.maps.Marker({
                              position: new google.maps.LatLng(locations[i][2], locations[i][3]),
                              label: (locations[i][1]),
                              map: map,
                           });

                           google.maps.event.addListener(marker, 'click', (function (marker, i) {
                              return function () {
                                 infowindow.setContent(locations[i][0]);
                                 infowindow.open(map, marker);
                              }
                           })(marker, i));
                        }

                     }
                     </script>
                     <script async defer
                     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCANSocqvHxej5TY5tuaJBWA-_6QgzFQiw&callback=initMap">
                     </script>
                  </article>

               </section>

            <!-- Sidebar -->
               <aside class="sidebar">
                  
                  <section>
               
                            <cms:show my_form />
                  
                  </section>

               </aside>

         </div>

      <!-- Footer -->
         <footer id="footer">
            <cms:embed 'footer.html' />
         </footer>

      <!-- Scripts -->
         <script src="/assets/js/jquery.min.js"></script>
         <script src="/assets/js/skel.min.js"></script>
         <script src="/assets/js/util.js"></script>
         <script src="/assets/js/jquery.dropotron.min.js"></script>
         <!--[if lte IE 8]><script src="/assets/js/ie/respond.min.js"></script><![endif]-->
         <script src="/assets/js/main.js"></script>

   </body>
</html>

Please note how we are no longer using redirect (and how the form has been moved above in the code for the values set by it to be available to the code below it).

Hope it helps.
Dear KK,

thank you very much. It works like a charm! Your support is just superb!!
Great sample :) Bookmarked. :)
I'm dispairing!...

I changed slightly the code of the form:
Code: Select all
<cms:capture into='my_form' >
   <cms:form anchor='0' method='get'>
      <cms:if k_success >
         <cms:if frm_display='-'>
         <cms:else/>
            <cms:set map_display=frm_display scope='global' />
            <cms:set map_categories=frm_categories scope='global' />
            <cms:set map_cse_only=frm_cse_only scope='global' />
            <cms:set map_cse_individual_members=frm_cse_individual_members scope='global' />
         </cms:if>
      </cms:if>
      
      <cms:input name="display" type='radio' opt_values='<span></span>Worldwide=www | <span></span>Europe=europe | <span></span>USA=usa' opt_selected="<cms:if map_display><cms:show map_display/><cms:else/>europe</cms:if>" />
      <cms:input name="categories" type='checkbox' opt_values='<span></span>Companies=com , <span></span>Research Facilities=res , <span></span>Associations=ass' separator=',' opt_selected="<cms:if map_display=''>com, res, ass<cms:else_if map_categories=''/><cms:else/>com, res, ass</cms:if>"/>
      <cms:input name="cse_individual_members" type='checkbox' opt_values='<span></span>Individual members=1' opt_selected="<cms:if cse_individual_members>1<cms:else/></cms:if>" />
      <hr/>
      <cms:input name="cse_only" type='checkbox' opt_values='<span></span>Show CSE only=1' opt_selected="<cms:if cse_only>1<cms:else/></cms:if>" />
      <cms:input type="submit" value="Show selected" name="submit"/>
   </cms:form>
</cms:capture>


What troubles me - especially since it should be rather easy - is this part:
Code: Select all
<cms:input name="categories" 
type='checkbox'
opt_values='<span></span>Companies=com , <span></span>Research Facilities=res , <span></span>Associations=ass'
separator=','
opt_selected="<cms:if map_display=''>com, res, ass<cms:else_if map_categories=''/><cms:else/>com, res, ass</cms:if>"
/>


What I want to accomplish is the following:
On page load all options should be checked, as this is what the map displays. But it should also be possible to uncheck all. I tried a thousand things. But whatever I do, either on the first page load they are not checked, or when I uncheck all and load the map again all are checked... I don't get it - not seeing the woods due to all the trees like we use to say here :?

Any help would be much appreciated.
<cms:bump/>

This really drives me crazy!... Might have to do with how GET works and my lack of knowledge here. I tried thousands (at least it feels like it ;) ) of different approaches to set variables and if's and else's but I always manage either to start with nothing selected, and everything works afterwards fine (not selecting anything remains unselected) or I start with a pre-selection of Companies, Research Facilities and Associations and everytime I want to select nothing they all get selected back again...
Klaus,

I am very sorry but I am terribly tied up so won't be able to delve into this issue at the moment.
I'll do that once I am a bit free.
8 posts Page 1 of 1