Creating and catching individual links for each page and query in a special environment

Hi,

I am genealogist with the ambition to build the most used genealogy site in the country. Genealogy is equal to famiiy research :) At this point in time I have appr. 1.000 users on my site.

 I am working with my site in a little special way.

I use the web design tool Rapid Weaver to design my templates, and then I develop my individual page functionalities in "normal" web developer tools like  HTML, PHP, CSS, JS, SQL, etc.

When having developed and tested a page/function in the "normal" tools I attach it to my template in Rapid Weaver as an iFrame, and publish it to my users.

This works nicely, but it means that the URL shown in the browser when working with my pages is static because the active page is a page that holds an iFrame - which is actually the one "doing the jobs".

Take a look for example at this page: https://genealogiskforum.dk/arkivalier/ft/
It is a page where you can search for danish census, and it offers a lot of possibilities and variations to get results. But no matter which results the user is searching and finding, the URL prensted in in the browser remains the same.

This fact makes it difficult to share information, and the nature of genealogy and family research is for a great part the ability to share information cross borders, platforms, systems, generations, nationalities, genders etc. etc.

So my question is, if there is a way to individualize the browser URL's so they are pointing at the specific page/result the user is looking on right now, and so that it can be copied and shared with others.
Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Hey Peter,

You're not going to get individual URLs easily when using iFrames. Personally, I'd stear clear of them altogether partly because of this. Also, Search Engine indexing may not work the way you expect.

You could avoid the use of iFrames if your site is templated properly, either by using a pre-built templating engine, or if your requirements are very simple, using a roll-your-own solution.

Depending on the complexity and the structure of your site, you may also want to look at an MVC (Model/View/Controller) kind of approach. You could have a Controller for each section of your site that serves up the Views of the various Models.

As for sharing information, specifically Search Results, that's going to be tricky if you use POST for all your searches. You can't bookmark or share the POST data, so you would need to look at changing over to GET requests. That way the search terms are sent as part of the URL, so you could easily share or bookmark it, for example:

yourDomain.com/search/?id=123&town=SomeTown&City=SomeCity.

Anybody could then visit that URL and get the results directly.

Depending on how far you want to take this, it might be worth investigating using a Framework such as CodeIgniter or Laravel (lots of others available). These frameworks often have a much more structured approach, offering templating, authentication, controllers, models, views etc. Would probably take some serious learning and development time but will give you a much more robust, manageable and future-proof site.
1
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks a lot Chris,

I have allready built templates from scratch based on combining elements like main content with header --> top-menu/bar --> side/bottom menu/bar - -> content area --> footer. Elements can be included as needed, and more elements might be added.

You can se some examples here: https://kroweb.dk/gfdev/templates/gf_index_sidebar.php and https://kroweb.dk/gfdev/templates/gf_index_bottombar.php

Could those be used as a way to avoid the iFrames and a general way forward?
0
Chris StanyonWebDevCommented:
Absolutely Peter. That's generally how templating works. In it's simplest form, you could just 'include' the parts into each page, so for example if you have 2 main pages - page1 and page2, you would setup your pages like so:

//Page1.php
<?php include_once('header.php') ?>

<?php include_once('topMenu.php') ?>

<?php include_once('sideMenu.php') ?>

<?php
    // all the Page1 specific code goes here, either by coding directly, or 'including' the page 1 part (preferable)
?>

<?php include_once('footer.php') ?>

Open in new window


//Page2.php
<?php include_once('header.php') ?>

<?php include_once('topMenu.php') ?>

<?php include_once('sideMenu.php') ?>

<?php
    // all the Page2 specific code goes here, either by coding directly, or 'including' the page 2 part (preferable)
?>

<?php include_once('footer.php') ?>

Open in new window

That's a very basic example and you'll find yourself including all the parts in each 'page', but if you need more control you can use a dedicated Templating Engine such as Smarty (you just create one template and inject the variable part into it), or a full Development Framework such as Laravel, CodeIgniter etc.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Peter KromanSenior Proposal SpecialistAuthor Commented:
Yep - I have made an example with the last page we made, and build it into my template.

Take a look here :) http://kroweb.dk/gfdev/godser_raw/godser2.php

So now comes the hard part:
1. How do I change from POST to GET
2. How do I manage the URLs so that they can be accessed individually
0
Chris StanyonWebDevCommented:
OK. Moving from POST to GET requires a few steps. Firstly, the Forms in your app and the AJAX requests need to be changed from POST to GET:

<form method="GET" ...

$.ajax({
        url: radioBtn(),
        data: {query:input_1.value},
        method:'GET',
        ...

Open in new window

Obviously, if your data is dyanamically loaded using AJAX, then you still won't get a URL that you can share, because the URL never changes. Usually, you code your server side scripts to check whether the user is making a 'normal' GET request (return the full page) or an AJAX based request (just return the data you need).

Once you've changed the HTML files to use GET, you will also need to change the PHP server-side files to look for a GET, so anywhere you have $_POST, you will need to change to $_GET

Bear in mind that you should only be using GET for making requests (GETting information), such as Searches. DO NOT use GET for inserting user data into your application!
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
OK - I'll go to work. I don't believe that my data is loaded dynamically using AJAX, since the only AJAX i use is the AJAX requests that you have seen a lot of times :)

I might be back on this later :)
0
Chris StanyonWebDevCommented:
Your data is loaded dynamically Peter.

When you load a page, there is no data in it. When you do a search, that search is made through an AJAX request to load the data (search results) from the server. You'll notice that by doing this, the URL doesn't change, so you can't bookmark / share the results.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
OK. Now I have learned something new again :)

Does this mean that I have to change all my AJAX requests - and how is the easiest way to do that?
0
Chris StanyonWebDevCommented:
Haha - always something new to learn.

If you don't want to use AJAX requests, then you would just remove the jQuery that makes the request.

However, you will probably need to change your server-side scripts as well. When you do a normal web request (type in the browser), the server needs to return a FULL html page. When you make an AJAX request, generally you are only asking for part of a page (the search results for example). Currently, your forms will be set up to make an AJAX request, so when you click the button, the search terms are sent to your server-side script, and that script will only return part of the page (a table full of search results etc). If you remove the AJAX calls, then your script will need to return the full page.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,

I am not sure I fully understand it yet. Could you give an example - if we take this ajax function (the one we made yesterday) how would I change that to work the way I need it?
      //Search button and Enter key function
      $('#search2').submit(function(e) {
      e.preventDefault();  
      $('#list_items > table').remove();    
    $.ajax({
        url: radioBtn(),
        data: {query:input_1.value},
        method:'POST',
        dataType: 'html'
    }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
    });

});

Open in new window

0
Chris StanyonWebDevCommented:
You would remove that whole block of code (you'll still need to drop in the DataTable call separately). Set your #search2 form method to GET, along with the correct action url.

When you click on the Submit button, the form's data would be appended to the URL, so you would end up sending a request of something like this:

yourdomain.com/yourUrl.php?query=someValue

The yourUrl.php script would then need to deal with the $_GET['query'] value (someValue in the above example), run through it's logic (Db search etc), and instead of just returning a page partial (table with search results) it would need to generate a full and valid HTML page. Once on that page, you would see that the URL in the address bar would include the query=someValue querystring and you could therefore bookmark or share it.

It may take some getting used to because effectively you're doing things the wrong way around. Normally, you would code your site to behave properly without AJAX, and then you would add AJAX in later on if it was needed. You're going the other way around.

Here's a very quick example of the GET query string working. Create this page, load it up, enter a search term and click on Submit. You'll see the URL contains the data, which means you can bookmark it:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Chris Stanyon</title>
    </head>
    <body>
        <form method="get">
            <input type="text" name="query">
            <input type="submit" value="Search">
        </form>

        <?php if (!empty($_GET)): ?>
            <?php var_dump($_GET); ?>
        <?php endif; ?>
    </body>
</html>

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Yes - I see it in your code example. When searching for "Peter" I get this URL int the browser: http://kroweb.dk/gfdev/chris_get.php?query=Peter. That's nice.

But I am a little nervous about this statement:
You would remove that whole block of code (you'll still need to drop in the DataTable call separately).

But now I will make some trying, and then I surely will get back :)
0
Chris StanyonWebDevCommented:
Currently that code block basically catches the Submit event of the form and instead of sending it normally, it makes an AJAX request. Once the AJAX request is complete, it drops the returned data into the #list_items div and then calls DataTable() on it.

Because we no longer require the AJAX event, there is no need to catch the Submit event, and as no AJAX call is being made, there is nowhere at that stage to call the DataTable() method, so you will need to call that in the normal fashion - in a document.ready block on your (now static) page.

$(document).ready(function() {
    $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
});

Open in new window

Put that in the normal place for scripts (<head>). Make sure you are including the relevant files - jQuey, DataTables etc.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Well - on this page: http://kroweb.dk/gfdev/godser_raw/godser2.php
I have changes POST to GET, I have set the form action to be the file that generates the table, I have deleted the block of script code we are talking about (but kept all other script code for now ...??) , I have put in the script you suggest above in the head, and when searching for "Kronborg" I get this:
Sk-rmbillede-2018-01-15-17.03.44.pngIt shoes the individual link, but everything else is not so good anymore :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
What I need - I think - is to be able to push the result generated on the page that generates the table back to the main page, so the CSS and scripts from here can be used in the presentation, and so that it this page URL I see ...

Am I off track here??
0
Chris StanyonWebDevCommented:
Yeah - like I've said, if you're not using AJAX, then your script need to return a FULL HTML page, not just the Partial Page that the AJAX call needed. Your new page is doing exactly that - returning just the table data and NOT a full HMTL page. A Full HTML page needs the DOCTYPE, the <html>, <head>, <body> etc!
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
So - If I want to present the results at the same page as I make the query from, I need to create the table on that same page ?? And is it also that page I should set up as action page in the form, which is on the same page?
0
Chris StanyonWebDevCommented:
Basically ... Yes! That's it.

If you look at the example I posted earlier, you'll see that the page is a full HTML page, that contains the form (GET request with the action omitted - submit to self!). It also contains the results of the search (a simple var_dump in my example). It's all contained in a single page.

As your requirements are more complex, the structure will also be more complex, but we've already looked at how to use PHP includes, so keep your moving parts small and self-contained, and it should be easier to follow. For example, your main page may end up looking as simple as:

<?php
include_once('header.php');

include_once('topMenu.php');
include_once('sidebar.php');

include_once('searchForm.php');
include_once('searchResults.php');

include_once('footer.php');
?>

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Yeahhhhh - Think I am i on the right track here.

Could I ask you to try out this link and tell me what you get :)
http://kroweb.dk/gfdev/godser_raw/godser2.php?query=Kronborg&soeg=S%C3%B8g
0
Chris StanyonWebDevCommented:
Nice - definitely looks like you're on the right track. That link gives me the search results in a full, proper table. If I type Kronborg in the Search Box I get exactly the same results, so it looks to me like it's working as expected :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,

Think I am learning a little bit faster now - but I also have a very good mentor, and thank you very much for that.

I will not close this question just now, because there is a couple of the pages that I have to change to this setup that is rather complex, and I think I just might need a little assistance when I get to work on those :)

Hope that is OK?
0
Chris StanyonWebDevCommented:
No problem Peter
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Hi Chris,

Here comes the tricky one :)

I am working on this page: http://kroweb.dk/gfdev/stednavne_raw2/index2.php

There are a few problems:
1. I can't get the GET to work correctly, because the scripts for the Enter key and the Søg button also holds other functionlity
2. My top menu bar gets styled wrongly because of a stylesheet needed for something else
3. I can't get my template footer instances into the page correctly

Let's start with the the first one.
I have made all the changes from POST to GET in all files and I have changed the form to include an action and changed the search button from button type to submit type.  
The two scripts for "Søg" (Search) button and Enter key are pasted below, and I know they are not as they should be because they still includes the ajax and table lines. Problem is that they both include functionality besides this. I have worked quite a bit with them, but I can't figure out how get them to work right.  
The page is actually working nicely but I obviously do not get the URL right when performing a search - first when hitting the "Nulstil" (Reset) button the URL shows the search string :)

