Again: Confused

[Haraldio (Harald Rothermel)]

I am loading a <select> via Ajax and put it in an element (rectangle) via innerHTML. That Select should call a function inside Hype via onChange='xyz()' - but I get the error 'xyz is not defined'.

What am I missing here? Spelling is checked

[h_classen (Hans-Gerd Claßen)]

the scope does not fit ... should help:

Access hypeDocument from the innerHTML

<script> tags within inner HTML are executed in the global/window scope and thus do not have a hypeDocument object – it is the same if you were executing on the head. You can reference it via HYPE.documents["documentName"] (though this is dependent on your export) or capture the global variable at an early time such as On Document Load with head HTML code that would look like this: <script> function myCallback(hypeDocument, element, event) { window.hypeDocument = hypeDocument; } if(…

[MaxZieb (Loves Hype)]

As the solution is meant for single Hype widgets (meaning only works if there is not more than one Hype document on a webpage), to get a hypeDocument solution for a multi Hype widget setup, here is a quick insight in what is going on behind the scenes. Hype actually has a global lookup of all the Hype widgets on a page, and it can be found under HYPE.documents (← check it out in your browser console). Under that JavaScript object, every hypeDocument is listed by its document ID, and that is in turn based on its document name. There in lies the challenge of hard-coding as it introduces the dependent on your Hype document name. Hence, renaming your document would lead to refactoring your hard-coded links and another quirk with this lookup is that when you only preview in Hype, the preview mode doesn't use the document name (hence ID) you assigned it, but calls it index.

Hence, the above workaround of capturing the local hypeDocument on the event Hype Document Load and assigning it to a global variable called hypeDocument. As this event fires for every Hype widget on a page, you can see how this could fail in such a scenario. The moment you have more than one Hype widget on a page, the last one initialized will populate the global hypeDocument produced by this method and might lead to some unintended behavior. This solution is viable and shouldn't be a problem as long as one can be sure that there is only one Hype widget on a page or all are running from within iFrames.

Don't get me wrong the lookup is still a valuable thing, although using it directly, through hard-coding can be challenging. One initial workaround was to auto-detect the hypeDocument from withing a rectangle:

getHypeDocument()

getHypeDocument I often read about people that need the hypeDocument context while adding code into an DIV. In Hype this context actually doesn’t know about the hypeDocument so this little helper solves that problem. The traditional approach found in the Tumult Hype docs requires hardcoding the document id. This approach makes retrieving the hypeDocument independent. [image] Installation This snippet allows you to get the context anytime. Just add it to your Head-HTML. If you can’t put this i…

If you are a Hype Actions Event user, you can also simply use action events to capture change using data-change-action and map it to a function or direct JavaScript as seen here:

Hype Action Events

Example demonstrating form-based events like focus and change data-focusin-action data-focusout-action data-change-action [CleanShot 2022-02-16 at 19.41.57] Example_Data_Attribute_Focus_And_Change.hype.zip (29,2 KB)

[Haraldio (Harald Rothermel)]

OK - thanks again.
I've put that getHypeDocument-Script in the Head-HTML and the snippet to retrieve the document as a script in a rectangle - as proposed.

But then I get this in console:

APPLY ERR w=<script>
	var hypeDocument=getHypeDocument();
</script>

 : ReferenceError: getHypeDocument is not defined

(Spelling really checked)
What am I doing wrong?

[h_classen (Hans-Gerd Claßen)]

jfyi: it's proofed good praxis to offer a simple Hypefile showcasing an issue. Makes it easier for everyone

[Haraldio (Harald Rothermel)]

Sorry. You are right - here is the corresponding hype-file. Don't know if it works without the php-files though ...
weltreise61.hype.zip (1.7 MB)

[MaxZieb (Loves Hype)]

Here is an example…

getHypeDocument()

Here is a new example file to see it applied. It contains examples to use it on links or with inline script tags in rectangles: Example_using_getHypeDocument.hype.zip (71,5 KB) Hype Action Events, has more meat to its code base, but will solve most case where this would be needed as well.

Funny, we posted at the same time. BTW if the previous solution worked … keep it.
It just fails when you have more than one Hype document on your page.