[SOLVED] Generated onclick call not finding function

Help Requests
1

I have some text that is being generated from a script that I am calling thru httpClient.fetch.

It returns some html code that I then insert into the innerHTML attribute in the viewModel like so:

<p innerHTML.bind="note.htmlComments"></p>

This is the code generating the text:

my $txt = "<a name=\"$item_no\">
</a>
<div id=\"short_$item_no\"$short_style>$short_text<br>\n
<span class=\"span spanLink\" onclick=\"expand_div($item_no)\">+ Expand $label</span>
</div>
<div id=\"long_$item_no\" $long_style>$shrink_text<br>\n$long_text<br>\n$shrink_text</div>";

This is the html code from the inspect element:

<span class="span spanLink" onclick="expand_div(c64293822)">+ Expand this note</span>

It is displaying properly in the html when I load the page, and I can tell that itā€™s loaded properly because I have classes ā€˜span and spanLinkā€™ and they are doing what they should.

My problem is when I try to click on Expand this note, the function expand_div is not found.

I have tried the following:

In the activate function, I have tried this:

let scriptElement = document.createElement('script');
    scriptElement.src = '/expand_collapse.js'; (have also tried './expand_collapse.js')
    this.scriptElementInHead = document.querySelector('head').appendChild(scriptElement);

This produces a GET error because it cannot find the file.

Also this:

    <script type="text/javascript" src="./expand_collapse.js"></script>

This produces no errors, but the function is never found.

Also, I have tried including the function directly into my customer.js file as follows:

expand_div(id)
  {
      var form = document.forms['notes_form'];
  var short = 'short_' + id;
  var long = 'long_' + id;
  
  console.log('expand_div', d.short);
  
  }

Contents of expand_collapse.js:

export function expand_div(id)

{

    var form = document.forms['notes_form'];

var short = 'short_' + id;

var long = 'long_' + id;

console.log('expand_div', d.short);

}

I need to figure out how to make this work, because the script is generating long and short versions of the notes that I want to dynamically display based on a click from the user.

1 Like
2 
<div onclick="call_some_function(someArguments)"></div>

is a native html attribute, and an old way to ā€œdefineā€ a click listener on an element. this requires the method being called to be a global function. You will need to do something like this:

window.call_some_function = function(myArguments) {
  // ...
}

If you want Aurelia to work with the click that way, it should be:

<div click.delegate="...">
or
<div click.trigger="...">

Itā€™s probably overridable, and maybe easy to do: tell Aurelia that onclick is equal to click.trigger. But I think unless we have good reason to do that, itā€™s best avoid it.

3

Thank you for adding this.

Since it was a short function, I went ahead and added the code straight to the onclick function.

Itā€™s working fine, and I donā€™t anticipate needing to do this again, because I am trying with all my might to make sure I generate the code for Aurelia thru javascript, and not externally.

1 Like