The "Søg" button:
     // "Søg" button function
      SogButton.addEventListener('click',function (){
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'GET',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
        input_2.focus();
        google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
        (function (){
          var rows=document.getElementsByTagName('tr');
          var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;              
          if(Amt){
            seaDragonInp(Amt);
          }  
        })();
        cellClick();
      });         

     });

Open in new window


The Enter key:
        // Return key search function
        input_2.addEventListener('keyup',function(e){
          input_1.value=this.value;  
          if(e.keyCode===13 && scopeVar!=='GOOGLE'){            
           $.ajax({
             url: radioBtn(),
             data: {query:input_1.value},
             method:'GET',
             dataType: 'html'
           }).done(function (res){
            $('#list_items > table').remove();
            $('#list_items').html(res);
            $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
            (function (){
              var rows=document.getElementsByTagName('tr');
              var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;              
              if(Amt){
                seaDragonInp(Amt);
              }  
            })();
            cellClick();
          });
         }
       });

Open in new window


The "Nulstil" button:
        //"Nulstil" button
        NustilButton.addEventListener('click',function (){
         $('#list_items > table').remove();
         console.log(map);
         map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
         map.setZoom(8);
         input.value=1;
         viewer.goToPage(0);

       });

Open in new window

0
Chris StanyonWebDevCommented:
Hey Peter,

First things first. Because you want to use a normal GET request, I would remove the jQuery from the buttons and the Enter key completely. As you're not going to be using AJAX, you don't need that code.

The reason your Nutsil button show the search string in the URL is because it's a Submit button, so clicking it is exactly the same as click the Sog button - you need to change it to be type="reset".

Now, because you're not using AJAX to the data, when you submit your form, you will do you standard search using the GET variable and then output the search results as part of the full page. You need to use that GET variable to set up your map and image browser.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Yes - I can understand that. My problem here is that the jQuey code for the Submit button and Enter key also includes other (important) functionality, and I am not yet sharp enough in js to separate this correctly (have tried in many ways, but I can not get a "hit" :) ). So if you could give me a little guidance on how to do that I would be very happy .
0
Chris StanyonWebDevCommented:
Hey Peter,

The point I was making is to remove all the jQuery code so you get a normal GET request taking place. Once you've got that, you can then decide what else needs to be coded and build it back up again.

Currently your code takes the input and then applies it to the Google Map search field and does a search there. It also does something with the seaDragonInp function (whatever that is). Now you're moving away from AJAX, you wouldn't  do that dynamically. You would need to code the Google Map search directly into the code before your page is loaded, using the $_GET variable that was passed in.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Right.

I have now removed all js code regarding search button, enter key and reset button.  The search button is now type submit and the reset button is type reset.

I have made all the changes from POST to GET.

So now I "just" need to get the page working :)

I might add that I am continuosly working on moving all my other pages from POST to GET (not the security parts and stuff like that) and at the same time I put them into my pre-defined templates so that I can avoid the iFrame method I have been using up until now. This work is going well, and I am moving nicely forward with that.
I knew that this particular page that we are looking at here would cause some problems, because there are so many functions in that page and they are tied rather tightly to each-other in the present coding.   I truly hope you can guide me through building the needed functionalities on the page up again (let's get back to the OSD part later - I surely can explain what it does and why it is there).

The code I have removed is this:
    // "Søg" button function
      SogButton.addEventListener('click',function (){
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'GET',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
        input_2.focus();
        google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
        (function (){
          var rows=document.getElementsByTagName('tr');
          var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;              
          if(Amt){
            seaDragonInp(Amt);
          }  
        })();
        cellClick();
      });         

     });

        // Return key search function
        input_2.addEventListener('keyup',function(e){
          input_1.value=this.value;  
          if(e.keyCode===13 && scopeVar!=='GOOGLE'){            
           $.ajax({
             url: radioBtn(),
             data: {query:input_1.value},
             method:'GET',
             dataType: 'html'
           }).done(function (res){
            $('#list_items > table').remove();
            $('#list_items').html(res);
            $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
            (function (){
              var rows=document.getElementsByTagName('tr');
              var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;              
              if(Amt){
                seaDragonInp(Amt);
              }  
            })();
            cellClick();
          });
         }
       });



        //"Nulstil" button
        NustilButton.addEventListener('click',function (){
         $('#list_items > table').remove();
         console.log(map);
         map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
         map.setZoom(8);
         input.value=1;
         viewer.goToPage(0);

       });

Open in new window

0
Chris StanyonWebDevCommented:
OK Peter. You may need to clarify what behaviour you want adding back in. I have no idea what your seaDragonInp method does, so can't help with that without knowing more.

As for the other code, it looks like it allows you to type a value into the google map and then load up the results from the database and vice-versa.

Because you're now building your results on the server, rather than in the browser, your Google map functionality may well change. For example, when you submit the form, you have the search criteria in the $_GET['input_1'] variable. I'm guessing that you will want to take this value, do a search against the Google API and then add a marker to the map at the first found location. Is that a correct understanding ??
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Yes - but first we need to handle another little thing :)

I have these three radio buttons:
    <form style="color:#9F5584; padding-bottom:7px;"> 

      <input type="radio" id="broad" style="position:relative; margin-left: 0px; background-color: #eee;" checked="checked" name="radio1" value="bredt" /> Søg bredt 
      <input type="radio" id="exact" style="position: relative;" name="radio1" value="eksakt"/> Søg eksakt Sogn
      <input type="radio" id="exacts" style="position: relative;" name="radio1" value="eksakts"/> Søg eksakt Stednavn

    </form> 

Open in new window


These three radio's should perform separate searches 1= broad, 2= parish alone, 3= place alone.
For now I have set up the main code like this:
   <div id="list_items" class='list'></div>


 <?php

       error_reporting(E_ALL);
       ini_set('display_errors', 1);
    if ((isset($_GET['query'])) && (trim($_GET['query'])!="")) :
         require_once('stednavne_data_connection.php');
       endif;
      ?> 

      <?php include_once('ajaxListHtml.php'); ?>

   <div class="w3-row" style="width:100%;">         
    <br> 
    <hr style= "margin-left: 10px; width: 95%;  border-color: #9F5584;">   
  </div> 

Open in new window


Which means that it is only doing a search corresponding to the first radio button ( I have two more ajaxListHtml... files that represent the searches for the other two radio's).

So what I need here is to set up three variables corresponding with the radio buttons son that I can use an if/elseif/else condition to choose the right search here.

But I don't know how to set up a php variable referring to a set of radio buttons that all have the same name tag.
0
Chris StanyonWebDevCommented:
No worries Peter,

Not sure if you search a different page based on the radio button or whether your single script does a different search based on the radio button, but take a look at these 2 bits of code and see if it makes sense:

<script type="text/javascript">
$(document).ready(function() {
    $('input[type=radio][name=url]').change(function() {
        $('#search').attr('action', $(this).val());
    });
});
</script>

Open in new window

<?php $script =  basename($_SERVER['PHP_SELF']); ?>

<form action="<?php echo $script ?>" method="get" id="search">
    <input type="radio" name="url" value="data1.php" <?php echo $script == "data1.php" ? "checked" : "" ?>>
    <input type="radio" name="url" value="data2.php" <?php echo $script == "data2.php" ? "checked" : "" ?>>
    <input type="radio" name="url" value="data3.php" <?php echo $script == "data3.php" ? "checked" : "" ?>>

    <input type="text" name="query">
    <input type="submit" value="Search">
</form>

Open in new window

Basically, the jQuery part changes the 'action'' of the form when you change the radio buttons. When you submit the form, it will then submit to 1 of 3 URLs, depending on the radio button. When that page loads, it will also set the correct radio button as check - so if you set the 2nd radio button, it will set the action to data2.php. The form will then be submitted to data2.php and when the page loads, the data2.php radio button will automatically be selected.

Hope that's what you mean :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Not quite, but we sure are on the way :)

I have worked your code in like this, but there is surely something I am not doing right, because it is not returning anything :)

  <script type="text/javascript">
    $(document).ready(function() {
        $('input[type=radio][name=url]').change(function() {
            $('#search').attr('action', $(this).val());
        });
      });
  </script>

    </form> 
       <?php $script =  basename($_SERVER['PHP_SELF']); ?>
    <form style="color:#9F5584; padding-bottom:7px;"> 
    <form action="<?php echo $script ?>" method="get" id="search">
      <input type="radio" id="broad" style="position:relative; margin-left: 0px; background-color: #eee;" checked="checked" name="url" value="ajaxListHtml.php" <?php echo $script == "ajaxListHtml.php" ? "checked" : "" ?>/> Søg bredt 

      <input type="radio" id="exact" style="position: relative;" name="name="url"" value="ajaxListHtml2.php" <?php echo $script == "ajaxListHtml2.php.php" ? "checked" : "" ?>/> Søg eksakt Sogn

      <input type="radio" id="exacts" style="position: relative;" name="name="url"" value="ajaxListHtml3.php" <?php echo $script == "ajaxListHtml3.php" ? "checked" : "" ?>/> Søg eksakt Stednavn
    
      <input type="text" name="query">
      <input type="submit" value="Search">      

    </form> 

Open in new window


And why did you put these two in the radio button form?
    <input type="text" name="query">
    <input type="submit" value="Search">

Open in new window

0
Chris StanyonWebDevCommented:
Not sure what you mean by not returning anything.

Anyway, you have a few errors in your HTML. At the start, you have a closing form tag followed by an opening form tag. Not sure why but it's wrong.

On your first radio, you have a checked="checked" attribute that is not needed. The PHP ternary operator is used to decide whether or not to check the radio.

On your other 2 radio options you have this:

name="name="url""

which is clearly wrong.

On the second radio, you are checking for a file called ajaxListHtml2.php.php, which is not correct.

I added the search and submit button into the form because I couldn't see why you were having 2 separate forms - one for the radios and one for the search - doesn't really make sense to do that. If you split the 2 forms, then the radio options will never be submitted along with the search form.

What your form should look like is this:

<form action="<?php echo $script ?>" method="get" id="search">
      <input type="radio" name="url" value="ajaxListHtml.php" <?php echo $script == "ajaxListHtml.php" ? "checked" : "" ?>> Søg bredt 
      <input type="radio" name="url" value="ajaxListHtml2.php" <?php echo $script == "ajaxListHtml2.php" ? "checked" : "" ?>> Søg eksakt Sogn
      <input type="radio" name="url" value="ajaxListHtml3.php" <?php echo $script == "ajaxListHtml3.php" ? "checked" : "" ?>> Søg eksakt Stednavn
    
      <input type="text" name="query">
      <input type="submit" value="Search">      
</form>

Open in new window

All this code assumes that you 3 search are done on 3 seperate and complete HTML pages - ajaxListHtml.php, ajaxListHtml2.php and ajaxListHtml3.php. Whenever you visit one of those pages, the correct radio will be ticked and the form will submit back to itself unless you select a different radio button
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
OK. I tried to work your suggestions into my present form, and I was not precise enough :) Sorry.

Now I have deleted my own radio button form and search form  code, pasted in your code precisely as it is, and no matter if I use the search button or the enter key, i get no result.

Try it out here: http://kroweb.dk/gfdev/stednavne_raw2/index2.php

  <script type="text/javascript">
    $(document).ready(function() {
        $('input[type=radio][name=url]').change(function() {
            $('#search').attr('action', $(this).val());
        });
      });
  </script>


    <?php $script =  basename($_SERVER['PHP_SELF']); ?>
    <form action="<?php echo $script ?>" method="get" id="search">
      <input type="radio" name="url" value="ajaxListHtml.php" <?php echo $script == "ajaxListHtml.php" ? "checked" : "" ?>> Søg bredt 
      <input type="radio" name="url" value="ajaxListHtml2.php" <?php echo $script == "ajaxListHtml2.php" ? "checked" : "" ?>> Søg eksakt Sogn
      <input type="radio" name="url" value="ajaxListHtml3.php" <?php echo $script == "ajaxListHtml3.php" ? "checked" : "" ?>> Søg eksakt Stednavn
    
      <input type="text" name="query">
      <input type="submit" value="Search">      
