Embedded template buttons don't work

[achou72]

Re: Importing tpl inside another tpl

I tried the method as outlined in this topic to embed the topic template into a div on my main page. The content displays just fine, however the links/buttons in the div (replying, favoriting etc.) do not work properly. Is there a way to render the template and have the buttons and links and such work inside the div? Thanks.

[pichalite]

@achou7 don't think anyone can help without actually looking at your code to identify the issue. post your template code here and also some background about what you are trying to do so that we can point you in the right direction.

[achou72]

I have a hidden div in header.tpl that I'm trying to append the topic template into with this code:

 require(['translator'], function (translator) {
	$.getJSON('/api/topic/8/', function (json) {
	        templates.parse('topic', json, function (html) {
  		  translator.translate(html, function (translated) {
    			 $(translated).appendTo('.overlay-content');
                             $('#lb-overlay').css('display','block');
			 $('html').css('overflow-y','hidden');
                            });
		      });
	});
  });

I basically want to make it so that when you click a link to the topic itself, instead of displaying in the main window, it will open up this overlay div and display the topic info inside the div. The code above was taken from the topic I replied to in my opening post when another user tried to append the recent template into a sidebar. The topic content is displayed properly inside the div, but none of the buttons (reply, favoriting etc.) do not work inside the div. Is there more I need to do in order to render the template properly with full functionality inside the overlay? I can have an iframe inside the div pointing to the topic/url I want but I would rather not use that if there is a way to simply render the template inside a different div.

[pichalite]

@achou7 assuming I am not wrong, if you are not on the topic page, the js code to make the buttons work from core won't be loaded. you will have to make that available on the page you are on.

[achou72]

@pichalite I see. How would I go about doing that? Sorry if this is answered somewhere in the documentation, I'm new to nodebb and node.js in general and having a hard time grasping the ins and outs. Thanks!

[pichalite]

@achou7 I am not sure what the correct way is.

I don't understand why you would want to display the entire topic in a div on the same page though. How will you handle large topics, infinitescroll, pagination? Lot of work for something that may not be adding much value on the UX front.

[yariplus]

I agree with @pichalite, embedding the whole topic page doesn't make sense. I would make a new template with just the features you absolutely need, and invoke some js for just those features.

[achou72]

Ok, so for example, if I wanted to get the js for the reply, favorite and upvote button functionatliy, where/how would I grab that script? I noticed the buttons all use the component system, so do I have to somehow include components.js in the new template? How would I go about doing that?