Calling JS function in element A from element B?

Using JavaScript with Hype
1

Okay - I have a text element named ‘InternalMessageReceiver’ and have edited its inner HTML thus:

Receiver

<script language="javascript">

	function messageReceived() {
		alert ( "Received the message!" );
	}
		
</script>

I have a button in my document; its onClick action is intended to activate the function in the inner HTML of my text element. I’ve tried a couple variants to activate that function:

hypeDocument.getElementById("InternalMessageReceiver").messageReceived;

…and:

HYPE.documents['MessagingTest'].functions().messageReceived();

…however, in both cases the code fails (the document is named ‘MessagingTest’). For the first example nothing happens at all; for the second example the error is:

[Log] Error in sendMessage: TypeError: undefined is not an object (evaluating ‘HYPE.documents[‘MessagingTest’].functions’) (HYPE-466.thin.min.js, line 14)

It seems clear I’m not getting to the function in the text element.

I’m doing this as an isolated test to determine if/how to send calls to functions in elements’ inner HTML, with the goal, eventually, of attaching functions to an HTML widget that will allow me to pass parameters.

Ultimately my purpose is to load a custom Google Maps view in a widget, using JQuery to get the user’s location, and load a map with their LatLong centered in the map view. I’ve been able to get location, so that much at least is working. I’ve also been able to load a static map view, but it’s loading based on hard-set parameters copy/pasted from a Google Maps iframe embed.

To move on to the next step, I’ll need to be able to pass the user’s LatLong parameters to the map view; that’s why I believe what I need to do is be able to message custom functions attached to a widget’s inner HTML. (If there’s another way to do this, feel free to suggest it…)

I’d like to be able to do other things as well, such as toggle map pins of various kinds based on what the user wants to see (i.e., show or hide locations of restaurants, amusement parks, zoos, whatever); again, in order to do this I think I’ll need to send messages to the widget that contains the map view.

Since I want the view to be dynamic based on multiple user-set parameters, I don’t know of any other way to do this … and it seems I can’t even begin to address the simplest of custom functions in an element’s inner HTML.

Am I missing something obvious here?

Sample stub file is attached.

MessagingTest.hype.zip (16.3 KB)

2

I will have a look at this at some point but I think you will end up having to use an iframe in the element and change its source to the url with all the parameters for the Google map.

3

Can’t you just call

messageReceived();

in the OnClick function?

Even if you put it in the innerHTML of an element, it is still available globally. Also, it’s not a Hype function, so the second one won’t work.

1 Like
4

Ok that was quit simple to fix. So ignore my above iFrame reference.

You just need to call the function without any prefixing.

messageReceived();
1 Like
5

Tested your idea and it works.

sender

messageReceived("https://www.google.com/maps/embed/v1/place?q=Chicago,+IL,+United+States&key=....");

widget

<script language="javascript">

	function messageReceived(newSrc) {
		//alert ( newSrc );
		 $("#output_iframe1").attr('src', newSrc);

	}
		
</script>
<iframe width="600" height="450" id="output_iframe1" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=London,+United+Kingdom&amp;key=...."></iframe>

Although you do not need to put the Javascript in the widget.

You can just have the iFrame in the widget with a id. And just use the hype function to send the change.

  function sendMessage(hypeDocument, element, event){
    
    var newSrc = "https://www.google.com/maps/embed/v1/place?q=Chicago,+IL,+United+States&key=...";
    	 
    	$("#output_iframe1").attr('src', newSrc);
}
1 Like
6

MarkHunte and Oana - thanks for that. I was working waaaay too hard in OO mode, apparently, and had been under the assumption that I had to message objects rather than just, you know, call a function.

7

Okay … yup, that’s enormously helpful right there. I can put together a constructor pretty readily for plugging in the ‘live’ map values, and knowing how to address the widget was the key.

My background is not in Web development - more desktop apps than anything else - so this bit right here:

$("#output_iframe1").attr('src', newSrc);

…coupled with this:

id="output_iframe1"

…saved me about 5 hours’ worth of head-scratching. Thanks stacks for that.

1 Like