</form> 

Open in new window

0
Chris StanyonWebDevCommented:
OK Peter,

It looks like you've got 2 forms in your page - each with an id of #search, so the jQuery can't bind to the radio buttons properly. An ID has to be unique so remove (or rename) the hidden form.

Also, I tried to load up your ajaxListHtml.php page but nothing shows, so I'm guessing you have something wrong with those pages. Not sure where the index2.php fits into all of this as all the search functionality and HTML display should all now be in one of your 3 other PHP files. index2.php seems redundant!
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Right.

There is not two forms on the page with the same ID anymore.

But I think I'll abandon the thought of changing this particular page to GET. It  a little seems to complicated after all :)

I have a well working page here: https://genealogiskforum.dk/arkivalier/stednavne/ and I think for this particular page we should keep it at that.

Thanks a lot for your help anyway.
0
Chris StanyonWebDevCommented:
No worries Peter,

Your form is working fine now, but the ajax PHP pages still seem to do nothing.

If you're happy with what you've got, then it makes sense to stick with it.

Generally, the key to all this is to plan you application out in detail before you start coding so you can see how all the moving parts work together. I think the problem here tends to stem from the fact that this page has several moving parts and you're trying to work them altogether, rather than as individual components. It's always going to be a problem when you try and do all things at the same time.

Good luck with it :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Well - I hate to be a quitter :) :)

So now I have got the page working - partly. YES!!

Take a look for your self here: http://kroweb.dk/gfdev/stednavne_raw2/index.php

I made tha pages index.php, index2.php, and index3.php to correspond the three radio buttons.

Problem now is, that when I have chose e.g the second radio button from the index.php, the page index2.php is used and dosplayed. Then when I want to change back to the first radio button (broad search) it still is choosing index2.php per default.

What to do?
0
Chris StanyonWebDevCommented:
Hey Peter,

On index2.php and index3.php you have invalid HTML (you have some on index.php as well - but not as serious). Things will never work as you expect if you keep generating invalid HTML!! You also still have 2 forms with an ID of 'search', but the jQuery is looking for search2.

This is the code you have:

<form style="color:#9F5584; padding-bottom:7px;"> 
    <form action="index2.php" method="get" id="search" form title="Skriv evt. bare en del af det sted du søger, eller brug % som jokertegn når du søger bredt. Hvis du søger eksakt skal du skrive det eksakte navn på det du søger" style="padding-top:10px; padding-bottom:10px;">

      <input type="radio" name="url" value="index.php" > Søg bredt 
      <input type="radio" name="url" value="index2.php" checked> Søg eksakt Sogn
      <input type="radio" name="url" value="index3.php" > Søg eksakt Stednavn<br>
    
      <input type="text" name="query" placeholder= "Søg" style="width: 300px; height: 35px; border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 13px; padding-left:10px;" >
      
      <input type="submit" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:15px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);"value="Søg">  

      <input type="submit" id="nulstil" style="margin-left:15px; height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>    
</form> 

Open in new window

You have 2 opening <form> tags. The first has none of the required form attribute (method / action etc) and this is the one your jQuery will use, so it fails. In the second form tag, you have an attribute called "form title". There is no such attribute so remove it completely. In the Submit button you have an attribute called "submit title" - again there is no such attribute. It should just be title. You should also have spaces between the attribute/value pairs. You have no space after the style and before the value.

Your Nutsil button is still set as a Submit button and not a Reset button.

One other observation. Putting CSS inline is considered bad practice, particularly when you just end up repeating the styles. Why not move all that CSS to the CSS Stylesheet and keep your HMTL clean:

#search2 input[type=submit], #search2 input[type=reset] {
margin-left:15px;
padding-right:10px;
height:30px;
font-family:arial; 
font-size: 12px; 
text-align:left; 
background-color:#cccccc; 
border: 2px solid #grey;
border-radius:2px; 
color:black; 
background-color:#cccccc; 
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Open in new window

Sort out all those issues and you form should work as expected :)
0
Chris StanyonWebDevCommented:
Just looking at your pages and they all look to be exactly the same, so I can't really figure out why you're using 3 different pages. If you explain what's different between the 3 then maybe we can simplify this a lot, and just have one page.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Sorry about the two opening form tags. Entirely my stupid fault :)

About the form title and submit title tags I disagree with you. There are such tags and the show a guidance text when hovering the element, and it works nicely :)

About the Nulstil button, when I change that to a reset type it does nothing at all. But when setting it to at submit type it actually fires an empty query which resets the page.

About the CSS I know that repeating inline CSS is not good practice, and my plan was/is to clean that up when everything else is working - anyway I have done it now regarding the buttons :)  

And the reason that I have three pages is because of the nature of your php coding which I read as it is expecting a separate file for each radio button. If we can make that more simple (as it was before) that would be very nice.

About the Nulstil button I would like it to trigger that the radio button 1 is checked. Same thing when updating/resetting the page. Is that possible in this setup?
0
Chris StanyonWebDevCommented:
Hey Peter,

All good. Regarding the title attributes, Look at your code:

<input type="submit" submit title="Klik her, .....

That's wrong! You have 'submit title'. It should just be 'title':

<input type="submit" title="Klik her, .....

If you run your code through an HTML validator, or check the source for Red code, you'll immediately see the errors.

Regarding the Nutsil button. That makes sense, but you will still need a way for your server-side script to distinguish between a proper submit and a reset. Currently, your reset button acts exactly the same as the submit button. If you type something into the search box and hit Nutsil, it will still do a search. Likewise, if you don't type anything in, then both buttons will perform an empty query. At the very least, you need to give each on them a name attribute:

<input type="submit" name="sog" value="Sog">
<input type="submit" name="nutsil" value="nutsil">

This will allow you to see which button was clicked at the server end - isset($_GET['sog']) / isset($_GET['nutsil']).

In order to use just one page, we need to know exactly what the differences are between the 3 current pages. If you can explain what's different, I can show you how to wrap it up in one page.

As for setting the radio 1 option checked when you click the Nutsil button, that will be easy once you've named your buttons. I'll post up some code shortly to show you an idea of what I think we need to do.
0
Chris StanyonWebDevCommented:
Hey Peter,

Have a look at this. This is the general idea of where we're heading with this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <title>Chris Stanyon // EE - 29078204</title>
    </head>
    <body>

        <form method="get" id="search">
            <?php $searchType = isset($_GET['searchType']) && !isset($_GET['reset']) ? $_GET['searchType'] : "type1"; // Get the searchType or set a default ?> 
            <input type="radio" name="searchType" value="type1" <?php echo $searchType == "type1" ? "checked": "" ?>>
            <input type="radio" name="searchType" value="type2" <?php echo $searchType == "type2" ? "checked": "" ?>>
            <input type="radio" name="searchType" value="type3" <?php echo $searchType == "type3" ? "checked": "" ?>>

            <input type="text" name="query">
            <input type="submit" name="search" value="Search">
            <input type="submit" name="reset" value="Reset">
        </form>

        <div id="searchResults">

            <?php
             // Has a search been done
            if (isset($_GET['search']) && isset($_GET['searchType'])):

                // What type of search was done
                switch ($_GET['searchType']):

                    case 'type1':
                        include_once('type1Search.php');
                        break;

                    case 'type2':
                        include_once('type2Search.php');
                        break;

                    case 'type3':
                        include_once('type3Search.php');
                        break;

                endswitch;

            endif;
            ?>

        </div>

    </body>
</html>

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks. I have named the buttons (as they were before too :) ) and I have changed the "xx title" to just "title".

There should be no red ines now :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks a lot. I will try it out at once. The form's id is search2 and the naming of elements is also a little different so I'll change these things.

I'll get back here shortly :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
This works :)
I now have this code - and only one main file as I would like it to be :)
   <?php $script =  basename($_SERVER['PHP_SELF']); ?>

    
        <form method="get" id="search2">
        <?php $searchType = isset($_GET['searchType']) && !isset($_GET['reset']) ? $_GET['searchType'] : "type1"; // Get the searchType or set a default ?> 
       
        <input type="radio" name="searchType" value="type1"  <?php echo $searchType == "type1" ? "checked" : "" ?>> Søg bredt 

        <input type="radio" name="searchType" value="type2"  <?php echo $searchType == "type2" ? "checked" : "" ?>> Søg eksakt Sogn

        <input type="radio" name="searchType" value="type3"  <?php echo $searchType == "type3" ? "checked" : "" ?>> Søg eksakt Stednavn <br><br>


    
      <input type="text" name="query" placeholder= "Søg" title="Skriv evt. bare en del af det sted du søger, eller brug % som jokertegn når du søger bredt. Hvis du søger eksakt skal du skrive det eksakte navn på det du søger" style="width: 300px; height: 35px; border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 13px; padding-left:10px;" >
      
      <input type="submit" name="sog" title="Klik her, eller tast Enter, for at aktivere søgningen." value="Søg">  

      <input type="submit" name="nulstil" id="nulstil" title=" Start forfra" value="Nulstil"/>    
</form>  



   <div id="list_items" class='list'></div>


        <div id="searchResults">

            <?php
             // Has a search been done
            if (isset($_GET['query']) && isset($_GET['searchType'])):

                // What type of search was done
                switch ($_GET['searchType']):

                    case 'type1':
                        include_once('ajaxListHtml.php');
                        break;

                    case 'type2':
                        include_once('ajaxListHtml2.php');
                        break;

                    case 'type3':
                        include_once('ajaxListHtml3.php');
                        break;

                endswitch;

            endif;
            ?>

        </div>

Open in new window


Now - for this part of the page - we just need to get the Nulstil button and page refresh to choose Type 1.
0
Chris StanyonWebDevCommented:
Looking good Peter :)

When clicking the Nutsil button, we already have the functionality in place:

$searchType = isset($_GET['searchType']) && !isset($_GET['reset']) ? $_GET['searchType'] : "type1";

It set's the SearchType to "type1" if $_GET['reset'] is set (the button with a name of 'reset' was clicked). You just need to rename that to match your own button name - nutsil:

$searchType = isset($_GET['searchType']) && !isset($_GET['nutsil']) ? $_GET['searchType'] : "type1";

You should also check for a reset before the switch statement, because you don't want to run a search if the reset button has been clicked. If you look at my code - line 27, you will see it checks if the search button has been clicked - isset($_GET['search'], but in your code, line 31, it doesn't check the button, so even if you click Nutsil, it will still include one of the 3 files. Your line 31 should probably look like this:

if (isset($_GET['query']) && isset($_GET['searchType']) && isset($_GET['sog'])):

Now a file will only be included if we have a query, a search type and the Sog button was clicked.

Not sure what you mean about the Page Refresh!
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Yeahh - that works nicely.

With Page Refresh I mean the update button at the top of the browser. This one is at the moment more a "nice to have" than it is a "need to have".

Right! Next things we need to look into is about the maps.

First of all I would like to explain the "Vis kort" icon (the red Google map like icon to the far right in the table) in the table. Try e.g. to search for "Blistrup" and click the icon somewhere down the table.

This icon is firing the content of the first and fourth column in the table of the row where the icon is clicked.

The Google map will obviously show whatever is in there that matches this search and the lower map (the OSD map)  - which is a zoomable parish/county map, will show the county that the click represents.  This is working partly, and the code involved is this:

 //numbers in the OSD map
   var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,Roskilde:42,Frederiksborg:44,København:46,Bornholm:48,

Open in new window

and this
      // find and show in both maps the place/county selected in the list
      function cellClick(){    
        var rows=document.getElementsByTagName('tr');
        if(rows.length>0){
         for(var i=1;i<rows.length;i++){           
           rows[i].cells[4].addEventListener('click',function(){        
             var Stednavn=this.parentNode.cells[0].innerHTML;
             var Sogn=this.parentNode.cells[1].innerHTML;
             var Amt=this.parentNode.cells[3].innerHTML;
             /*input_1.value=Stednavn+' '+Sogn+' '+Amt;
             input_2.value=Stednavn+''+Sogn+' '+Amt;*/
             input_1.value=Stednavn+' '+Amt;
             input_2.value=Stednavn+' '+Amt;
             input_2.focus();               
             google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
             seaDragonInp(Amt);
           });           
         } 
       }
     }
     cellClick();

