1 (edited by namwebs 19-10-2016 07:11:57)

Topic: Custom javascript file is preventing map showing correctly

Hi,

Similar to this previous post (http://forums.nbn.org.uk/viewtopic.php?id=5618) which wasn't resolved, I want to add some custom javascript that runs when certain species are selected.

I found this documentation (http://indicia-docs.readthedocs.io/en/l … ality.html) and I think I am almost there.

My form is node/6616 (page category: data entry forms; page type: enter single record or list of records) and so I have made a file /sites/all/modules/iform/client_helpers/prebuilt_forms/js/node.6616.js with the javascript. It just sets the sensitivity value if the species field is one of several specified values. This works nicely. However, it prevents the map from showing properly. The space for the map is there but no layers show. If I remove the js file, the map works again. Firebug doesn't indicate any particular errors but when I compare the Net JavaScript output when the node.6616.js file does/does not exist I see that some other js files are not called when my node.6616.js file does exist (e.g. GET map.js). So it seems that the node.6616.js file is preventing other js files being called.

In node.6616.js the javascript is called when the window loads. Is this the problem and if so, how/when should it be called?

Thanks in advance for any suggestions, Alice




The js file content is:

window.onload = function () {
   
        /* event listener */
    document.getElementsByName("occurrence:taxa_taxon_list_id:taxon")[0].addEventListener('blur', doBlur);
   
    function doBlur(){
        if ((this.value=="Bitis peringueyi" || this.value=="Python anchietae" || this.value=="Anchieta's Dwarf Python" || this.value=="Bitis schneideri" || this.value=="Namaqua Dwarf Adder")) {
            alert('This species is sensitive. The coordinates will be set to blur to 100km to protect its location.');
            document.getElementById("sensitive-checkbox").checked = true;
            var element = document.getElementById('sensitive-blur');
            element.value = 100000;
            element.disabled=false;
            var element2 = document.getElementById('sensitivity-controls');
            element2.style.opacity = "1";
            }
    }

}

2

Re: Custom javascript file is preventing map showing correctly

Hi Alice,

I suspect what is happening here is that you have taken over the window.onload event without allowing for the fact that other code may have already been attached to it. Because of the way you have written your code, that other code would be bypassed when you introduce your javascript.

There are two ways forward I think.

One way, continuing with your use of pure JavaScript, might be adequately explained by this article, https://thechamplord.wordpress.com/2014 … -properly/

The alternative is to make use of the jQuery javascript library which Indicia and Drupal use extensively. The jquery.ready() function automatically handles the situation where many diverse bits of code all want to be triggered when the document is ready.

While there may be an investment in learning jQuery for you, I have found it well worth while.

Jim Bacon.

3

Re: Custom javascript file is preventing map showing correctly

Here is an example of a bit of jQuery doing a not dissimilar job, taken at random from one of our websites.

jQuery(document).ready(function($) {
  $('#occurrence\\:zero_abundance').change(function() {
    if ($('#occurrence\\:zero_abundance:checked').length>0) {
      $('#non-zero-controls').css('opacity', 0.5).attr('disabled', true);
    } else {
      $('#non-zero-controls').css('opacity', 1).attr('disabled', false);
    }
  });

  $('occurrence:zero_abundance').change();
});

From inspection, this waits till the document is ready and then
  a. attaches a 'change' event handler to the element with id = "occurrence:zero_abundance" (A checkbox I reckon.)
  b. triggers that event to ensure the state of the page is correct whether creating a new record or editing an existing one.

The event handler greys-out and disables an element with id="non-zero-controls" (a container of several controls?) if the zero_abundance is checked and enables them if it is unchecked.

Be aware that, if you use the default version of jQuery that comes with Drupal 7 it is quite elderly (version 1.4 from memory). On the other hand, Indicia code may not be compatible with the very latest versions of jQuery.

Jim Bacon

4

Re: Custom javascript file is preventing map showing correctly

Thank you, Jim.

I stuck with the pure JavaScript option for now and it is working correctly. Maybe one day I will make time to learn jQuery properly!

Alice