Develop Reference

I can't register Handlebars helper missing

I can't register Handlebars helper missing
This code below shows you the condition block in the page:
<table class="table table-striped sorting">
<thead>
<tr class="home">
<th>Title</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{{#each pages}}
<tr id="id_{{this._id}}" class="{{this.slug}}">
<td>{{this.title}}</td>
<td>Edit</td>
{{#checkhomepage home}}
<td></td>
{{else}}
<td><a class="confirmDeletion" href="/admin/pages/delete-page/{{this._id}}">Delete</a></td>
{{/if}}
</tr>
{{/each}}
</tbody>
</table>
And this code below show you my script code block:
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
$('tbody').sortable({
placeholder: "ui-state-hightlight",
update: function () {
var ids = $('tbody').sortable("serialize");
var url = "/admin/pages/reorder-pages";
$.post(url, ids);
}
});
Handlebars.registerHelper('checkhomepage', function (home) {
if(this.title == home){
return true;
}else{
return false;
}
});
});
</script>
in app.js
// view engine
var expressHbs = require('express-handlebars');
var app = express();
app.set('views', __dirname + '/views/');
app.set('view engine', 'handlebars');
var hbs = require('handlebars');
hbs.registerHelper("HelperMissing", function(value, options)
{
return parseInt(value) + 1;
});
app.engine('handlebars', engines.handlebars);
ReferenceError: engines is not defined
engines inside app.js what can i do to solve this problem

You are trying to create a Handlebars Block Helper, but you have a few issues.
In your template, you have the following:
{{checkhomepage home}}
<!-- Home stuff -->
{{else}}
<!-- Non-Home stuff -->
{{/if}}
This will not work because:
Block helpers must begin with a "#" in the opening tag, before the helper name.
The opening and closing helper tags in the template must match, ie. {{#checkhomepage home}}{{else}}{{/checkhomepage}}`.
You are passing the value of home to your helper. However, it is not apparent that there is a home value in the current context, so this value is probably undefined. Perhaps you want to pass the String "home", in which case, you will need to include quotes: {{#checkhomepage 'home'}}.
Next, in order for a block helper to work, you need to use the options argument. In particular, the options arg has an fn function that will render the template nested within the block, as well as an inverse function that will render what is nested in the else block.
The following is the helper re-written to use these options functions. (I have also renamed the home arg to title for clarity:
Handlebars.registerHelper('checkhomepage', function (title, options) {
if (this.title === title) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
I have created a fiddle for your reference.

now i solved my problem
in past i dont set register helper in correct place
i'll post that code to see it
in app.js set helper into hbs caller like this
// view engine setup
app.engine('.hbs' , expressHbs({defaultLayout : 'layout' , extname : '.hbs' , helpers : {
checkhomepage: function (title, options) {
if (this.title === title) {
return options.fn(this);
} else {
return options.inverse(this);
}
},
if you see set helper function inside app.engine(.......,helper:{//here set your function helper like above
finally ill say thank's 76484 :) because he also help me to fix this issue

Export HTML table to Excel not downloading file using C#

I'm creating an Umbraco website, and I am creating a plugin for the backend of Umbraco so a user can export an Excel worksheet from an HTML table.
I'm using AngularJS and a C# controller to do this. Here are my files.
//This is my C# Controller at /App_Code/ExportBlankDictionaryController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Umbraco.Web.Editors;
using Umbraco.Core.Persistence;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.IO;
namespace AngularUmbracoPackage.App_Code
{
[Umbraco.Web.Mvc.PluginController("AngularUmbracoPackage")]
public class ExportBlankDictionaryController : UmbracoAuthorizedJsonController
{
//[System.Web.Http.AcceptVerbs("GET", "POST")]
//[System.Web.Http.HttpGet]
public void ExportExcell()
{
var keys = new System.Data.DataTable("BlankDictionaryItems");
keys.Columns.Add("Keys", typeof(string));
keys.Columns.Add("Description", typeof(string));
keys.Rows.Add("Enter First Dictionary Name Here", " ");
var grid = new GridView();
grid.DataSource = keys;
grid.DataBind();
HttpContext.Current.Response.ClearContent();
HttpContext.Current.Response.BufferOutput = true;
HttpContext.Current.Response.AddHeader("Content-disposition", "attachment; filename=BlankDictionaryItems.xls");
HttpContext.Current.Response.ContentType = "application/vnd.ms-excel";
HttpContext.Current.Response.Charset = "";
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
grid.RenderControl(htw);
HttpContext.Current.Response.Output.Write(sw.ToString());
HttpContext.Current.Response.Flush();
HttpContext.Current.Response.End();
}
}
}
// This is my AngularJS controller at /App_Plugins/datatable/datatable.controller.js:
angular.module("umbraco")
.controller("AngularUmbracoPackage.ExportBlankDictionaryController", function ($scope, keyResource) {
keyResource.exportToExcell().then(function (response) {
alert("Table Generated!");
})
});
This is my datatable.resource.js file within the same directory:
// Adds the resource to umbraco.resources module:
angular.module('umbraco.resources').factory('keyResource',
function ($q, $http) {
// The factory object returned
return {
// This calls the API controller we setup earlier
exportToExcell: function () {
console.log("button clicked");
return $http.post("backoffice/AngularUmbracoPackage/ExportBlankDictionary/ExportExcell");
}
};
}
);
If necessary, here is the package.manifest.json file:
{
propertyEditors:[
{
name: "DataTable editor",
alias: "my.datatable.editor",
editor:{
view: "~/app_plugins/datatable/table.html",
valueType: "JSON"
}
}
],
javascript: [
"~/app_plugins/datatable/datatable.controller.js",
"~/app_plugins/datatable/datatable.resource.js"
]
}
Here is the table.html file which is the view:
<div class="ExportDiv" ng-controller="AngularUmbracoPackage.ExportBlankDictionaryController">
<table id="table1" class="table table-bordered" runat="server">
<thead>
<tr>
<th>Key</th>
<th>Populate Dictionary Item Names in Key Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enter First Dictionary Name Here</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-success" ng-click="exportToExcel()">Export Table</button>
Okay, so the Umbraco page is loading, the alert box comes up when the developer section of Backoffice is opened, but when I click the Export Table button, nothing happens. I am trying to get an Excel sheet to download when this button is clicked. How can I do this? Am I missing something?

Add
angular.module("umbraco")
.controller("AngularUmbracoPackage.ButtonController", function ($scope, keyResource) {
$scope.ButtonClickHandler = function(){
console.log("clicked me!");
keyResource.exportToExcell().then(function (response) {
//do something with the response from the server
}
});
then change the button element to:
<button ng-controller="AngularUmbracoPackage.ButtonController" class="btn btn-success" ng-click="ButtonClickHandler()">Export Table</button>

AngularJs Return HTML from Controller

I try to return some HTML code from my AngularJs controller to the html data.
This is path of my html :
<div align="right">
{{chooseHtmlElement()}}">
</div>
And this is path of my AngularJs Controller:
$scope.chooseHtmlElement= function () {
var sum = $scope.chiQuadSum();
if (isNaN(sum)) {
return "";
}
if (sum > 17.00) {
return "<i class=\"fa fa-minus-circle\" style=\"color:red;\"></i>";
} else if (sum < 14.00) {
return "<i class=\"fa fa-check-circle\" style=\"color:green;\"></i>";
} else {
return "<i class=\"fa fa-circle\" style=\"color:orange;\"></i>";
}
}
The problem is when I return these string, the element is not shown as html element, but as text which you can read. Is there any possibility returning these string as html element?

While binding html on view in angular js you need to use ng-bind-html directive. But before binding html, you need to sanitize that html by using $sce.trustAsHtml method of ngSanitize module.
<div align="right" ng-bind-html="chooseHtmlElement() | trustedhtml"></div>
Filter
app.filter('trustedhtml',
function($sce) {
return $sce.trustAsHtml;
}
);

you can use
ngSanitize
There are 2 steps:
include the angular-sanitize.min.js resource, i.e.:
<script src="lib/angular/angular-sanitize.min.js"></script>
In a js file (controller or usually app.js), include ngSanitize, i.e.:
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])
$refrence

Instead of returning element from controller to HTML use $element to add/append content from controller to HTML. Find your DIV element using angular.element.
var tag = your return elements.
var ele = $compile(tag)($scope);
angular.element('div').append(ele);

For Sanitizing an html string
, Include following module and js in your code,
<script src="//code.angularjs.org/1.4.7/angular-sanitize.js"></script>
angular.module('app', [
'ngSanitize'
]);
Bind scope like,
<div align="right" ng-bind-html="chooseHtmlElement()"></div>

How to load external html template?

Given HTML code such :
<!-- 2. Anchor -->
<div id="anchor">This div is the <b>#anchor</b>.</div>
<!-- 3. Template -->
<script id="tpl" type="text/template">
{{#people}}
<div><img src="{{photo}}"><b>{{family}} {{name}}</b> — {{title}}, {{place}} : {{introduction}}.</div>
{{/people}}
</script>
Given JS/Handlebars such as :
<!--4. Handlebars.js slingshot -->
//4a.function creation
var slingshot = function (url, tplId, anchor) {
$.getJSON(url, function(data) {
var template = $(tplId).html();
var stone = Handlebars.compile(template)(data);
$(anchor).append(stone);
});
}
slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both notations.
How to externalize the my 3. Template (#tpl) into a proper .txt text file (or other extension) ? How to load it back ? so I may use the same template into various .html webpages.
Full code : http://bl.ocks.org/hugolpz/8075193 / http://bl.ocks.org/hugolpz/raw/8075193/

Put the following template content into a file named test.handlebars
{{#people}}
<div><img src="{{photo}}">
<b>
{{family}} {{name}}
</b> — {{title}},
{{place}} : {{introduction}}.
</div>
{{/people}}
Write a function which will use the template as below
function getTemplate(name) {
if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
$.ajax({
url : name + ".handlebars",
success : function(data) {
if (Handlebars.templates === undefined) {
Handlebars.templates = {};
}
Handlebars.templates[name] = Handlebars.compile(data);
},
async : false
});
}
return Handlebars.templates[name];
}
In the main program you can write the below statement to insert the template contents into div with id="anchor", as shown below
var Template = getTemplate("test")
this.$("#anchor).append(Template(data));
where data is the contents of a json file or some db query output which will give you the values meant for the following attributes in json format
people, twitter, name, family, photo, title, place, introduction

I'm assuming you have already compiled your template. So you can use the technique I have described in Bootstrapping Multiple Instances of an HandlebarsJS Template Into a Page.
Hook and libs
Place this in your index.html:
<div class="hook" data-json="data/whatever.json"></div>
and the JavaScript libs
<!-- Helper to inject data-set in templates instance -->
<script src="scripts/template-loader.js"></script>
<!-- Get the (compiled) template -->
<script src="scripts/myTemplate.hbs.js"></script>
template-loader.js helper
$(function(){
'use strict';
var compiledTemplate = myApp.Templates['app/templates/myTemplate.hbs'];
$('.hook').each(function(i, h){ # h = current hook
var url = $(h).data('json'); # data-set's url
$.getJSON(url).then(function (json) { # fetch data-set
var tpl = compiledTemplate( json ); # inject data into template
$(h).html(tpl); # inflate template in page
});
});
});
Please read the complete article for further details.

HTML table to Excel --> TEMP File could not be found?

I need to put a certain table into an Excel table.
I am using the solution to this question:
HTML Table to Excel Javascript
I left the JS unchanged, like this:
<script type="text/javascript">
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (table, name, filename) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = filename;
document.getElementById("dlink").click();
}
})()
</script>
This is the HTML I use to trigger the download:
The anchor:
<a id="dlink" href="#testTable" style="display:none;"></a>
The button:
<input type="button" onclick="tableToExcel('testTable', 'testTable', 'myExport.xls')" value="Export to Excel">
The table attributes:
<table data-name="testTable" id="testTable" summary="All members" rules="groups" frame="hsides" border="2">
Once I click the button, it opens Excel and gives me the following error:
'C:\users\username\AppData\Local\Temp\myExport.xls' could not be found. Check the spelling (insert rest of microsoft BLA here)
Any help appreciated!
Just found out the following:
IE == NOT EVEN WORKING
Chrome == Gives me file, but leaves some fields filled with the value 'тВм0'.
FireFox == 'C:\users\username\AppData\Local\Temp\myExport.xls' could not be found. Check the spelling (insert rest of microsoft BLA here)

Since this topic received 0 feedback i found this thread after searching a while.
html to excel export with .xls extension in javascript or php
This gave me the solution. I hope it helps others too.