Open in new window


In this setup I would like to get the Sogn (column 2) into the search string too (it has been int here before as you can see in the code), but after I have changed the second column (Sogn) to be a link it is apparently using the URL specifics in the search string in stead of the plain text.
Can we fix that first :)
0
Chris StanyonWebDevCommented:
Hey Peter,

Easier if you just use jQuery to bind the event and get the data. Instead of the cellClick function, look at this instead:

$(document).ready(function() {
    $('#searchResults').on('click', 'tr td:nth-child(5)', function(e) {
         var parentRow = $(this).parent('tr');
         var Stednavn = $('td:nth-child(1)', parentRow).text();
         var Sogn = $('td:nth-child(2)', parentRow).text();
         var Amt = $('td:nth-child(4)', parentRow).text();
         $('#g_map').val(Stednavn + ' ' + Sogn + ' ' + Amt);
    });
});

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
This does not fire in the Google map. It changes the input in the Google Map search field but it does not fire.
With the addition below it fires in the OSD map (lower map)

    $(document).ready(function() {
    $('#searchResults').on('click', 'tr td:nth-child(5)', function(e) {
         var parentRow = $(this).parent('tr');
         var Stednavn = $('td:nth-child(1)', parentRow).text();
         var Sogn = $('td:nth-child(2)', parentRow).text();
         var Amt = $('td:nth-child(4)', parentRow).text();
         $('#g_map').val(Stednavn + ' ' + Sogn + ' ' + Amt);
         google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
             seaDragonInp(Amt);
    });
});

Open in new window

0
Chris StanyonWebDevCommented:
Hey Peter,

Looks like you're missing the input_2.focus() call before triggering the event. Alternatively, you can do it as part of the value setter:

$('#g_map').val(Stednavn + ' ' + Sogn + ' ' + Amt).focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
seaDragonInp(Amt);
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Super - that works. Beautiful :)

Next thing is to get the Google map to fire on the searchstring in the main searchfield.

I have this code, and it puts the input in both fields, but it does not fire in the Google map.

    input_1.addEventListener('keyup',function(){  
       input_2.focus();
       input_2.value=this.value;
       input_1.focus();

     }); 

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
I should add that this also should trigger that the right county is selected and displayed in the lower map.

The best way to see an example of this is to click the button "Amtskort" and click a selection (county) on the little map in the modal. This triggers a search in the Google map and it selects and displays the selected county in the lower map.
0
Chris StanyonWebDevCommented:
OK. For the Google map, I'm guessing that you no longer want to trigger the search on keyup. I'm guessing that the Google Search should be triggered when you submit the Search form. This means that you've got to perform a Google Search based on the $_GET['query'] value. Take a look at this:

var request = {
    location: map.getCenter(),
    radius: '500',
    query: '<?php echo $_GET['query'] ?>'
};

var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);

Open in new window

And the callback function is this:

function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            place: {
                placeId: results[0].place_id,
                location: results[0].geometry.location
            }
        });
    }
}

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
You are absolutely right. I want to trigger the map search through the search form.

I have put in your code, but nothing new seems to happen. It is searching the db and displaying results as expected, but there is no search performed  on the maps.

I paste in all the code for the Google map as it looks right now, knowing that some of it is referring to the modal which is working all right (the button "Fra-Til afstand" which is a little Google Map function that gives the user an opportunity to measure the walking distance between two points - very useful for genealogists :)  )

I can't figure out if something needs to be removed or changed in here.

  <script>
        //Variable to be used in the scripts
      var input_1 = document.getElementById('input_1'); //main searchfield
      var input_2 = document.getElementById('g_map'); //Google Maps searchfield
      var viewer; //OSD viewer
      var scopeVar; //places in Google Maps
      var map,map_2; //main Google Map, modal Google map
      var directionsDisplay; //directions services
      var map; //main Google map

   //numbers in the OSD map
   var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,Roskilde:42,Frederiksborg:44,København:46,Bornholm:48,
   };
     //go to the chosen OSD map         
     function seaDragonInp(arg){
       if(arg in columnAmt){
         viewer.goToPage(columnAmt[arg]-1);
         input.value=columnAmt[arg];
       }
     } 
   //activates directions services             
   function initAutocomplete() {
    var directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer; 

    //main Google map
    map = new google.maps.Map(document.getElementById('map'), {      
      center: {lat: 55.3290605, lng: 10.23529080000003},
      zoom: 8,
      mapTypeId: 'hybrid'
    });
    
    //modal Google map for distance
    map_2 = new google.maps.Map(document.getElementById('map_2'), {      
      center: {lat: 55.95013481519651, lng: 10.38069125000004},
      zoom: 8,
      mapTypeId: 'roadmap'
    });
    
       // Create the search box and link it to the UI element.
       var input = document.getElementById('g_map');
       var searchBox = new google.maps.places.SearchBox(input);
       map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
       
        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {            
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {           
          var places = searchBox.getPlaces();
          scopeVar=places[0].scope;          
          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });

          //Calculates distance and time between two points
          directionsDisplay.setMap(map_2);
          var onChangeHandler = function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);
          };
          document.getElementById('start').addEventListener('keyup',function (e){

            if(e.keyCode == 13){onChangeHandler();e.preventDefault();}
          });
          document.getElementById('end').addEventListener('keyup',function (e){

            if(e.keyCode == 13){onChangeHandler();e.preventDefault();}
          });
        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
          directionsService.route({
            origin: document.getElementById('start').value,
            destination: document.getElementById('end').value,
            travelMode: 'WALKING',      
          }, function(response, status) {
            if (status === 'OK') {
              console.log(response);
              directionsDisplay.setDirections(response);
              $('#distance').val(response.routes["0"].legs["0"].distance.text).show();
              $('#duration').val(response.routes["0"].legs["0"].duration.text).show();
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        }

        //Google modal close button, clears direction settings
        $('#close_button').on('click',function(){
          directionsDisplay.set('directions', null);
          $('#distance,#duration').val('').hide();
          $('#start,#end').val('');
        });


        
        $(document).ready(function(){ 
        $("#input_1").focus(); 
      });



    input_1.addEventListener('keyup',function(){  
       input_2.focus();
       input_2.value=this.value;
       input_1.focus();

     });

    //triggers the search in the Google map
      var request = {
      location: map.getCenter(),
      radius: '500',
      query: '<?php echo $_GET['query'] ?>'
      };

      var service = new google.maps.places.PlacesService(map);
      service.textSearch(request, callback);

      function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            place: {
                placeId: results[0].place_id,
                location: results[0].geometry.location

            }
        });
    }
}



      // find and show in both maps the place/county selected in the list
      $(document).ready(function() {
      $('#searchResults').on('click', 'tr td:nth-child(5)', function(e) {
         var parentRow = $(this).parent('tr');
         var Stednavn = $('td:nth-child(1)', parentRow).text();
         var Sogn = $('td:nth-child(2)', parentRow).text();
         var Amt = $('td:nth-child(4)', parentRow).text();
         $('#g_map').val(Stednavn + ' ' + Sogn + ' ' + Amt).focus();
         google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
             seaDragonInp(Amt);
        
    });
});

    //close and reset modal Google map
    $(document).ready(function(){

      $('#myModal').on('shown.bs.modal',function(){   

        google.maps.event.trigger(map_2, "resize");
      });

    });  
    </script>

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
One little addition.

I have just noticed that when adding your last code the icon does not work anymore ...

So I've just removed it again for now :) :)
0
Chris StanyonWebDevCommented:
Hey Peter,

Just having a look through your Javascrip code now and trying to make sense of it. I think it's going to be easier if we refactor it to give it some structure as it's a little all over the place at the moment.

When you say the Icon doesn't work anymore, what exactly do you mean. I can't check it out as you've removed the offending code, so I'll need to see it 'not working' to offer any advice.

I'll post up some code shortly.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
OK. It is the Google maps like icons that is not working.

I added the code again :)
0
Chris StanyonWebDevCommented:
OK. Because of the nature of your javascript, certain things are being fired in the wrong order, which is breaking a lot of your code. When writing code like this it's important to make sure that all relevant elements are loaded before you try to access them - this is the reason we often use the document ready block. That only gets fired once everything is ready. I think in your code, you are attempting to get the map before it's ready and that seems to be breaking the code that follows it, including the IconClick code.

As I said, it needs a lot of refactoring and structuring to make sure all the moving parts work together. As we did with the PHP, we need to modularise the moving parts so we can then easily code and debug any issues. This will mean breaking it down before building it back up again. Currently all of you Javascript is scattered around your page in a very random order. That's not good, and makes it's nearly impossible to debug any problems. What we need to do is remove most of the javascript from your HTML page, and put it in it's own files. For example, anything to do with SeaDragon, put in a seaDragon.js file. Anything to do with the map, put in a maps.js file. Anything to do with your online users, put in a users.js file. Then you just link to those two files and it's easier to work with.

To start with, we need to remove all the mapping info, so create a file called map.js with the following code:

var map;
var map2;
var directionsDisplay;

function initMap() {

    // Setup some local variables
    var input = $('#g_map').get(0);
    var searchBox = new google.maps.places.SearchBox(input);
    var markers = [];

    // Initialise the Map
    map = new google.maps.Map(document.getElementById('map'), {      
        center: {lat: 55.3290605, lng: 10.23529080000003},
        zoom: 8,
        mapTypeId: 'hybrid'
    });

    // Add the Searchbox to the Map
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

     // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {            
        searchBox.setBounds(map.getBounds());
    });

    // Listen for places changing
    searchBox.addListener('places_changed', function() {           
        var places = searchBox.getPlaces();
        
        if (places.length == 0) {
            console.log("Couldn't find any places");
            return;
        }

        // Clear out the old markers.
        markers.forEach(function(marker) {
            marker.setMap(null);
        });

        markers = [];

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();

        places.forEach(function(place) {
            if (!place.geometry) {
                console.log("Returned place contains no geometry");
                return;
            }

            var icon = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
                map: map,
                icon: icon,
                title: place.name,
                position: place.geometry.location
            }));

            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });

        map.fitBounds(bounds);
    });

}

function initMap2() {

    // Setup some local variables
    var directionsService = new google.maps.DirectionsService;

    //Initialise the Map for distance
    map2 = new google.maps.Map(document.getElementById('map2'), {      
        center: {lat: 55.95013481519651, lng: 10.38069125000004},
        zoom: 8,
        mapTypeId: 'roadmap'
    });

    //Calculates distance and time between two points
    directionsDisplay = new google.maps.DirectionsRenderer; 
    directionsDisplay.setMap(map_2);

    $('#start, #end').keyup(function(e) {
        if (e.which == 13) {
            directionsService.route({
                origin: $('#start').val(),
                destination: $('#end').val(),
                travelMode: 'WALKING',      
            }, function(response, status) {
                if (status === 'OK') {
                    console.log(response);
                    directionsDisplay.setDirections(response);
                    $('#distance').val(response.routes["0"].legs["0"].distance.text).show();
                    $('#duration').val(response.routes["0"].legs["0"].duration.text).show();
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
                e.preventDefault();
            });
        }
    });

}

function initialSearch(location) {

    if (location == null) {
        console.log("No initial search data");
        return;
    }

    // Setup some local variables
    var service = new google.maps.places.PlacesService(map);

    //triggers the search in the Google map
    var request = {
        location: map.getCenter(),
        radius: '500',
        query: location
    };

    // Do the Search
    service.textSearch(request, callback);

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                place: {
                    placeId: results[0].place_id,
                    location: results[0].geometry.location
                }
            });
        }
    }

}

Open in new window

Once you've done that, just include it in the head of your page:

<script src="map.js"></script>

And then call the relevant function in the document ready block:

