I am using razor to generate a javascript in razor loop however i am unable to use variable in it
This is my code
<script>
$(function () {
#Html.Raw("$('##Html.IdFor(m => m.DG['#i'].status_code)').on('change', function () { Dg_Calculate('#i');});")
#Html.Raw("$('##Html.IdFor(m => m.DG['#i'].belasting)').on('change', function () { Dg_Calculate('#i'); });")
#Html.Raw("$('##Html.IdFor(m => m.DG['#i'].max_belasting)').on('change', function () {Dg_Calculate('#i');});")
$("#txtDate").datepicker();
});
function Dg_Calculate(item) {
alert(item);
}
</script>
Here in the generated code "#i" is coming as it is and not value of "i"
Your string that is passed to #Html.IdFor is treated as string, so using # inside it means nothing.
You can alternatively use string interpolation, and your code should look something like:
<script>
$(function () {
#for (var i = 0; i < 15; i++) {
#Html.Raw($"$('#{Html.IdFor(m => m.DG[i].status_code)}').on('change', function () {{ Dg_Calculate({i});}});")
#Html.Raw($"$('#{Html.IdFor(m => m.DG[i].belasting)}').on('change', function () {{ Dg_Calculate({i});}});")
#Html.Raw($"$('#{Html.IdFor(m => m.DG[i].max_belasting)}').on('change', function () {{ Dg_Calculate({i});}});")
}
$("#txtDate").datepicker();
});
function Dg_Calculate(item) {
alert(item);
}
</script>
I think I understand what you are trying to achieve - whenever any of the 14 elements that has the following classes status_code, belasting, max_belasting you want to call the Dg1_Calculate function.
If this is the case then this is more easily achieved in Javascript itself rather than trying to write Razor code to generate Javascript. It looks like you're using jQuery syntax so how about something like this:
#section Scripts {
<script type="text/javascript">
$('.status_code,.belasting,.max_belasting').on('change', function()
{
var index = $('.status_code,.belasting,.max_belasting').index(this);
Dg_Calculate(index);
});
function Dg_Calculate(index) {
console.log(index)
}
</script>
}
You will probably also need to include the jQuery library above your script section/in your layout template if it is not already done, something like:
#Scripts.Render("~/bundles/jquery")
For reference see the Javascript Libraries section, and jQuery multiple selector.
Related
I'm trying to access an nested object within an lamda function. The object looks similar to this:
{
foo: function(){
return {
'bar': "success"
}
}
}
when I try to access it with {{foo.bar}} it returns an empty string. If I wrap it with {{#foo}}{{bar}}{{/foo}} it works. Is this intentional ? Is there any way i can make the first statement work ? The templates are already in use for mustache.php and i'm trying to make then work in the frontend as well.
Here is a working demonstration of the problem:
var obj = {
foo: function(){
return {
'bar': "success"
}
}
};
var source = document.getElementById("template").innerHTML;
var template = Handlebars.compile(source);
document.getElementById("output").innerHTML = template(obj);
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<script id="template" type="text/x-handlebars-template">
nested: {{#foo}}{{bar}}{{/foo}} <br/>
dot notation: {{foo.bar}}
</script>
<div id="output"></div>
How can I reference a template helper from another one? For example...
Template.XXX.helpers({
reusableHelper: function() {
return this.field1 * 25 / 100; //or some other result
},
anotherHelper: function() {
if (this.reusableHelper() > 300) //this does not work
return this.reusableHelper() + ' is greater than 300';
else
return this.reusableHelper() + ' is smaller than 300';
}
});
I have also tried Template.instance().__helpers.reusableHelper - all with no luck.
Alternatively is there a way to define reactive Template instance variables?
XXX is a sub-template that renders multiple times on the same page.
You can but only with global template helpers.
Blaze._globalHelpers.nameOfHelper()
Here is an example calling Iron:Router's pathFor global helper.
Template.ionItem.helpers({
url: function () {
var hash = {};
hash.route = path;
hash.query = this.query;
hash.hash = this.hash;
hash.data = this.data;
var options = new Spacebars.kw(hash);
if (this.url){
return Blaze._globalHelpers.urlFor(options)
} else if( this.path || this.route ) {
return Blaze._globalHelpers.pathFor(options)
}
}
});
EDIT: To your second question. You can call the same template as many times as you like on a page and pass different data attributes directly into it and/or use #each block template wrapper to iterate over data. #each will call a template many times giving it a different data context each time.
#each Example
<template name="listOfPosts">
<ul>
{{#each posts}}
{{>postListItem}} <!--this template will get a different data context each time-->
{{/each}}
</ul>
</template>
Attributes Example
<template name="postDetails">
{{>postHeader title="Hello World" headerType="main" data=someHelper}}
{{>postHeader title="I am a sub" headerType="sub" data=newHelper}}
{{>postBody doc=bodyHelper}}
</template>
This like using of common code, you can make another javascript function which contains the your reusable code and call it from wherever you required.
Like in your code-
function calcField(field){
return field * 25 / 100
}
and in you template helper-
Template.XXX.helpers({
reusableHelper: function() {
return calcField(this.field1);
},
anotherHelper: function() {
if (calcField(this.field1) > 300)
return calcField(this.field1) + ' is greater than 300';
else
return calcField(this.field1) + ' is smaller than 300';
}
});
and
Alternatively is there a way to define reactive Template instance
variables?
you can use Session variables or Reactive variable
Disclaimer: This may not answer your question directly, but it might be helpful for people stuck with a similar use case:
Sometimes it's easy to get locked into the "Meteor way", that standard Javascript rules are forgotten.
Two use cases that sound similar to what you're trying to do:
1. For helpers/events that you can access anywhere on the client-side, simply set a global helper.
Put this in, say, client/helpers.js:
Helpers = {
someFunction: function(params) {
/* Do something here */
}
}
Now Helpers.someFunction() is available to all templates.
If you want to bind the local template instance to it for some reason, again, it's standard JS:
var boundFunction = Helpers.someFunction.bind(this);
2. To create reusable Blaze helpers inside of templates, use Template.registerHelper
For example, this function uses the "numeral" library to format numbers:
Template.registerHelper('numeral', function(context, opt) {
var format = (opt.hash && opt.hash.format) || '0,0.00';
return numeral(context || 0).format(format);
});
You can use this in any template like so:
{{numeral someNumberVariable format='0,0'}}
I found a better solution with collection hooks:
Item = new Mongo.Collection('Items');
Item.helpers({
isAuthor: function(){
return this.authorId == Meteor.userId();
},
color: function(){
if(this.isAuthor())
return 'green';
else
return 'red';
}
});
I then becomes functions of this, usable in both helpers and templates.
i had something similar -- i had 2 helpers in the same template that needed access to the same function. however, that function 1) needed access to a reactive var in the template, and 2) is a filter function, so i couldn't just pass in the data of that reactive var.
i ended up defining the filter function in the templates onCreated() and stored it in a reactive var, so the helpers could access it.
Template.Foo.onCreated(function () {
this.fooData = new ReactiveVar();
function filterFoo(key) {
var foo = Template.instance().fooData.get();
// filter result is based on the key and the foo data
return [true|false];
}
this.filterFoo = new ReactiveVar(filterFoo);
});
Template.Foo.helpers({
helper1: function() {
var filterFn = Template.instance().filterFoo.get();
return CollectionA.getKeys().filter(filterFn);
},
helper2: function() {
var filterFn = Template.instance().filterFoo.get();
return CollectionB.getKeys().filter(filterFn);
},
});
Since this answer is currently missing - I wanted to add an update
In the current meteor version, you should be able to call:
var TEMPLATE_NAME = //the name of your template...
var HELPER_NAME = //the name of your helper...
Template[TEMPLATE_NAME].__helpers[' '+HELPER_NAME]
You should call it like this, if you want to make sure the helper has access to this:
var context = this;
Template[TEMPLATE_NAME].__helpers[' '+HELPER_NAME].call(context,/* args */);
But be careful - this could break in future Meteor versions.
Adding on to Nils' answer, I have been able to access Template level helpers in events using the following code:
'click a#back': (event, instance) ->
if instance.view.template.__helpers[' complete']() && instance.view.template.__helpers[' changed']()
event.preventDefault()
this just came up again at work, and this time we used modules. in this case, we had a number of large, related functions that had to maintain data across calls. i wanted them outside the template file but not totally polluting the Meteor scope. so we made a module (polluting the Meteor scope 1x) and called the functions therein from the template.
lib/FooHelpers.js:
FooHelpers = (function () {
var _foo;
function setupFoo(value) {
_foo = value;
}
function getFoo() {
return _foo;
}
function incFoo() {
_foo++;
}
return {
setupFoo: setupFoo,
getFoo: getFoo,
incFoo: incFoo
}
})();
FooTemplate.js:
Template.FooTemplate.helpers({
testFoo: function() {
FooHelpers.setupFoo(7);
console.log(FooHelpers.getFoo());
FooHelpers.incFoo();
console.log(FooHelpers.getFoo());
}
});
console output is 7, 8.
I am trying to make a template render something on the client; I think I tried everything possible (apart from the correct thing apparently).
Html:
<head>
<title>Groups</title>
</head>
<body>
{{loginButtons}}
{{>TplGroups}}
</body>
<template name="TplGroups">
groups found: {{ GroupCount }}
{{#each GetAllGroups}}
<div> hello, {{name}} group! </div>
{{/each}}
</template>
serverStartup.js:
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
Meteor.publish("GroupCount"), function()
{
return Groups.find({});
}
});
}
and the Groups.js collection which exposes the two methods GroupCount and GetAllGroups, which I want to access on client side:
var Groups = new Meteor.Collection("groups");
Groups.insert({name: "John"});
if(Meteor.is_client)
{
Meteor.subscribe("GetAllGroups");
Meteor.subscribe("GroupCount");
Template.TplGroup.GetAllGroups = function()
{
return Groups.find({});
}
Template.TplGroup.GroupCount = function()
{
return Groups.find().count();
}
}
I have removed "insecure" and "autopublish" packages.
Where is my mistake? The two functions won't show on client.
Also what is the difference between declaring the functions as "publish" or declaring them as Template functions?
In browser console I get this:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. (jquery.js)
The publish method should look more or less like this
Meteor.publish("GetAllGroups", function () {
return Groups.find({});
});
#apendua pointed to the right solution. I took your code and refactored it to make the solution a little clearer:
server.js:
if (Meteor.isServer) {
// Publish groups
Meteor.publish('groups', function() {
return Groups.find();
});
}
groups.js
Groups = new Meteor.Collection('groups');
Groups.insert({name: 'John'});
if (Meteor.isClient) {
// Subscribe to groups
Meteor.subscribe('groups');
Template.TplGroup.GetAllGroups = function() {
return Groups.find();
}
Template.TplGroup.GroupCount = function() {
return Groups.find().count();
}
}
It is enough to publish just groups. In your groups.js you try to subscribe to a publication that does not exist (GetAllGroups). Better to just publish and subscribe to simply 'groups' and return the groups count as described above. Also with a newer version of meteor you should use Meteor.isClient and not Meteor.is_client.
The jQuery error you described is not related to your code and appears (at least what I think) because of some issue with Meteor and/or jQuery itself. Don't worry about that.
oups you just forgot "s" in your template name in your js file :
<template name="TplGroups"> <!-- what you wrote -->
and in your js you wrote :
Template.TplGroup.xxx
instead of :
Template.TplGroups.xxx
I'm using the following jQuery script to send a 'Make' parameter to filter my 'Models':
$(document).ready(function () { $(".autocomplete_make").autocomplete("/AutoComplete/Make.ashx"); });
$(document).ready
(function () {
$(".autocomplete_model").autocomplete("/AutoComplete/Model.ashx"
, extraParams: {
make: function() {return $(".autocomplete_make").val(); }
}
);
});
The text entered is passed to the .ashx file as a 'q' querystring, however, I'm not sure how I access my extraParam 'Make' so I can pass this to my stored procedure in the Generic Handler file. How do I do this?
Thanks,
Curt
It should be as simple as:
context.Request("make")
Which I believe you know already.
The only other problem I see is that your javascript looks a little flawed because you are not passing in an object as the second parameter (the options).
Here is the corrected code (I hope):
$(document).ready(function () {
$(".autocomplete_model").autocomplete("/AutoComplete/Model.ashx", {
extraParams: {
make: function() {
return $(".autocomplete_make").val();
}
}
});
});
I have the following situation with an autocomplete plugin on an .aspx page. It is working fine. The result from the autocomplete search yields a product id and a product description is concatenated with it (i.e. 2099 -- A Product). I know that I need to use split() with this but where do I put it? I'm still rather new to jQuery and javascript.
$(document).ready(function() {
$('.divAutoComplete').autocomplete("LookupCodes.aspx?type=FC", {
mustMatch: true
});
});
If it's the same autocomplete I've used (by Tomas Kirda) you should be able to add an onSelected event like so:
$(document).ready(function() {
$('.divAutoComplete').autocomplete("LookupCodes.aspx?type=FC", {
mustMatch: true,
onSelect: function(value, data) { autoCompleteSelected(value, data); }
});
});
function autoCompleteSelected(value, data) {
var parts = data.split("--");
... do something with parts
}
Obviously, if it's not the then it will have different events
In JavaScript, any string can be split using the split function like so:
"Pandas enjoy tasty bamboo".split(' ')
The above splits the string on spaces returning the following array:
["Pandas", "enjoy", "tasty", "bamboo"]
Any string can be fed to the split function and it'll cope with multi-character strings just fine.
Now as for your question with the jQuery autocomplete plugin, you'll need to have your .aspx page return a JS array of options in order for it to work. Alternatively, you can load the data some other way and then pass an array to autocomplete. If the server returns an array like the following then you can pass it directly:
["1234 -- Chicken", "4321 -- Noodle", "1432 -- Irrational Monkeys"]
The point is that autocomplete uses an array for matching.
The docs for the autocomplete plugin seem decent enough.
do this code for splitting
<script type="text/javascript">
$(function() {
var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags").autocomplete({
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
</script>