Mustache.js - using partial inside an external template file - javascript

I'm using external template file and I want to use a partial inside the template file (.mst file inside another .mst file)
For example I have template.mst file with this code:
{{#comments}}
// Here I want to use another external .mst file
{{/comments}}
So I careated a comment.mst file beside the template.mst file and now I'm trying to use {{>comment}} to call this external template file - full example:
{{#comments}}
{{>comment}}
{{/comments}}
But it doesn't work. I tried to play with it a little bit, I tried to add the file extension {{>comment.mst}} and I tried to add the path {{>temmplates/comment}} and any pther option.
This is the code I use to load the template:
$.get('templates/template.mst', function(template) {
var rendered = Mustache.render(template, postData);
$('.inner-container').prepend(rendered);
});
I guess I missing something, Can someone give me an hint? Thanks!

Related

How to add html file into different js folder

pic
I want to add html file in my js, and this pic is the path in my directory. How can I do?
in my config.js, I widh to include my file as let ADDR_iframe1 = "../templates/switch.html";
Use JavaScript fetch() Method to Load an External HTML File.
Please find the below example for your reference.
function loadHTML() {
fetch('switch.html')
.then(response=> response.text())
.then(text=> document.getElementById('xyz').innerHTML = text);
}

accessing document.getElementById from another window

I have two .html files (Intro.html and Main.html) sharing an external .js file.
My first .html file opens up the 2nd .html via a customized button and .online event from the external .js file using
document.getElementById("leaveButton").onclick = function () {
location = "Main.html";
}
My second .html file also has several buttons on its own page/window also being accessed by document.getElementById.onclick from the external .js file.
There are no problems and everything works fine if I keep separate .js files for each .html file.
However, when I have them share the same .js file, each .html page in the console complains about the other's document.getElementById("idName").onclick items. This is the error message I get,
Uncaught TypeError: Cannot set property 'onclick' of null
How do I resolve this using pure Javascript?
The simplest solution would be to only attempt to add the onclick() handler if the element exists. Something like:
if (!!document.getElementById("leaveButton")) {
document.getElementById("leaveButton").onclick = function () {
location = "Main.html";
}
}

Node JS, Ideas on Template For PDF Creation

How to create PDF Documents in Node.JS.? Is there any better solution to manage templates for different types of PDF creation.
I am using PDFKit to create PDF Documents and this will be server side using Javascript. I can not use HTML to create PDF. It will blob of paragraphs and sections with replacing tags with in.
Does anyone know Node.js has any npm package that can deal templates with paragraphs sections headers.
Something like
getTemplateByID() returns a template that contains sections , headers, paragraphs and then i use to replace appropriate tags within the template.
In my case, I have to get my HTML template from my database (PostgreSQL) stocked as stream. I request the db to get my template and I create a tmp file.
Inside my template, I have AngularJS tags so I compile this template with datas thanks to the 'ng-node-compile' module:
var ngCompile = require('ng-node-compile');
var ngEnvironment = new ngCompile();
var templateHTML = getTemplateById(id);
templateHTML = ngEnvironment.$compile(templateHTML)(datas);
Now I have my compiled template (where you can set your paragraph etc.) and I convert them into PDF thanks to a PhantomJS module 'phantom-html-to-pdf'
var phantomHTML2PDF = require('phantom-html-to-pdf')(options);
phantomHTML2PDF(convertOptions, function (error, pdf) {
if(error) console.log(error);
// Here you have 'pdf.stream.path' which is your tmp PDF file
callback(pdf);
});
Now you have your compiled and converted template (pdf), you can do whatever you want ! :)
Useful links:
https://github.com/MoLow/ng-node-compile
https://github.com/pofider/phantom-html-to-pdf
I hope this help !

How to user Viewer js in Laravel

Hello I'm trying to display PDF documents with ViewerJS plugin but it doesn't work properly. As documentation says I have <iframe id="viewer" src = "{{URL::to('/')}}/ViewerJS/#../uploads/files/{{$video->source}}" width='100%' height='600' allowfullscreen webkitallowfullscreen></iframe>
I have ViewerJS folder in public folder and my pdf files in public/uploads/files folder. When I use this url it shows my page in frame instead of document. Where is a mistake?
Although this is old question, I would like to share how I got that working:
Step 1: Download ViewerJs - http://viewerjs.org/releases/ViewerJS-latest.zip
Step 2: Extract this in public directory of Laravel (I used it with Laravel 4.0)
Step 3: Now, extract another copy in Views folder. That means, you will have ViewerJs library at two locations. One inside public (public/ViewerJs) folder and another will be at (views/ViewerJs)
Step 4: Add below code in your app/routes.php
//DocumentViewer Library
Route::any('ViewerJS/{all?}', function(){
return View::make('ViewerJS.index');
});
Step 5: Now, add any sample PDF file in your public folder (for testing purpose)
Step 6: Open below URL in your browser
http://example.com/ViewerJS/index.html#../demodoc.pdf
Please replace example.com (in my case this was localhost/webapp) by your project path and replace demodoc.pdf by name of sample PDF file that you added in public folder.
That's it. This will work fine.
You should do as follows:
copy the content of ViewerJS folder e.g in your public/viewerjs
edit PluginLoader.js, ODFViewerPlugin.js, PDFViewerPlugin.js and search for the string ./ and change it to the relative path of the directory, in my example viewer/
Ex.: in PluginLoader.js, you will find:
loadPlugin('./ODFViewerPlugin', function () {
Plugin = ODFViewerPlugin;
});
replace this to:
loadPlugin('viewerjs/ODFViewerPlugin', function () {
Plugin = ODFViewerPlugin;
});
create a GET route like: Route::get('/ViewerJS/{all?}', array('as' => 'pdfViewer', 'uses' => 'YOURCONTROLLER#pdfViewer'));
create the method in you controller like:
public function pdfViewer()
{
return View::make('pdfview.view');
}
Create your the view and paste the entire content of the index.html, it's inside the ViewerJS folder. Don't forget to replace all css and javascript file references with:
{{ asset('viewerjs/viewer.css') }}
{{ asset('viewerjs/viewer.js') }}
{{ asset('viewerjs/PluginLoader.js') }}
Call the route like: http://www.xxxxx.com/ViewerJS#YOUR_PATH_TO_THE_PDF_FILE_UNDER_THE_PUBLIC_FOLDER
example: uploads/pdfs/test.pdf
Note that you don't have to specify public/uploads/pdfs/test.pdf !!
You have to add the PDF's name to the path, as well. For example:
http://www.xxxxx.com/ViewerJS#YOUR_PATH_TO_THE_PDF_FILE_UNDER_THE_PUBLIC_FOLDER/NAME_FILEP

jquery load html file containing javascript code

When I tried to load an HTML file containing javascript code, the page doesn't display correctly.
Is there a way to load correctly this page?
PS: I used FireFox to test
<div class="mydiv"></div>
var path = myHTMLWithJavaScript.html;
$.get(path, function(data) {
$(".mydiv").load(path);
})
Either use $.get or $(".mydiv").load(path); not both
Also,
var path = myHTMLWithJavaScript.html;
should be (notice double quotes)
var path = "myHTMLWithJavaScript.html";
and make sure that this file is present in the same directory as your page
Since you are tyring to load JavaScript File / Code it is better to use $.getScript. More information can be found here http://api.jquery.com/jQuery.getScript/

Categories