<script type="text/javascript">
    $(document).ready(function() {
        // Setup the maps
        initMap();
        initialSearch('<?php echo isset($_GET['query']) ? $_GET['query'] : "" ?>');
    });
</script>

Open in new window

Once you've got that in place, load up your page and you should see the map. If you passed in a query string, then you should see that already pinned on the map. Get that working and then I'll show you how and where to add in the rest of the code.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,  
I am going to work on that at once :)

Will be back shortly
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Sorry it took so long.

We have a new legislation about personal data comming up here in DK, and that has a potential large impact on genealogy and genealogists. So I have to deal with that too :)

Well - I have performed the exercices you propose, and the Google map is working nicely and it responds to the main searchfield now.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
One moment - I have not removed the scripts form the main file. Hold the line :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
I have now removed everything I can remove from the main file and still keep the map working.

I have deleted them one at a time and tested so that I could see what had an effect and what had no effect. One thing is not working though. That is the modal2 which is triggered thtough the "Amtskort" button. It should appear in a little modal (has done) and a click on a selecetion on the modal map should close the modal and return the clicked Amt in both "big" maps

This is what's left of js in the main file:
var input = document.getElementById('my-page-input'); //number/search field in lower map

   //numbers in the OSD map
   var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,Roskilde:42,Frederiksborg:44,København:46,Bornholm:48,
   };

       //go to the chosen OSD map         
     function seaDragonInp(arg){
       if(arg in columnAmt){
         viewer.goToPage(columnAmt[arg]-1);
         input.value=columnAmt[arg];
       }
     }
 
   //activates directions services             
   function initAutocomplete() {
    var directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer; 

    
    //modal Google map for distance
    map_2 = new google.maps.Map(document.getElementById('map_2'), {      
      center: {lat: 55.95013481519651, lng: 10.38069125000004},
      zoom: 8,
      mapTypeId: 'roadmap'
    });
    
        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {           
          var places = searchBox.getPlaces();
          scopeVar=places[0].scope;          
          if (places.length == 0) {
            return;
          }


          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });

          //Calculates distance and time between two points
          directionsDisplay.setMap(map_2);
          var onChangeHandler = function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);
          };
          document.getElementById('start').addEventListener('keyup',function (e){

            if(e.keyCode == 13){onChangeHandler();e.preventDefault();}
          });
          document.getElementById('end').addEventListener('keyup',function (e){

            if(e.keyCode == 13){onChangeHandler();e.preventDefault();}
          });
        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
          directionsService.route({
            origin: document.getElementById('start').value,
            destination: document.getElementById('end').value,
            travelMode: 'WALKING',      
          }, function(response, status) {
            if (status === 'OK') {
              console.log(response);
              directionsDisplay.setDirections(response);
              $('#distance').val(response.routes["0"].legs["0"].distance.text).show();
              $('#duration').val(response.routes["0"].legs["0"].duration.text).show();
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        }

        //Google modal close button, clears direction settings
        $('#close_button').on('click',function(){
          directionsDisplay.set('directions', null);
          $('#distance,#duration').val('').hide();
          $('#start,#end').val('');
        });


        
        $(document).ready(function(){ 
        $("#input_1").focus(); 
      });


    input_1.addEventListener('keyup',function(){  
       input_2.focus();
       input_2.value=this.value;
       input_1.focus()

     });

 
      // find and show in both maps the place/county selected in the list
     $(document).ready(function() {
    $('#searchResults').on('click', 'tr td:nth-child(5)', function(e) {
         var parentRow = $(this).parent('tr');
         var Stednavn = $('td:nth-child(1)', parentRow).text();
         var Sogn = $('td:nth-child(2)', parentRow).text();
         var Amt = $('td:nth-child(4)', parentRow).text();
         $('#g_map').val(Stednavn + ' ' + Sogn + ' ' + Amt).focus();
         google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
             seaDragonInp(Amt);
        
    });
});



    //close and reset modal Google map
    $(document).ready(function(){

      $('#myModal').on('shown.bs.modal',function(){   

        google.maps.event.trigger(map_2, "resize");
      });

    });  

Open in new window

0
Chris StanyonWebDevCommented:
OK Peter. You still seem to have most of the mapping code in your main files. This is now duplicated in the map.js file so will likely cause you problems. Most of that code should be removed from the main file. All the SeaDragon code is still in there as well, so that needs removing to an external file and including in the <head>

If you look at your page, in the <head>, you'll see that you have 4 document ready blocks!! You only need one, and it will look something like this:

<script type="text/javascript">
    $(document).ready(function() {

        // Setup the maps
        initMap();
        initMap2();
        initialSearch('<?php echo isset($_GET['query']) ? $_GET['query'] : "" ?>');

        // Setup the Datatables
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});

        // Setup the Icon clicker
        $('#searchResults').on('click', 'tr td:nth-child(5)', function(e) {
             var Stednavn = $('td:nth-child(1)', $(this).parent('tr')).text();
             var Sogn = $('td:nth-child(2)', $(this).parent('tr')).text();
             var Amt = $('td:nth-child(4)', $(this).parent('tr')).text();
             $('#g_map').val(Stednavn + ' ' + Sogn + ' ' + Amt).focus();
             google.maps.event.trigger($('#g_map').get(0), 'keydown', { keyCode: 13 });
             seaDragonInp(Amt);
        });

        //Google modal close button, clears direction settings
        $('#close_button').on('click',function(){
            directionsDisplay.set('directions', null);
            $('#distance,#duration').val('').hide();
            $('#start,#end').val('');
        });

        // Resize the map when the modal is shown
        $('#myModal').on('shown.bs.modal',function(){   
            google.maps.event.trigger(map2, "resize");
        });

        $("#input_1").focus();
    });
</script>

Open in new window

There should be no need to have any other javascript in your page. It either goes in an external file, or in the main doc.ready block. What we're aiming for is all the map code in a map file, all the seaDragon code in a seaDragon file etc., and one document ready block to fire the various page specific functions when the page is loaded.

You will also need to remove the callback option from the google maps script as we're now manually calling it:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtYQi0i92CeKiXu4oqY8XTT_qliZbWQ5g&libraries=places"></script>

Once it's cleaned up we can work on the outstanding issues which should be a lot easier to sort out once we have some solid structure to your pages
0
Chris StanyonWebDevCommented:
This is what your seaDragon.js file should look like:

var viewer;

OpenSeadragon.setString('Tooltips.Home', 'Standard Zoom');
OpenSeadragon.setString('Tooltips.FullPage', 'Se fuldskærm');


$(document).ready(function() {

    initSeaDragon();

    /*  Sikrer at vi kan bruge Enter tast til at søge efter en bestemt side  */
    $('#my-page-input').keypress(function(e) {
        if (e.which === 13) {
            viewer.goToPage(parseInt($('#my-page-input').val(), 10) - 1);
        }
    });

    /*  Kigger efter at opdatere sidetallet i sidenummerboksen */
    viewer.addHandler("page", function (data) {
        $('#my-page-input').val( data.page + 1 );
    });

    // Page forward button
    $('#oneplus').click(function(e) {
        viewer.goToPage(Math.min(viewer.tileSources.length - 1, viewer.currentPage() + 1));
    });

    // Page back button
    $('#oneminus').click(function(e) {
        viewer.goToPage(Math.max(0, viewer.currentPage() - 1));
    });

});

// Go to the chosen OSD map         
function seaDragonInp(arg) {
    var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,Roskilde:42,Frederiksborg:44,København:46,Bornholm:48 };

    if(arg in columnAmt){
        viewer.goToPage(columnAmt[arg]-1);
    }
}

function initSeaDragon()
{
    viewer = OpenSeadragon({
        id: "openseadragon1",
        prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/",
        navigatorId:   "navigatorDiv",
        sequenceMode: true,
        preserveViewport: true,
        referenceStripScroll: 'horizontal',
        defaultZoomLevel: 1,
        visibilityRatio: 1,
        constrainDuringPan: true,
        showZoomControl: false,
        showHomeControl: true, 
        showSequenceControl: false,
        showFullpageControl: true,
        tileSources: [
        {
            type: "zoomifytileservice",
            width: 7000, // change width and height according your image size
            height: 7000,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Hele landet/"
        },
        {
            type: "zoomifytileservice",
            width: 2800, // change width and height according your image size
            height: 2800,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Hjørring/"
        },
        {
            type: "zoomifytileservice",
            width: 2800, // change width and height according your image size
            height: 2800,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Hjørring, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Aalborg/"
        },
        {
            type: "zoomifytileservice",
            width: 2800, // change width and height according your image size
            height: 2800,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Aalborg, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Thisted/"
        },
        {
            type: "zoomifytileservice",
            width: 2800, // change width and height according your image size
            height: 2800,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Thisted, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Viborg/"
        },
        {
            type: "zoomifytileservice",
            width: 2800, // change width and height according your image size
            height: 2800,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Viborg, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Ringkøbing/"
        },
        {
            type: "zoomifytileservice",
            width: 2800, // change width and height according your image size
            height: 2800,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Ringkøbing, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Randers/"
        },
        {
            type: "zoomifytileservice",
            width: 2800, // change width and height according your image size
            height: 2800,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Randers, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Århus/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Århus, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Skanderborg/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Skanderborg, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Vejle/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Vejle, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Ribe/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Ribe, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Haderslev/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Haderslev, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Aabenraa/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Aabenraa, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Sønderborg/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Sønderborg, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Tønder/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Tønder, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Odense/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Odense, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Svendborg/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Svendborg, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Maribo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Maribo, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Præstø/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Præstø, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Sorø/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Sorø, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Holbæk/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Holbæk, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Roskilde/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Roskilde, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Frederiksborg/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Frederiksborg, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/København/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/København, solo/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Bornholm/"
        },
        {
            type: "zoomifytileservice",
            width: 3400, // change width and height according your image size
            height: 3400,
            tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Bornholm/"
        }]
    });
}

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Wow - I will go to work on that.

Will probably not get back before sometime to morrow :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
So - I have now taken off the "rubber gloves" since I believe that I am now done with the main cleaning job :)

I have removed practically all js from the main files, and I now have 4 js files that I call separately.

As I see it right now the following is not working:
Search is not fired in the Google map
Google map like icons does not work
Lower map is not responding to search or icons either
Lower map overlays the footer elements
Both modals is not working
0
Chris StanyonWebDevCommented:
OK. Let's try and sort these issues out. Firstly, do you have a back up of the previous page (before you removed all the code). I need to take a look at that so I can see which bits are different from what we now have. There are still a few functions to add back into the JS.

In you map.js file, we have this:

