calling functions from html script, using AMD syntax

DavidMarquardt · ‎09-04-2013

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>

JeffJacobson · ‎09-05-2013

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

View solution in original post

JasonZou · ‎09-04-2013

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.

JeffJacobson · ‎09-04-2013

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

DavidMarquardt · ‎09-04-2013

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

JonathanUihlein · ‎09-04-2013

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.

JasonZou · ‎09-04-2013

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.

DavidMarquardt · ‎09-05-2013

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

JonathanUihlein · ‎09-05-2013

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.

JeffJacobson · ‎09-05-2013

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

feliperivera · ‎10-26-2016

I had exactly the same question. Thanks Jeff.