Skip to Content (Press Enter)
2011-06-15 10-51-19
Wim van den Brink
384Views
2Comments
Solved
$actions unknown object when called from javascript
Question

I have a piece of javascript code which generates pagecode based on some data i have. The code is then pasted into the innerHTML of a html object on the page. There are a couple of image's and I want to have a click action on the image which then call's a screen action. 

Some code : 

output+="<span id=" + array[i].articlenumber + "  onclick=$actions.DoSelectItem(" + array[i].articlenumber +") " +
                " class='" + hilight   + "'  " +
                "style='left:" + artxpos   + "px;" +    
                "bottom:" + artypos   + "px;" +
                "width:"  + artwidth  + "px;" +
                "height:" + artheight + "px;" + image + "'>" + promo +
                "<div class='"+displaystyle+"' style='width:" + barkerwidth + "px; height:5px;'></div>";  


var el = document.getElementById($parameters.output_);
el.innerHTML = output;

The DoSelectItem is the screen action I want to call with the articlenumber as a parameter. 


But when I click the image I get a error message stating the $actions is an unknown object :

VM15848 TestWim?TimeOut=30:1 Uncaught ReferenceError: $actions is not defined
    at HTMLSpanElement.onclick (VM15848 TestWim?TimeOut=30:1)

Any idea what goes wrong and how to solve this ? 

It's a mobile app running on platform 10.0.705.0 Java/Oracle stack

0
0
29 Jan 2018
Copy Link
2019-07-08 11-04-35
Leonardo Fernandes
 
MVP
Solution

Hello Wim. The $actions is only defined inside javascript blocks. The code that you put into event attributes (such as the onclick) is executed in the context of the window.


I suggest you not to attach the onclick event inside the innerHTML in this case. You can bind the event later using javascript. For example:

output += "<span>(...)</span>";
var el = document.getElementById($parameters.output_);
el.innerHTML = output;
var spans = el.querySelectorAll("span");

for (var i = 0; i < spans.length; i++) {
    var articlenumber = array[i].articlenumber;
    spans[i].addEventListener("click", function(evt) { $actions.DoSelectItem(articlenumber); });
}


The difference here is that the $actions object is being evaluated in the context of the javascript node.

1
0
29 Jan 2018
Copy Link
2011-06-15 10-51-19
Wim van den Brink

Finally fixed using your code and something extra ;-) 

Over each image there is an overlay with class overlay, added the articlenumber as an extra attrib to it 

// Select all overlays
var AllOverlays = document.getElementsByClassName("overlay");

// Add function to all overlays calling action DoSelectItem
for (var i=0; i< AllOverlays.length; i++)  {
   AllOverlays[i].addEventListener("click", function() { $actions.DoSelectItem(this.getAttribute("articlenumber"));} );
}

By the way, outsystems javascript editor complains about doing a function in a loop, but ignored that. 

(thx to Frank Boldingh trying things out for me) 

0
0
31 Jan 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.