map2 = new google.maps.Map(document.getElementById('map2'), {

It is trying to get the ElemenById of map2. In your HTML it actually has an ID of map_2, so change the HTML ID to map2:

<div id="map2" style="width:650px; height:450px;"></div>

You still have a lot of JS in your file regarding your online users. Shoudn't effect the current issues, but there nearly 400 lines of that code that should really be in it's own file. You're also referring to a script and stylesheet called blab and sarissa but they're all returning 404 file not found errors, so that needs fixing.

The way you've fone form.js and modal.js won't work so we'll look at that next, but get the other issues resolved first and we can come back to that.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,

I'll go to work on that.

Here is the code from before we started changing anything
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>

<!DOCTYPE html>
<html lang="da">
<head>
  <!-- Check for title--> 
  <title>Stednavne</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
  <link rel="stylesheet" type="text/css" href="style_stednavne.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>


    <script>
    $(document).ready(function() {
        $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
    });
    </script>
  
  <script>
  $(document).ready(function(){
    $(".message").fadeOut(8000);
    $(".message2").fadeOut(8000);
    $(".success").fadeOut(8000);
    $(".error").fadeOut(8000);
  });
  </script>

</head>

<body>
  <!-- Modal Google Maps - distance-->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content" style="width: 702px;">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"></button>
          <h4 class="modal-title">Fra Til afstand</h4>
        </div>
        <div class="modal-body">
          <div id="map_2" style="width:650px; height:450px;"></div>          
        </div>
        <div class="modal-footer">    
          <input type="text" id="start" placeholder="Start sted" style="width:155px; float: left;">
          <input type="text" id="end"   placeholder="Slut sted" style="width:155px; float: left;" >
          <input type="text" id="distance" placeholder="Distance" style="width:100px; float: left; display:none;">
          <input type="text" id="duration"   placeholder="Varighed" style="width:140px; float: left; display:none;" >
          <img class="icon icons8-Walking" width="28" height="28" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADHUlEQVRoQ9WZj61NQRCHf68CVIAKUAEqQAWoABWgAlSAClABKkAFqAAVkC85m2zG7O7s2TnJu5PcvPfy9p473+xv/uzeMx1vdyU9knRr+6hPkp5L4ueynS0/of+A15IeNJYA8Wz1848EIPLvBg7eXt2JIwGQyM0BwOdKWrs240iAv0GPlnxYevPAwZMHiEjogyRyZbcduQMnn8RElTL59FTLaPGbBgZIqUhUHv4+iUa2W9vRNx6ZA1EfltZlA1zc5p7Hkvi9tt+Snkh6s+SxeXMWQM9xC3HpPAFEHa99vifpfRbE3h3Y43jxebl51fB7ABiPXzganwkqMiInlm0W4IqkLw3n/2zSuB/wimR+GVg3XDIL8NEZf3EcZ3hdl8SakX2VdGO0KPL/GQBKI9Kp7dXWVYsceqOD9QcAQJYsCuBJxzuMRCbQ4jDwBGXJogBWOsgGufwwn/6rk9w4zOG+GLtGSV2aiSIAnnS8JGSXvnfCSeUB+IJZAwDd+e2erYgA2Ki2zrGUV24hPPspCUASvd6Fei1w5BB9IlxiIwA8rEStJR0cIYqtElqaFw2QLtw77E/NTBEAIkvkeDARag1jyIcoe2bvgDgjIM07HdlcdXLsv+URgKg0e4f41v0PwATF27lzBTAaHZAWO8ILuYZLbOYOkISXG9uVNjrY52cC9G4hyB86r+0bUXk212UBIIGS5K1bCKoPjSvVsgCoUiQjEL1+kHqYIRJZAFQgBjOqTQ8CCSGlcKMabVcGADMRZwQsAkEfeThyLPr/DAArmQgEACm3ExkA3nxTNyEvJ5BQyu1EBgDyQUbFvGHPg0jZhVWAWv8FoOWYHfYYo0n6JVsBoPYT/XqAY1q1N3LFQQ82NO/0CFcA+ALPfjkxkgUJfq1yKDzztCD2AninNE5Ura9Uy+fbXFhO5j0AnhS+bdctowaFvOyxcrRr3RyZBcABDvh11UH3HFCiVySpyTwL4H3zPhvB1GSeAfBqeUT3ngTSknkGwN5ORHXvAaQl8wxAfeKa1b2FsMnc6x9pSUzNJwFHtxPRzsrzmKPKeXjXcPcPf6iyMR1dGTwAAAAASUVORK5CYII=">
          <button type="button" id="close_button" class="btn btn-default" data-dismiss="modal">Luk</button>
        </div>
      </div>  
    </div>
  </div> 

  <!-- Modal -->  


  <!-- Page content start-->        
  <div class="w3-row">

 
    <!-- Main page start -->  

    <div class="w3-row">

      <!-- Column1 start-->         
      <div class="w3-col w3-mobile" style="width:50%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; margin-right: 8px; padding-bottom: 10px;">

        <!-- Form that holds the Sogn to the lonk clicked and the Amt to limit the search, DON't DELETE --> 
      <form id="search" style="display:none" target="_blank" method="get" action="sognefakta_ByLand2.php">
          <input type="text" name="sogn" id="sogn">
          <input type="text" name="amt" id="amt">
      </form>

        <!-- Valgknapper til bred/eksakt søgning -->

        <form style="color:#9F5584; padding-bottom:7px;"> 

          <input type="radio" id="broad" style="position:relative; margin-left: 0px; background-color: #eee;" checked="checked" name="radio1" value="bredt" /> Søg bredt 
          <input type="radio" id="exact" style="position: relative;" name="radio1" value="eksakt"/> Søg eksakt Sogn
         <input type="radio" id="exacts" style="position: relative;" name="radio1" value="eksakts"/> Søg eksakt Stednavn

        </form> 


        <!-- Søge felt til steder -->
        <form action="index.php"  id="search" form title="Skriv evt. bare en del af det sted du søger, eller brug % som jokertegn når du søger bredt. Hvis du søger eksakt skal du skrive det eksakte navn på det du søger" style="padding-top:10px; padding-bottom:10px;" method="GET" >

         <input type="search" id="input_1" placeholder= "Søg" style="width: 300px; height: 35px; border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 13px; padding-left:10px;" name="query"  value=""/>

         <input type="button" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:15px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>


         <input type="submit" id="nulstil" style="margin-left:15px; height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>
       </form>  
       

       <div id="list_items" class='list'></div>


       <div class="w3-row" style="width:100%;">         
        <br> 
        <hr style= "margin-left: 10px; width: 95%;  border-color: #9F5584;">   
      </div>    

      <!-- Add record of placename - DB update form-->
      <div class="w3-container w3-mobile" style="width:75%; margin-top: 15px; margin-left: 0px; background-color:#f6f6f6; border: solid 1px #cccccc; padding-left: 10px; padding-bottom: 10px; padding-right: 10px;">

        <form id="myForm" style=" padding-top: 12px; padding-bottom: 0px;" action="insert_sted.php" method="get">

          <h5> Tilføj stednavn</h5>
          <div class="w3-container">
           <div class="w3-center" style="font-size:11px; font-family:arial;"> Stednavn, Sogn og Amt skal udfyldes</div>
         </div>
         <hr style= "margin-left: 15px; width: 90%;  border-color: #9F5584;">    

         <?php if (isset($_SESSION['response'])): ?>
         <?php
         $response = json_decode($_SESSION['response']);
         unset($_SESSION['response']);
         ?>

         <div class="message <?php echo $response->success ? "success" : "error" ?>">
          <?php echo $response->message; ?>
        </div>
      <?php endif ?>


      <input type="hidden" name= "id" value= "">
      <input type="date" name= "Dato" value= "<?php echo date("Y-m-d");?>" hidden>

      <input type="text" placeholder="Stednavn" name="stednavn" id="Stednavn" value="" style="color: #9F5584; font-weight: bold;" required>

      <input type="text" placeholder= "Sogn" name= "sogn" id=" Sogn" value= "" style= "color: #9F5584; font-weight: bold;" required>

      <input type="text" placeholder= "Herred" name= "herred" id="Herred" value="" style="color: #9F5584; font-weight: bold;">

      <input type="text" placeholder= "Amt" name= "amt" id="Amt" value="" style="color: #9F5584; font-weight: bold;" required>

      <input type="text" placeholder= "Kort" name= "kort" id="Kort" value=" &#xf041; ️" style="color: #9F5584; font-weight: bold; width: 20%; text-align:center;" hidden>

      <input type="submit" style= "margin-top: 10px; font-family: arial; font-size: 12px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:#cccccc;" value="Tilføj">
    </form>
  </div>
</div>


<!-- Column1, end-->



<!-- Column2 start--> 
<div class="w3-col w3-mobile w3-hide-small" style="width:45%; height: 400px; margin-top:20px; margin-right: 0px;">

  <!-- Button to open County Modal-->
  <button type="button" class="button" style="height: 25px; font-family: arial; color: white; font-size: 12px; font-weight: normal;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:#405a96;" data-toggle="modal" data-target="#myModal">
    Fra-Til afstand
  </button>

<!-- Google Map -->
  <input id="g_map" class="controls" type="search" placeholder="" style=" margin-top: 5px; margin-left: 200px; height:31px; width:175px; background-color:rgba(223,230,230,0.4); color: rgba(159,85,132,28.8); border: none; border-radius: 5px; font-weight: ligther; font-size: 11.5px; padding-left:10px;" value="" >               

  <div id="map" style="width:100%; height:100%; margin-left: 0px; margin-top:0px; padding-top:0px; border: 2px solid #cccccc;"></div>

  <script>
        //Variable to be used in the scripts
      var input_1 = document.getElementById('input_1'); //main searchfield
      var input_2 = document.getElementById('g_map'); //Google Maps searchfield
      var SogButton=document.getElementById('Sog'); //"Søg" buttin
      var NustilButton=document.getElementById('nulstil');  //"Nulstil" button 
      var input = document.getElementById('my-page-input'); //number/search field in lower map
      var viewer; //OSD viewer
      var scopeVar; //places in Google Maps
      var map,map_2; //main Google Map, modal Google map
      var directionsDisplay; //directions services
      var map; //main Google map

   //numbers in the OSD map
   var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,         Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,             Roskilde:42,Frederiksborg:44,København:46,Bornholm:48,
   };
     //go to the chosen OSD map         
     function seaDragonInp(arg){
       if(arg in columnAmt){
         viewer.goToPage(columnAmt[arg]-1);
         input.value=columnAmt[arg];
       }
     } 
   //activates directions services             
   function initAutocomplete() {
    var directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer; 

    //main Google map
    map = new google.maps.Map(document.getElementById('map'), {      
      center: {lat: 55.3290605, lng: 10.23529080000003},
      zoom: 8,
      mapTypeId: 'hybrid'
    });
    
    //modal Google map for distance
    map_2 = new google.maps.Map(document.getElementById('map_2'), {      
      center: {lat: 55.95013481519651, lng: 10.38069125000004},
      zoom: 8,
      mapTypeId: 'roadmap'
    });
    
       // Create the search box and link it to the UI element.
       var input = document.getElementById('g_map');
       var searchBox = new google.maps.places.SearchBox(input);
       map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
       
        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {            
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {           
          var places = searchBox.getPlaces();
          scopeVar=places[0].scope;          
          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });

          //Calculates distance and time between two points
          directionsDisplay.setMap(map_2);
          var onChangeHandler = function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);
          };
          document.getElementById('start').addEventListener('keyup',function (e){

            if(e.keyCode == 13){onChangeHandler();e.preventDefault();}
          });
          document.getElementById('end').addEventListener('keyup',function (e){

            if(e.keyCode == 13){onChangeHandler();e.preventDefault();}
          });
        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
          directionsService.route({
            origin: document.getElementById('start').value,
            destination: document.getElementById('end').value,
            travelMode: 'WALKING',      
          }, function(response, status) {
            if (status === 'OK') {
              console.log(response);
              directionsDisplay.setDirections(response);
              $('#distance').val(response.routes["0"].legs["0"].distance.text).show();
              $('#duration').val(response.routes["0"].legs["0"].duration.text).show();
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        }

        //Google modal close button, clears direction settings
        $('#close_button').on('click',function(){
          directionsDisplay.set('directions', null);
          $('#distance,#duration').val('').hide();
          $('#start,#end').val('');
        });


        function radioBtn(){
         var linkPhp;
         if($("#broad").is(":checked")) {
           linkPhp='ajaxListHtml.php';        
           return linkPhp;
         }else if($("#exact").is(":checked")){
           linkPhp='ajaxListHtml2.php';         
           return linkPhp;  
         }else{        
          linkPhp='ajaxListHtml3.php';         
          return linkPhp;  }
        }    


 
      // "Søg" button function
      SogButton.addEventListener('click',function (){
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'GET',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
        input_2.focus();
        google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
        (function (){
          var rows=document.getElementsByTagName('tr');
          var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;              
          if(Amt){
            seaDragonInp(Amt);
          }  
        })();
        cellClick();
      });         

     });


      input_1.addEventListener('keyup',function(){  
       input_2.focus();
       input_2.value=this.value;

     });


        // Return key search function
        input_2.addEventListener('keyup',function(e){
          input_1.value=this.value;  
          if(e.keyCode===13 && scopeVar!=='GOOGLE'){            
           $.ajax({
             url: radioBtn(),
             data: {query:input_1.value},
             method:'GET',
             dataType: 'html'
           }).done(function (res){
            $('#list_items > table').remove();
            $('#list_items').html(res);
            $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
            (function (){
              var rows=document.getElementsByTagName('tr');
              var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;              
              if(Amt){
                seaDragonInp(Amt);
              }  
            })();
            cellClick();
          });
         }
       });


        //"Nulstil" button
        NustilButton.addEventListener('click',function (){
         $('#list_items > table').remove();
         console.log(map);
         map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
         map.setZoom(8);
         input.value=1;
         viewer.goToPage(0);

       });


      // find and show in both maps the place/county selected in the list
      function cellClick(){    
        var rows=document.getElementsByTagName('tr');
        if(rows.length>0){
         for(var i=1;i<rows.length;i++){           
           rows[i].cells[4].addEventListener('click',function(){        
             var Stednavn=this.parentNode.cells[0].innerHTML;
             var Sogn=this.parentNode.cells[1].innerHTML;
             var Amt=this.parentNode.cells[3].innerHTML;
             input_1.value=Stednavn+' '+Sogn+' '+Amt;
             input_2.value=Stednavn+' '+Sogn+' '+Amt;
             input_2.focus();               
             google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
             seaDragonInp(Amt);
           });           
         } 
       }
     }
     cellClick();

     </script>


     <script>
    //close and reset modal Google map
    $(document).ready(function(){

      $('#myModal').on('shown.bs.modal',function(){   

        google.maps.event.trigger(map_2, "resize");
      });

    });  
    </script>


    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtYQi0i92CeKiXu4oqY8XTT_qliZbWQ5g&libraries=places&callback=initAutocomplete"
    async defer></script>




   <hr style= "margin-left: 10px; width: 95%;  border-color: #9F5584;"> 


    <div class="w3-row">
      <!-- OSD start -->

      <!-- Navigator for pages -->
      <style> 
      .flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;   
        width: site-width;
        height: 60px;
        background-color: #666666;
        margin-bottom:20px
        border-bottom: 1px solid #f6f6f6;
        margin-top: 0px;

        justify-content: center; 

      }
      .flex-item {
        background-color: #666666;

        height: 45px;

        color: #f6f6f6;
        margin-top: 13px;

      }



      </style>


      <!-- Lower map / Amts-map -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">




      <div class= "flex-container">



        <!-- Button to open Modal2-->
        <div class="flex-item" >

          <button type="button" class="button" style=" margin-top:5px; margin-right: 230px; height: 25px; color:#666666; font-family: arial; font-size: 12px; font-weight: normal;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:#cccccc;" data-toggle="modal" data-target="#myModal2">
            Amtskort
          </button>
          <!-- Button to open Modal2-->
        </div>

        <!-- The Modal2 -->
        <div id="myModal2" class="modal">
         <!-- Modal content -->
         <div class="modal-content" style="position: absolute; margin-top: 300px; margin-left: 300px; width: 400px; height: 400px; background: rgba(255, 255, 255, 0.2);">

          <div class="modal-body"> 
            <button type="button" style="border: 1px solid #666666;" id="close_button" class="btn btn-default" data-dismiss="modal">Luk</button>               
            

            <?php include('amter.php');?>  

          </div>
        </div>


      </div>
      <!-- Modal2 end -->


      <!-- My own buttons before -->
      <!-- -1 page -->
      <div class="flex-item">

        <input type= "button" button title= "1 side tilbage" style= "width: 40px; margin-right: 30px; text-align: center; color: #f6f6f6; background-color: #666666; border: none;  margin-left: 20px; font-family: FontAwesome; font-size: 26px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); " id= "oneminus" onclick= "minusOne()" value= "&#xf0a8;️">
      </div>



      <script>
      function minusOne() {
    document.getElementById("oneminus").innerHTML = viewer.goToPage(Math.max(0, viewer.currentPage() - 1)); // 1 pages before;
  }
  </script>


  <!-- Input field for page search -->
  <div class="flex-item">
    <input type="text" style= "margin-top:5px; width: 75px; text-align:center; color: #666666; background-color:#f6f6f6; border: 1px solid black; margin-left:0px; font-family: roboto; font-size: 14px; font-weight: bold;" id="my-page-input" value= "1">
  </div> 


  <!-- My own buttons after -->
  <!-- +1 page -->
  <div class="flex-item">
    <input type="button" button title= "1 side frem" style="width: 40px; margin-right:3px; text-align:center; color: #f6f6f6; background-color:#666666; margin-left:25px; border:none; font-family: FontAwesome; font-size: 26px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" id="oneplus" onclick="plusOne()" value= "&#xf0a9;">
  </div> 

  <script>
  function plusOne() {
    document.getElementById("oneplus").innerHTML = viewer.goToPage(Math.min(viewer.tileSources.length - 1, viewer.currentPage() + 1)); // 1 pages after;
  }
  </script>




