Calling Javascript from Template

Discussion forum for Extension Writers regarding Extension Development.
Post Reply
bfrd
Registered User
Posts: 6
Joined: Wed May 30, 2018 12:00 pm

Calling Javascript from Template

Post by bfrd »

Hello all,

This is my first post here. I apologize if the content has been answered. I did my best to search, but the search terms I used kept pulling in unrelated information.

I am creating an extension to integrate Flickr into the message window. I have it all built and working with one exception- mobile devices. It would seem that my call to $(window).load(function(){}); doesn't happen. It works fine on desktops, but not on mobile devices. To circumvent the issue I am placing a button to just call the function directly. I will do my best to show what the extension looks like below without boring everyone with the details.

1. listener

Code: Select all

'core.posting_modify_template_vars'				=> 'setup_flickr',
...
	public function setup_flickr()
	{

		$this->template->assign_vars(array(
			'NSID'		=> $this->user->data['user_flickr_nsid'],
			'KEY'		=> $this->config['BFRD_FLICKR_APIKEY'],
		));
	}
2. Event [posting_editor_message_after.html]

Code: Select all

<!-- IF NSID -->
<script type="text/javascript">
// <![CDATA[

var _nsid = '{NSID}';
var _key = '{KEY}';
	
//]]>
</script>

{% INCLUDECSS '@BFRD_bfrdFlickr/bfrd_flickr.css' %}
{% INCLUDEJS '@BFRD_bfrdFlickr/js/bfrd_flickr.js' %}

<div style="width: 800px;">
	<div class="FlickStripInfo">
		<div style="float: left">Flickr Integration</div> <div style="float: right; margin-left: 0px;"><select id="album-dropdown" name="album" ></select></div>
	</div>
	<div class="FlickStrip" id="FlickrIntegratedImages">
		<!-- For Mobile -->
		<input type="button" onClick="myStream.init(); return;" value="Load Flickr Information" />
	</div>
</div>


<!-- ENDIF -->
3. JSINCLUDE **Please note that I am well aware that the window.load function is empty. I emptied it to simulate the call not being successful on mobile devices while using a desktop. It would normally have myStream.init(); in it.

Code: Select all

(function($) { // Avoid conflicts with other libraries

'use strict';

	$('#album-dropdown').change(function(){ myStream.loadAlbum($(this).val());});
	
	$(window).load(function(){});


	
var myStream = (function()
{
return{
	init: function()
	{
		myStream.loadAlbumList();
		myStream.loadStream();
	},
	loadStream: function()
	{		
		SNIPPED FOR BREVITY
	},
	loadAlbum: function(albumid)
	{
		if(albumid == 0){
			return myStream.loadStream();
		} 
		
		SNIPPED FOR BREVITY
	},
	loadAlbumList: function()
	{
		SNIPPED FOR BREVITY	
	}
};
})();

var base58 = (function() {
  SNIPPED FOR BREVITY
})();

})(jQuery); // Avoid conflicts with other libraries
The error that I am getting stems from "myStream" not being defined in the scope of the Event Template. I know that if I remove the portions of code that avoid function conflicts that this will resolve. However, I don't feel that is an appropriate solution.

So after a lot of rambling, how would I call myStream.init() from the Event Template? A bonus answer might include why mobile devices don't work, but I am actually less concerned about that part.

If I failed to include anything, please forgive my ignorance. I would be happy to provide any additional details if requested/required.

Thanks in advance!
User avatar
ViolaF
I've Been Banned!
Posts: 1609
Joined: Tue Aug 14, 2012 11:52 pm

Re: Calling Javascript from Template

Post by ViolaF »

@first i think..

var myStream = (function()

change to

myStream = true;
var myStream = (function()
bfrd
Registered User
Posts: 6
Joined: Wed May 30, 2018 12:00 pm

Re: Calling Javascript from Template

Post by bfrd »

ViolaF wrote: Wed May 30, 2018 3:52 pm @first i think..

var myStream = (function()

change to

myStream = true;
var myStream = (function()
I did try that and saw no change in behavior. At present I have just removed the first and last lines of the .js file. This has corrected both the issue with the method not working AND mobile devices are now working as expected. I just don't like risking a conflict with another area of the application.
User avatar
kasimi
Former Team Member
Posts: 4900
Joined: Sat Sep 10, 2011 7:12 pm
Location: Germany
Contact:

Re: Calling Javascript from Template

Post by kasimi »

In your second code block, declare myStream:

Code: Select all

...
var myStream;
var _nsid = '{NSID}';
var _key = '{KEY}';
...
Now put back the no conflict code and change var myStream = (function() to myStream = (function() to reference the global variable instead of using a local one.

By the way, make sure you escape all data you assign from the template to JavaScript variables (NSID, KEY etc): https://twig.symfony.com/doc/2.x/filters/escape.html
bfrd
Registered User
Posts: 6
Joined: Wed May 30, 2018 12:00 pm

Re: Calling Javascript from Template

Post by bfrd »

kasimi wrote: Sat Jun 09, 2018 8:03 am In your second code block, declare myStream:

Code: Select all

...
var myStream;
var _nsid = '{NSID}';
var _key = '{KEY}';
...
Now put back the no conflict code and change var myStream = (function() to myStream = (function() to reference the global variable instead of using a local one.

By the way, make sure you escape all data you assign from the template to JavaScript variables (NSID, KEY etc): https://twig.symfony.com/doc/2.x/filters/escape.html
Perfect! That is exactly what I was looking for!
Post Reply

Return to “Extension Writers Discussion”