Select to view content in your preferred language

Is there a simplified way to write this function?

3336
9
Jump to solution
05-15-2015 09:05 AM
ChrisSergent
Deactivated User

I have these two functions which both work, but I would like to cut it down to one if possible. They populate dropdown lists on two forms. Any thoughts on how to change this to one function?:

// Begin populateSupportSelect
    function populateSupportSelect(x, y) {
        //get the domain value 
        var domain = app.supportLayer.getDomain(x);


        //get the html select by ID
        var select = document.getElementById(y);


        //clear the current options in select
        for (var option in select) {
            select.remove(option);
        }


        var opt = document.createElement('option');
        opt.innerHTML = "";
        select.appendChild(opt);
        //loop through the domain value to fill the drop down
        for (var i = 0; i < domain.codedValues.length; i++) {
            console.log(domain.codedValues.name);
            ; var opt = document.createElement('option');
            opt.innerHTML = domain.codedValues.name;
            opt.value = domain.codedValues.name;
            select.appendChild(opt);
        }


    }
    // End populateSupportSelect
    
    // Begin populateSelect
    function populateSelect(x, y) {
        //get the domain value 
        var domain = app.signLayer.getDomain(x);


        //get the html select by ID
        var select = document.getElementById(y);


        //clear the current options in select
        for (var option in select) {
            select.remove(option);
        }


        var opt = document.createElement('option');
        opt.innerHTML = "";
        select.appendChild(opt);
        //loop through the domain value to fill the drop down
        for (var i = 0; i < domain.codedValues.length; i++) {
            console.log(domain.codedValues.name);
            ; var opt = document.createElement('option');
            opt.innerHTML = domain.codedValues.name;
            opt.value = domain.codedValues.name;
            select.appendChild(opt);
        }


    }
    // End populateSelect

Here is how I populate the dropdown lists:

/* Enter your domain item and then the element to populate */
                populateSelect("BACKING", "backing");
                populateSelect("VISIBILITY", "visibility");
                populateSelect("CONDITION_", "condition");
                populateSelect("COLOR1", "color1");
                populateSelect("DELINEATOR", "delineator");
                populateSelect("ILLUM", "illum");
                populateSelect("ATTACHTYPE", "attachType");
                populateSelect("ATTACHLOC", "attachLoc");
                populateSelect("SITEOBS", "siteObs");
                populateSelect("SIGNSHAPE", "signShape");
                populateSelect("COLOR2", "color2");
                populateSelect("MUTCD", "mutcd");


                /* Show supports form */
            } else if (severity === "1") {
                app.attributesModal.modal("show");


                /* Enter your domain item and then the element to populate */
                populateSupportSelect("TYPE", "type");
                populateSupportSelect("SIZE_", "size");
                populateSupportSelect("MATERIAL", "material");
                populateSupportSelect("BASE", "base");
                populateSupportSelect("RATING", "rating");

            }

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
ChrisSmith7
Honored Contributor

Those two functions are exactly the same, except for the "//get the domain value" part.

Would this work for you?

 function populateSelect(x, y, layer) {  
          //get the domain value 
          var domain;
          switch(layer) {
              case 'support':
                  domain = app.supportLayer.getDomain(x);  
                  break;
              case 'sign':
                  domain = app.signLayer.getDomain(x);  
                  break;
          }  

          //get the html select by ID  
          var select = document.getElementById(y);  

          //clear the current options in select  
          for (var option in select) {  
              select.remove(option);  
          }  

          var opt = document.createElement('option');  
          opt.innerHTML = "";  
          select.appendChild(opt);  
          //loop through the domain value to fill the drop down  
          for (var i = 0; i < domain.codedValues.length; i++) {  
              console.log(domain.codedValues.name);  
              ; var opt = document.createElement('option');  
              opt.innerHTML = domain.codedValues.name;  
              opt.value = domain.codedValues.name;  
              select.appendChild(opt);  
          }  

      }  

Usage would be like so:

populateSelect("MUTCD", "mutcd", "sign"); 

View solution in original post

9 Replies
ChrisSmith7
Honored Contributor

Those two functions are exactly the same, except for the "//get the domain value" part.

Would this work for you?

 function populateSelect(x, y, layer) {  
          //get the domain value 
          var domain;
          switch(layer) {
              case 'support':
                  domain = app.supportLayer.getDomain(x);  
                  break;
              case 'sign':
                  domain = app.signLayer.getDomain(x);  
                  break;
          }  

          //get the html select by ID  
          var select = document.getElementById(y);  

          //clear the current options in select  
          for (var option in select) {  
              select.remove(option);  
          }  

          var opt = document.createElement('option');  
          opt.innerHTML = "";  
          select.appendChild(opt);  
          //loop through the domain value to fill the drop down  
          for (var i = 0; i < domain.codedValues.length; i++) {  
              console.log(domain.codedValues.name);  
              ; var opt = document.createElement('option');  
              opt.innerHTML = domain.codedValues.name;  
              opt.value = domain.codedValues.name;  
              select.appendChild(opt);  
          }  

      }  

Usage would be like so:

populateSelect("MUTCD", "mutcd", "sign"); 
ChrisSmith7
Honored Contributor

You could also shorten it a little bit, if you wanted to do this, by sending in your layer object:

populateSelect("MUTCD", "mutcd", app.signLayer);

And adjusting the domain set-up, to something like this:

var domain = app.layer.getDomain(x);

This would negate the need for a switch statement or conditional.

ChrisSergent
Deactivated User

I think I had something like that before and I got that it was not a function.

0 Kudos
ChrisSergent
Deactivated User

This worked well. Thanks!

0 Kudos
ChrisSergent
Deactivated User

I don't know why but that only populated part of the dropdown lists.

I uploaded the most recent version of my app on github: csergent45/streetSigns · GitHub

0 Kudos
ChrisSmith7
Honored Contributor

The version on GitHub still shows the two separate functions - in main.js. Can you update that with the code that's only populating part of the list?

ChrisSergent
Deactivated User

I don't know why but when I re-updated the code, it worked.

0 Kudos
ChrisSmith7
Honored Contributor

Not sure if this occurred in your case, but depending on which browser you're using, and how your JavaScript is developed, I've noticed caching can be pretty robust, even when refreshing using ctrl-F5.

I usually clean cache and close my browser when making JS updates in my .js module files. Any JS in front end files, e.g. .aspx/.html, seems to get updated after a hard refresh.

ChrisSergent
Deactivated User

I forget that. .NET had me spoiled with server side code.

0 Kudos