topic Re: calling functions from html script, using AMD syntax in ArcGIS JavaScript Maps SDK Questions

calling functions from html script, using AMD syntax

DavidMarquardt — Wed, 04 Sep 2013 19:00:06 GMT

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>

Re: calling functions from html script, using AMD syntax

JasonZou — Sun, 12 Dec 2021 07:57:46 GMT

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.

Re: calling functions from html script, using AMD syntax

JeffJacobson — Wed, 04 Sep 2013 19:24:14 GMT

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.)

Re: calling functions from html script, using AMD syntax

DavidMarquardt — Wed, 04 Sep 2013 21:02:34 GMT

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

Re: calling functions from html script, using AMD syntax

JonathanUihlein — Wed, 04 Sep 2013 21:10:09 GMT

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.

Re: calling functions from html script, using AMD syntax

JasonZou — Sun, 12 Dec 2021 07:57:49 GMT

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.

Re: calling functions from html script, using AMD syntax

DavidMarquardt — Thu, 05 Sep 2013 14:49:50 GMT

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

Re: calling functions from html script, using AMD syntax

JonathanUihlein — Thu, 05 Sep 2013 14:55:03 GMT

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.

Re: calling functions from html script, using AMD syntax

JeffJacobson — Thu, 05 Sep 2013 15:32:59 GMT

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; });

Re: calling functions from html script, using AMD syntax

JeffJacobson — Thu, 05 Sep 2013 15:41:53 GMT

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.

Re: calling functions from html script, using AMD syntax

DavidMarquardt — Thu, 05 Sep 2013 16:46:01 GMT

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

Re: calling functions from html script, using AMD syntax

feliperivera — Wed, 26 Oct 2016 16:12:41 GMT

I had exactly the same question. Thanks Jeff.