Access a function externally

Using JavaScript with Hype
1

Hi,

I have a symbol which runs a function within Hype, is it possible to access this function from a script in the Head tag?

Thanks

2

http://tumult.com/hype/documentation/3.0/#invoking-api-from-outside-oftumult-hype

:slight_smile:

3

Thanks Hans,

I think understand, but could you please provide a little more clarification.

My Hype document contains a JS called symFilter();

I have a radio button on the main page which when changed I would like to invoke the symFilter() within Hype.

<script>

  function setFilter(hypeDocument, element, event) {
	symFilter();
return false;
  }

  if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
  }
  
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":setFilter});

 </script>

but this does not seem to work?

4

to execute a hypefunction you’ll need the reference to the object hypeDocument. the method within API then is:
hypeDocument.functions().someHypeFunction(hypeDocument, element, event)

5

Many thanks Hans,

I’ve got very confused, although the script line provided looks simple to use. I am not sure where this should reside.

I have created a small example from my project which contains the script and radio button which is being monitored, should the script be placed in the head or within the onChange event of the radio button?

Your help is appreciated.

Test.hype.zip (18.7 KB)

6

sry i can not access your file or hype right now …

in your solution, you could wrap the functioncall in a function and assign it to a variable … this could be executed then

though it might be easier just to use the first opportunity offered in the onlinedocumentation ->
HYPE.documents[documentName] + functioncall

perhaps somebody else may step in and can modifiy your provided file … :slight_smile: guys?!

7

The first thing I notice is that you are using @h_classen function name from his example rather than you actual function name jsFilter.

The second issue will be that the Head function will fire well before the Hype Document fully loads.
This will give you an error if you try to refer to any of the Hype elements from within it’s scope

To get around this you can use a second load listener to the window object. Or a setTimeout().

In this example we use the window.onload. and place our call for the hype function within the window.onload’s function.

<script>

  function myCallback(hypeDocument, element, event) {
 
window.onload = function () {  hypeDocument.functions().jsFilter(hypeDocument, element, event)}
    

  

   
 
 return true;
   
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

 </script>

HypeFunctionFromHead.hype.zip (12.9 KB)

2 Likes
8

Many thanks Mark,

I understand this better with the example provided.

In the example provided the JS is fired when onLoad, is it possible to execute the JS when clicked on a button and not on the document load?

Regards

9

Yes it is possible to do but the example is taken from what you requested an answer to before! So now it seems we do not know what you are really trying to do or why… which may lead to more examples that do not have relevance and waste time…

Please can you go into some detail of what exactly you are trying to do and why. also if possible post a simplified project that demonstrates this and the bits you understand and have working so far

Thanks

1 Like
10 
<script>

  function myCallback(hypeDocument, element, event) {
 
test = function () {  hypeDocument.functions().jsFilter(hypeDocument, element, event)}
    

  

   
 
 return true;
   
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

 </script>

outer HTML:

<button onclick="test()">Click me</button>

1 Like
11

Many thanks Hans,

I do apologise if my original question was not clear, I will try harder next time.

The solution you provided worked great!

Regards,

3 Likes