nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

calling functions from html script, using AMD syntax

DavidMarquardt

Hi,

I???m having problems adjusting my functions to the AMD syntax.

I have some html checkboxes that call a update visibility function. I have some scripting in the html code that passes on unique arguments to the function. In the legacy script, this worked fine. When I transferred over to the AMD syntax (putting all functions inside the AMD require statement), the update visibility function is not recognized by the html code. But, if I take the function out of the require statement, the html scripting recognizes it. In this situation, though, the update visibility function can't recognize any of the modules or elements left in the require statement.   How do I call a function from an html script that's inside the require statement?

Here???s the stripped down format I have that doesn???t work

<script src="http://js.arcgis.com/3.6/" type="text/javascript"></script>
<script type="text/javascript">

require([ a bunch of modules ], function ( modules) {
ready (function() {
    map = ???..
    function updateLayerVisibility (arg1, arg2) { ???..}
});
});

</script>
<body>
<input type='checkbox' class='list_item' id='foodLyr3' value=3 onclick='updateLayerVisibility(arg1, arg2);' /></input>
</body>

Vind meer berichten getagd met

Accepted answers

JeffJacobson

Just curious, though, is there a way to call a function outside of its own require statement? I take it making global functions gets messy very quickly, and shouldn't be done, but it's good to know if it is possible to do in the new AMD format.

I think this would do that...

require(function() {   function myFunc() {   }      // Assign the function to window so it is globally available.   window.myFunc = myFunc; });

All comments

feliperivera

I had exactly the same question. Thanks Jeff.

DavidMarquardt

Thank you all for your help.

I redesigned my code based on your advice.

Good to know there is a way to make a function accessible, if necessary.

David

JeffJacobson

You should be able to just have one function handle all of the checkboxes if they are all basically doing the same thing but affecting a different layer.

Inside of your event handler function, the this keyword will be pointing to the checkbox that was clicked. You can use that to access the attributes of the checkbox (HTML input element). You can have a data-layer-id attribute, for example.

JeffJacobson

Just curious, though, is there a way to call a function outside of its own require statement? I take it making global functions gets messy very quickly, and shouldn't be done, but it's good to know if it is possible to do in the new AMD format.

I think this would do that...

require(function() {   function myFunc() {   }      // Assign the function to window so it is globally available.   window.myFunc = myFunc; });

JonathanUihlein

Thanks zj_zou and Jeff,
since I have 8 sets of parameters, I'll end up with 8 event handlers
David

While you could have eight event handlers, you could probably get away with one event handler for all checkbox elements (assuming all checkbox elements on the page have the same functionality with different params to pass).

You could identify the parameters depending on which checkbox was clicked, inside the single event handler, then pass that along to your update function.

DavidMarquardt

Thanks zj_zou and Jeff,

From what you're saying, I should just establish my parameters in the event handler (since I have 8 sets of parameters, I'll end up with 8 event handlers). From there, I'll pass it on to the update visibility function. I had hoped to set parameters within their respective checkboxes, but I'll avoid doing that and keep the html separate from the scripting.

Just curious, though, is there a way to call a function outside of its own require statement? I take it making global functions gets messy very quickly, and shouldn't be done, but it's good to know if it is possible to do in the new AMD format.

David

JasonZou

Jeff's overall idea is better than mine. Here is what I would do.

Define an app controller module, module/app.js.

define(["dojo/_base/lang", "dojo/dom", "dojo/on", ...], function(lang, dom, on, ...) {
  return {
    init: function() {
       on(dom.byId("chkbox1_ID"), "change", lang.hitch(this, function(evt) {
          this.chk1_onChange(evt, param1, param2);
       }));
    },
    chk1_onChange: function(evt, param1, param2) {
      // respond to the event
    }
  };
});

Inside the index.htm,

 <script>
  var dojoConfig = {
   parseOnLoad: true,
   async: true,
   packages: [{
    name: "module",
    location: "/path/to/module"
   }]
  };
 </script>
 <script src="http://js.arcgis.com/3.6/"></script>
 <script>
  require(["module/app", "dojo/domReady!"], function(app) {
   app.init();
  });
 </script>

You can define all the event handlers in app.js so to keep HTML for the page layout, and JS file for the business logic.

JonathanUihlein

Thank you for the responses. They are a help.

What I'm trying to do is to pass arguments into a function from various checkboxes (each with their own set of arguments), Is there a way to do that using AMD? Just to explain the situation a bit more:

<script>

require ({.....

function X (takes arguments a, b)

)};

<html section>

checkbox 1 -----function X (argument1a , argument 1b)
checkbox 2 ------ function X (argument2a, argument 2b)

David

Yes, Jeff explained how to connect an event in the post above yours (copied below):

What you need to do
Inside the require function call dojo/on to connect the checkbox to the event handler function. (If you don't need to deal with legacy browsers you should use the built in JavaScript addEventListener function instead of dojo/on.)

Check out the 'dojo/on' documentation for a bit; you should be able to find everything you need.

DavidMarquardt

Thank you for the responses. They are a help.

What I'm trying to do is to pass arguments into a function from various checkboxes (each with their own set of arguments), Is there a way to do that using AMD? Just to explain the situation a bit more:

<script>

require ({.....

function X (takes arguments a, b)

)};

<html section>

checkbox 1 -----function X (argument1a , argument 1b)
checkbox 2 ------ function X (argument2a, argument 2b)

David

JeffJacobson

What you need to do

Remove the "onclick" attribute of the checkbox input element.
Inside the require function call dojo/on to connect the checkbox to the event handler function. (If you don't need to deal with legacy browsers you should use the built in JavaScript addEventListener function instead of dojo/on.)

JasonZou

Try:

function updateLayerVisibility (arg1, arg2) {
  // only need to use require when updateLayerVisibility depends on module1, module2,...
  require([module1, module2,...], function (module1, module2, ...) { 
    // code for updateLayerVisibility 
  });
}

AMD encourages to define modules to wrap the functionalities. It's kind of awkward to define the functions in the legacy way, and trying to make use of AMD to load the dependencies asynchronously.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.