</div>



<div id="openseadragon1" style= "width: site-width; height:700px; border: 0px solid #666666;background-color:white; cursor:zoom-in; margin-top: 0px;">
</div>



<!-- OSD start -->
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/openseadragon.min.js">
</script>


<script type="text/javascript">
OpenSeadragon.setString('Tooltips.Home', 'Standard Zoom');
OpenSeadragon.setString('Tooltips.FullPage', 'Se fuldskærm');
var viewer = OpenSeadragon({

  id: "openseadragon1",

  prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/",

        navigatorId:   "navigatorDiv",

        sequenceMode: true,
        preserveViewport: true,
        referenceStripScroll: 'horizontal',
        defaultZoomLevel: 1,
        visibilityRatio: 1,
        constrainDuringPan: true,
        showZoomControl: false,
        showHomeControl: true, 
        showSequenceControl: false,
        showFullpageControl: true,
        


        tileSources: [
        {
          type: "zoomifytileservice",
        width: 7000, // change width and height according your image size
        height: 7000,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Hele landet/"


      },{
        type: "zoomifytileservice",
        width: 2800, // change width and height according your image size
        height: 2800,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Hjørring/"


      },
      {
        type: "zoomifytileservice",
        width: 2800, // change width and height according your image size
        height: 2800,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Hjørring, solo/"


      },
      {
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Aalborg/"


      },{
        type: "zoomifytileservice",
        width: 2800, // change width and height according your image size
        height: 2800,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Aalborg, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Thisted/"


      },{
        type: "zoomifytileservice",
        width: 2800, // change width and height according your image size
        height: 2800,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Thisted, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Viborg/"


      },{
        type: "zoomifytileservice",
        width: 2800, // change width and height according your image size
        height: 2800,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Viborg, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Ringkøbing/"


      },{
        type: "zoomifytileservice",
        width: 2800, // change width and height according your image size
        height: 2800,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Ringkøbing, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Randers/"


      },{
        type: "zoomifytileservice",
        width: 2800, // change width and height according your image size
        height: 2800,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Randers, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Århus/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Århus, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Skanderborg/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Skanderborg, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Vejle/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Vejle, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Ribe/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Ribe, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Haderslev/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Haderslev, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Aabenraa/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Aabenraa, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Sønderborg/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Sønderborg, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Tønder/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Tønder, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Odense/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Odense, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Svendborg/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Svendborg, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Maribo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Maribo, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Præstø/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Præstø, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Sorø/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Sorø, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Holbæk/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Holbæk, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Roskilde/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Roskilde, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Frederiksborg/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Frederiksborg, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/København/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/København, solo/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Bornholm/"


      },{
        type: "zoomifytileservice",
        width: 3400, // change width and height according your image size
        height: 3400,
        tilesUrl: "https://genealogiskforum.dk/Zoomify_images/Bornholm/"


      }  
      ]

    });


 /*  Sikrer at vi kan bruge Enter tast til at søge efter en bestemt side  */
var input = document.getElementById('my-page-input');
input.addEventListener('keypress', function(event) {
        if (event.which === 13) { // Return key
          viewer.goToPage(parseInt(input.value, 10)-1);
        }
      });


 /*  Kigger efter at opdatere sidetallet i sidenummerboksen */
viewer.addHandler("page", function (data) {
  input.value = ( data.page + 1 );
});

</script>

<hr style= "margin-left: 10px; width: 95%;  border-color: #9F5584;"> 

</div>
</div>
<!-- Column2 end--> 

   <!-- Binds the click of the Sogn link to the form -->  
<script>
$('#list_items').on('click', '#tdata tr > td:nth-child(2) a', function(e) {
    e.preventDefault();
    $('#sogn').val( $(this).parents('tr').find('td:eq(1)').text() ); 
    $('#amt').val( $(this).parents('tr').find('td:eq(3)').text() );
    $('#search').attr( $(this).attr('href') );
    $('#search').trigger('submit');
});

</script>



</div>


<!-- Main page end--> 
    <!-- Binds the click of the Sogn link to the form -->  


</div>  
<!-- Page content end-->  

</html>

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
OK.

There is in fact only a few lines of JS code for the user handling, but it generates a lot of HTML :)
<script type="text/javascript">
  var blabfolderpath="../slpw/plugin_blab/"
  </script>
   <script type="text/javascript" src="../slpw/plugin_blab/sarissa.js"></script>
  <script type="text/javascript" src="../slpw/plugin_blab/blab.js"></script>
  <script type="text/javascript">
  var memberprofilepage=1
  </script>

Open in new window

I would like to move that to a blab.js file, but I can'te get it working right.

The other things you mention are fixed now,
0
Chris StanyonWebDevCommented:
OK Peter. For the time being it makes sense to remove the blab stuff. It;s just getting in the way at the moment. I know I've mentioned this before, but I'll stress it again - when building application like this, it's a lot easier if you build it up part by part, rather than trying to get everything working at once. That way you know what is working and what isn't, so remove all the blab code and we can look to add it back in later on.

I've noticed a slight typo in my code from earlier that needs fixing. On line 96 of your map.js file we have this:

directionsDisplay.setMap(map_2);

It should refer to map2 (no underscore)

We need to remove all the errors from the console before we can move on. Keep an eye on your console when you load your page (as a developer you should have this open all the time when coding and debugging). Fix that issue and the maps should work. We can then move on to the next phase
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Right. The blab! function is important, so we need to add it later :) I have removed it for now.

I have made the corrections you suggest - and I see no errors in the console at this moment.
0
Chris StanyonWebDevCommented:
OK. That now seems to have fixed a few of the issues. Your links in the table are working. The map icon in the table is working, although not every click will find a pointer on the map. That's nothing to do with the script. It's simple because when you try searching for certain strings, nothing is found, so there's no map pin to display. For example, if I type Blistrup in to the Search box, I then get a table with all the results. Clicking on the first map pin tries to search the Google Map for 'Bakkebjerg Blistrup Frederiksborg', but there are no results from Google. You can see this by checking the console - you'll see the message saying 'Couldn't find any places'. Clicking on the pin updates the SeaDragon viewer, so that's all working OK.

When you load up your page with a querystring, the correct place is shown on the map, so that's good.

Your modal boxes are showing up when you click on the buttons. The directions modal is working as it should, although your CSS means that you can't actually see what your typing in. You have white text on a white background. Look at the color property of the .modal class in your template_style.css file - it's set to a near-white. You also have some strange styling going on with your modals, but we can address that once all the functionality is working

That just leaves the mini county map functionality to add in. Remove the modal2.js file altogether and add the following to the end of the main document ready block in your page:

// Hook up the minimap
$('#myModal2 path')
    .hover(
        function() {
            $('#rectText').css('fill', '#cc9900');
            $('#myText').text($(this).attr('id'));
        },
        function() {
            $('#rectText').css('fill', 'none');
            $('#myText').text('');
        }
    )
    .click(
        function() {
            $('#g_map').val($(this).attr('id')).focus();
            google.maps.event.trigger($('#g_map').get(0), 'keydown', { keyCode: 13 });
            seaDragonInp($(this).attr('id'));
            $('#myModal2').modal('hide');
        }
    );

Open in new window

That wires up all the functionality for the mini map.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
I'll look into the all CSS afterwords - there are a few things to be sorted out there :)

I have made the changes you suggest, but it makes no difference to the mini-map. It is still not working.
0
Chris StanyonWebDevCommented:
Hey Peter,

You added the code for the minimap outside of the document ready block - It needs to be inside it to work properly:

$(document).ready(function() {

    // Setup the maps
    initMap();
    initMap2();
    initialSearch('blistrup');

    // Setup the Datatables
    $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});

    // Setup the Icon clicker
    $('#searchResults').on('click', 'tr td:nth-child(5)', function(e) {
         var Stednavn = $('td:nth-child(1)', $(this).parent('tr')).text();
         var Sogn = $('td:nth-child(2)', $(this).parent('tr')).text();
         var Amt = $('td:nth-child(4)', $(this).parent('tr')).text();
         $('#g_map').val(Stednavn + ' ' + Sogn + ' ' + Amt).focus();
         google.maps.event.trigger($('#g_map').get(0), 'keydown', { keyCode: 13 });
         seaDragonInp(Amt);
    });

    //Google modal close button, clears direction settings
    $('#close_button').on('click',function(){
        directionsDisplay.set('directions', null);
        $('#distance,#duration').val('').hide();
        $('#start,#end').val('');
    });

    // Resize the map when the modal is shown
    $('#myModal').on('shown.bs.modal',function(){   
        google.maps.event.trigger(map2, "resize");
    });

    $("#input_1").focus();

    // Hook up the minimap
    $('#myModal2 path')
        .hover(
            function() {
                $('#rectText').css('fill', '#cc9900');
                $('#myText').text($(this).attr('id'));
            },
            function() {
                $('#rec tText').css('fill', 'none');
                $('#myText').text('');
            }
        )
        .click(
            function() {
                $('#g_map').val($(this).attr('id')).focus();
                google.maps.event.trigger($('#g_map').get(0), 'keydown', { keyCode: 13 });
                seaDragonInp($(this).attr('id'));
                $('#myModal2').modal('hide');
            }
        );
});

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
I actually did add it inside, but I think I missed a set of brackets or something like that.

I am working on the CSS now, and there might be issues I would like to discuss there too :)
So I will wait a little while before I close the question.

Anyway thanks a lot for your patience with me making this work. I believe that we are very close to the final goal now :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Hi again,

I have one problem that I need a little help to fix.

If you go into the page and reset it, you will see that the lower map overlays the footer elements. I can't figure out why that is. I have had this problem once before, and there It was the classes flex-container and flex-item that was present in more that one css file. I got that sorted out, but now after we have reorganised it all, it is doing this again, and I can't figure out why it does that.
0
Chris StanyonWebDevCommented:
Hey Peter,

Not sure really as I use bootstrap over the w3 CSS. Much easier to use :)

It looks to me like you don't have a well defined structure to your layout. You have 3 rows (wrapped inside another row). One contains the header, one contains the navigation and one contains everything else. This seems a little odd to me. I would set it up so that you have more rows:

Row 1 - Header
Row 2 - Navigation
Row 3 - Content (tables / maps etc)
Row 4 - Adverts / Bottom Bar
Row 5 - Footer

That would then give you very clearly vertical separation between the different parts of your site.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
I am working with it. It seems not to make any difference to make more rows ...

I'll be back :)
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Hi Chris,

A few problems still needs to be solved :)


1. Google map is not starting at the coordinates: 55.3290605, 10.23529080000003 (center of the country) but it actually shows Birkerød (a city in the northern part of the eastern part of the country) with a Google Maps marker on it, which is not what it should do.
2. Google map is not reacting on search through the main search field no matter if the Søg button or Enter key is used. It is showing Birkerød no matter what.
3. When performing af search from the main search field, the lower map does not show the county represented in the first row in the results. It does actually not do anything :)
4. Reset button resets the Google Map to Birkerød and not to 55.3290605, 10.23529080000003
0
Chris StanyonWebDevCommented:
Hey Peter,

Issue 1, 2 and 4 all seem to stem from the initialSearch function in your javascript file. It looks like you've hard-coded Blistrup into the code, so no matter what you search (or load the page up without an entry) it will always only ever show that. The offending line in the JS file should look like this:

initialSearch('<?php echo isset($_GET['query']) ? $_GET['query'] : "" ?>');

That will dynamically pass a variable into the initialSearch function.

As for issue 3, we haven't coded for that. Can you explain what should happen. We obviously need to call the seaDragonInp() function with a variable, but where should that variable come from.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Yes :) I believe that it was you who had hardcoded Blistrup in, but I had not seen it :) That fixes the three issues :)

The fourth issue has been working before through the Search button and the Enter Key functionality.

I paste in the "old" code for those two here:

      // "Søg" button function
      SogButton.addEventListener('click',function (){
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'POST',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
        input_2.focus();
        google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
        (function (){
          var rows=document.getElementsByTagName('tr');
          var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;              
          if(Amt){
            seaDragonInp(Amt);
          }  
        })();
        cellClick();
      });         

[code]        // Return key search function
        input_2.addEventListener('keyup',function(e){
          input_1.value=this.value;  
          if(e.keyCode===13 && scopeVar!=='GOOGLE'){            
           $.ajax({
             url: radioBtn(),
             data: {query:input_1.value},
             method:'POST',
             dataType: 'html'
           }).done(function (res){
            $('#list_items > table').remove();
            $('#list_items').html(res);
            $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
            (function (){
              var rows=document.getElementsByTagName('tr');
              var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;              
              if(Amt){
                seaDragonInp(Amt);
              }  
            })();
            cellClick();
          });
         }
       });

Open in new window


     });[/code]
0
Chris StanyonWebDevCommented:
OK Peter,

We just need to add the following at the end of the document ready block (inside the Document Ready block!)

// Display the correct seaDragon image
seaDragonInp( $('#tdata tr:nth-child(1) td:nth-child(4)').text() );

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Perfect. Thanks again. Now everything is working with the right functionality.

Now I will work on trying to get my footer to work - that is the only issue missing now :)

I'll leave this question open for a while - just in case :) :)
0
Chris StanyonWebDevCommented:
Good news Peter.

Hopefully, you're starting to see the benfits of 'structure' - not just in your PHP files, but also in your Javascript files (and CSS etc).
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Hi again,

Well- now my main file looks like this - reduced from a huge number of lines to just 171 lines. Structure, structure, structure. I've got the message :) :)

But I am still struggling with my footer entities. I simply can not figure out why they are placing them selves in the middle of the screen when the screen is reset. I have no markers in the console, I have no red lines in the HTML - I believe the structure is in place so I honestly don't have a clue what to do about it.

If you have any ideas I have very big ears regarding this : )

Look at the result here: http://kroweb.dk/gfdev/stednavne_raw3/

<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
//<!-- Check for user access requirements--> 
$groupswithaccess="PUBLIC";
require_once("../slpw/sitelokpw.php");
?>

<!DOCTYPE html>
<html lang="da">
<head>
  <!-- Check for title--> 
  <title>Stednavne</title>

  <meta charset="utf-8">


  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" type="text/css" href="../templates/template_style.css">
  <link rel="stylesheet" type="text/css" href="style_stednavne.css" />


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtYQi0i92CeKiXu4oqY8XTT_qliZbWQ5g&libraries=places"></script>
  <script src="https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/openseadragon.min.js"></script>
  <script src="map.js"></script>
  <script src="seaDragon.js"></script>
  <script src="form.js"></script>
  <script type="text/javascript">
  var blabfolderpath="../slpw/plugin_blab/"
  </script>
   <script type="text/javascript" src="../slpw/plugin_blab/sarissa.js"></script>
  <script type="text/javascript" src="../slpw/plugin_blab/blab.js"></script>
  <script type="text/javascript">
  var memberprofilepage=1
  </script>
  <?php
  if (function_exists('startwhoisonline'))
    startwhoisonline('profileimage,name');
  ?>

  <link rel="stylesheet" type="text/css" href="../slpw/plugin_blab/blab.css">



  <script type="text/javascript">
  $(document).ready(function() {

    // Setup the maps
    initMap();
    initMap2();
    initialSearch('<?php echo isset($_GET['query']) ? $_GET['query'] : "" ?>');;

    // Display the correct seaDragon image
    seaDragonInp( $('#tdata tr:nth-child(1) td:nth-child(4)').text() );

    // Setup the Datatables
    $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});

    // Setup the Icon clicker
    $('#searchResults').on('click', 'tr td:nth-child(5)', function(e) {
     var Stednavn = $('td:nth-child(1)', $(this).parent('tr')).text();
     var Sogn = $('td:nth-child(2)', $(this).parent('tr')).text();
     var Amt = $('td:nth-child(4)', $(this).parent('tr')).text();
     $('#g_map').val(Stednavn + ' ' + Sogn + ' ' + Amt).focus();
     google.maps.event.trigger($('#g_map').get(0), 'keydown', { keyCode: 13 });
     seaDragonInp(Amt);
   });

    //Google modal close button, clears direction settings
    $('#close_button').on('click',function(){
      directionsDisplay.set('directions', null);
      $('#distance,#duration').val('').hide();
      $('#start,#end').val('');
    });

    // Resize the map when the modal is shown
    $('#myModal').on('shown.bs.modal',function(){   
      google.maps.event.trigger(map2, "resize");
    });

    $("#input_1").focus();

    // Hook up the minimap
    $('#myModal2 path')
    .hover(
      function() {
        $('#rectText').css('fill', '#cc9900');
        $('#myText').text($(this).attr('id'));
      },
      function() {
        $('#rec tText').css('fill', 'none');
        $('#myText').text('');
      }
      )
    .click(
      function() {
        $('#g_map').val($(this).attr('id')).focus();
        google.maps.event.trigger($('#g_map').get(0), 'keydown', { keyCode: 13 });
        seaDragonInp($(this).attr('id'));
        $('#myModal2').modal('hide');
      }
      );
  });
</script>

</head>

<body>
  <!-- Modal Google Maps - distance-->
  <?php include_once('GoogleModal.php'); ?>
  <!-- Modal Google Maps - end -->  


  <!-- Page content start-->        
  <div class="w3-row">

   <!-- Page header start-->  
   <?php include_once('PageHeader.php') ; ?>
   <!-- Page Header end-->


   <!-- Top Menubar start-->
   <?php include('../templates/gf_theme_topmenu-bar.php');?>  
   <!-- Top Menubar end-->


   <!-- Main page start -->  

   <div class="w3-row">

    <!-- Column1 start-->         
    <?php include_once('FormsStednavne.php') ;?>
    <!-- Column1, end-->


    <!-- Column2 start--> 
    <div class="w3-col w3-mobile w3-hide-small" style="width:45%; height: 400px; margin-top:20px; margin-right: 0px;">

      <!-- Google Maps stuff -->
      <?php include_once('GoogleMapsStuff.php') ;?>
      <!-- Google Maps stuff - end -->


      <!-- OSD Stuff start -->
      <?php include_once('OSD_Stuff.php') ;?>
      <!-- OSD Stuff end -->   

    </div>
    <!-- Column2 end--> 
  </div>
  <!-- Main page end--> 

  <?php include_once('../templates/gf_theme_sidemenu_bottom.php'); ?>

  <?php include_once('../templates/gf_theme_footer.php'); ?>


</div>
<!-- Page content - end -->
</body> 
 

</html>

Open in new window

0
Chris StanyonWebDevCommented:
Ah right. I can see what's happening!

In the right column, you have a DIV that contains your Google Map and the SeaDragon viewer. You set that DIV to a static height of 400px. Although the content is larger than that, the actual div itself will only take up the 400px and then be immediately followed by the footer stuff, which is why it overlays the content.

Remove that 400px height. This brings in another problem. Inside that DIV you have the Google Map DIV, and that has it's height set to 100%. A height of 100% only works if you have an explicit height set on the parent, and now that you're removing that, the height:100% won't work (100% of nothing is nothing!), so you will need to give that an explicit height - probably 400px.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSenior Proposal SpecialistAuthor Commented:
You have done it again.

Everything is working perfectly now - including thew footer entities.

Thanks a million times - I am bowing in your honor :) :)
0
Chris StanyonWebDevCommented:
Awesome. Nice one Peter.

Really pleased you've got it all working :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.