I can't set a variable name in a class in jade:
.flag_#{ session.locale } #{ session.locale }
I have:
<div class="flag_" >en</div>
And I'd like to have
<div class="flag_en" >en</div>
Thanks
Try this (have not tested):
div(class="flag_#{ session.locale }") session.locale
As for pug#2.0.0-alpha3 works this way:
div(class="flag_" + session.locale) session.locale
Here's another approach:
mixin formButton(text, type, extra_classes)
- var default_classes = 'btn btn-primary'
if extra_classes
- var classes = default_classes + ' ' + extra_classes
else
- var classes = default_classes
if type
button(class=classes type=type) !{text}
else
button(class=classes type="submit") !{text}
Example 1:
Usage:
+formButton('Text')
Result:
<button type="text" class="btn btn-primary" type="submit">Text</button>
Example 2:
Usage:
+formButton('Text', 'button')
Result:
<button type="text" class="btn btn-primary" type="button">Text</button>
Example 3:
Usage:
+formButton('Text', 'button', 'extra-class')
Result:
<button type="text" class="btn btn-primary extra-class" type="button">Text</button>
You can also use conditional statements to do this like
if liked == true
span.like.active
else
span.like
You can also use a template literal:
- const session = { locale: 'en' }
div(class=`flag_${session.locale}`) #{session.locale}
//- Just to show more options:
div(class=`flag_${session.locale}`)= session.locale
div(class=`flag_${session.locale}`) Current language is #{session.locale}
div(class=`flag_${session.locale}`)= `Current language is ${session.locale}`
Output (using Pug 2.0.4):
<div class="flag_en">en</div>
<div class="flag_en">en</div>
<div class="flag_en">Current language is en</div>
<div class="flag_en">Current language is en</div>
Related
I have here a sample document from mongodb named chapters:
{_id:5c014c999cc48c3b0057988b, chapter_name:"AB"}
Controller: here is my function to get the chapters, and function to post to another db:
.controller('regCtrl', function($http, $location, $timeout, User, Bloodbankchapter) {
Bloodbankchapter.getBloodbankchapters().then(function(data) {
app.bloodbankchapters = data.data.bloodbankchapters;
});
this.regUser = function(regData) {
User.create(app.regData).then(function(data) {});
};
Then in my front-end to register:
<form name="regForm" ng-submit="register.regUser(regData); ">
<label>Chapter Name</label> <!--After I select the chapter name -->
<select ng-model="register.regData.branch" ng-options ="chapter._id as chapter.chapter_name for chapter in register.bloodbankchapters">
<option ng-repeat="chapter in register.bloodbankchapters" >{{chapter.chapter_name}}</option>
</select>
<label>Chapter ID</label> <!--chapter ID will appear here-->
<input type="text" ng-model="register.regData.branch_id" hidden>
<label>Chapter name</label> <!--How to make chapter name appear here?-->
<input type="text" ng-model="register.regData.branch_name" hidden>
<button ng-disabled="register.disabled" type="submit">Submit</button>
</form>
My problem here is after I selected the chapter name the second input was correct and it post the id into the db, but how can I get the chapter.name and post it to db?
I tried getting the text value from the select box and then appending it to a textbox like here: http://jsfiddle.net/kxqJN/, but when I register, the object id is being registered instead of chapter_name like this:
`{branch_id:5c014c999cc48c3b0057988b, branch_name:"5c014c999cc48c3b0057988b"}`
How can I display the name in the first box and the id in the second?
I bet you haven't tried what i suggested in the comments: chapter.chapter_name for chapter in register.bloodbankchapters track by chapter._id will lead you to have both values in your model:
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.register = {
regData: {
branch: {},
},
bloodbankchapters: [
{_id:'5c014c999cc48c3b0057988b', chapter_name:"AB"},
{_id:'5c014c999cc48c3b0057988c', chapter_name:"A"},
],
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<select ng-model="register.regData.branch" ng-options ="chapter.chapter_name for chapter in register.bloodbankchapters track by chapter._id">
<option ng-repeat="chapter in register.bloodbankchapters" >{{chapter.chapter_name}}</option>
</select>
<div>{{register.regData.branch}}</div>
</div>
Try this way, you will get selected chapter object inside register.regData.branch
<select ng-model="register.regData.branch" ng-options ="chapter as chapter.value for chapter in register.bloodbankchapters">
I am using underscore temperating in jade.
index.jade
extends layout
block content
.wrap
.container-fluid#container
script(type='text/template' id='main-template')
.row
.col-xs-8.col-sm-9
.heading h2 Welcome to the Node Chatroom
hr/
.content
ul.list-group#chatList
.col-xs-4.col-sm-3
.sidePanel
.panel-heading
h3.panel-title Online Users
span.badge pull-right#userCount
hr/
.panel-body
ul.list-group#userList
.push
.footer
.container-fluid
.row
form
.form-group
.col-xs-8.col-sm-9
input(type="text" id="chatInput" class="form-control input-lg" placeholder="Write a message here..." rows="3")
.col-xs-4.col-sm-3
button(id="send-message-btn" class="btn btn-primary btn-lg btn-block" type="submit") Send Message
script(type='text/template' id='login-template')
.row
.col-md-4.col-md-offset-4.text-center
.login
.form-group
label Enter name
input(type="text" class="form-control" id="nameText")
.btn-group
button(id="name" type="button" class="btn btn-primary btn-lg") Login
Main.js
var LoginView = Backbone.View.extend({
template: _.template($('#login-template').html()),
events: {
'click #name': 'onLogin'
},
initialize: function(options) {
this.vent = options.vent;
this.listenTo(this.model, "change:error", this.render, this);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
onLogin: function() {
//this.l.start();
this.vent.trigger("login", this.$('#nameText').val());
}
});
It is showing TypeError: n is undefined on line template: _.template($('#login-template').html()),
I have tried using . after script as proposed in jade doc . but it didn't work.
Looks like underscore cant access the #login-template id. Any reason why?
I was also getting same error. Then below one solved me.
var template= _.template($('#myTemplate').html());
This may help you.
typeerror-n-is-undefined-in-underscore-min-js
Hi I hope someone can help on the client details page I need to hide the Email forwarding button and the DNS management button if the client has selected custom nameservers. I just can't work it out son any help is much welcomed ..Here is the code that takes the input;
<form method="post" action="{$smarty.server.PHP_SELF}?action=domaindetails">
<input type="hidden" name="sub" value="savens">
<input type="hidden" name="id" value="{$domainid}">
<p><input type="radio" name="nschoice" value="default" id="nschoicedefault" onclick="usedefaultns()"{if $defaultns} checked{/if} /> <label for="nschoicedefault">{$LANG.nschoicedefault}</label><br />
<input type="radio" name="nschoice" value="custom" id="nschoicecustom" onclick="usecustomns()"{if !$defaultns} checked{/if} /> <label for="nschoicecustom">{$LANG.nschoicecustom}</label></p>
And here is the code for the buttons;
{if $emailforwarding}
<td><form method="post" action="{$smarty.server.PHP_SELF}?action=domainemailforwarding">
<input type="hidden" name="domainid" value="{$domainid}">
<p align="center">
<input type="submit" value="{$LANG.domainemailforwarding}" class="button">}
</p>
</form></td>
{/if}
{if $dnsmanagement}
<td><form method="post" action="{$smarty.server.PHP_SELF}?action=domaindns">
<input type="hidden" name="domainid" value="{$domainid}">
<p align="center">
{<input type="submit" value="{$LANG.domaindnsmanagement}" class="button">}
</p>
</form></td>
{/if}
I suggest writing a helper function and calling it at the top of the tpl file
and passing the domain id to it.
You can then use the WHMCS internal API function Domain Nameservers to get the domains nameservers then compare them against the default nameservers in the tblconfiguration in the WHMCS database.
Something like this
{php}
// include our helper php file
require_once(dirname(__FILE__).'/Helper.php');
//get domain id from our template variables
$domainid = $this->get_template_vars('domainid');
//call to our helper function passing the domain ID
$hasCustomeNameServers = Helper::hasCustomNameServers($domainid);
//Once we've compared the nameservers agains the default ones we write
//our binary check to the template
if($hasCustomeNameServers >0){
$this->assign('hasCustomeNameServers',true);}
{/php}
Then in side our Helper.php we have something like the following
<?php
class Helper {
public static function hasCustomNameServers($domainid) {
$isCustom = 0;
//Interal API call to get the domains nameservers
$command = "domaingetnameservers";
$adminuser = "admin";
$values["domainid"] = $domainid;
$results = localAPI($command,$values,$adminuser);
//get default nameservers
$defautName1 ='';
$sql = mysql_query('SELECT value FROM tblconfiguration '.
' WHERE setting = "DefaultNameserver1"');
if ($res = mysql_fetch_assoc($sql)) {
$defautName1 = $res["value"];}
$defautName2 ='';
$sql = mysql_query('SELECT value FROM tblconfiguration '.
' WHERE setting = "DefaultNameserver2"');
if ($res = mysql_fetch_assoc($sql)) {
$defautName2 = $res["value"];}
//compare results
foreach ($results as &$value) {
if($value == $defautName1 || $value == $defautName2){
$isCustom++;
}
}
return $isCustom;
}
}
Now it's simply a matter on the template to wrap the {if $emailforwarding} and the {if $dnsmanagement} blocks around our check {if !hasCustomeNameServers}
I hope this helps you in the right direction this is by no means a comprehensive answer but is a guide towards the approach I think you should take in implementing your solution.
If I have a text and I only want to allow the user enter text between 5 and 10 characters long, how do I do this using javascipt?
I have tried using mix and max functions but they only works for numeric data.
You could do something like this:
`
function checkLength(){
var textbox = document.getElementById("textbox");
if(textbox.value.length <= 10 && textbox.value.length >= 5){
alert("success");
}
else{
alert("make sure the input is between 5-10 characters long")
}
}
</script>
<input type="text" id="textbox"></input>
<input type="submit" name="textboxSubmit" onclick="checkLength()" />
`
You need to use the maxlength attribute for input fields, something like this should do it:
<input name="myTextInput" type="text" maxlength="5"></input>
You can use "maxlength" attribute to not allow more than x characters & do validation using javascript for min length.
see this example: http://jsfiddle.net/nZ37J/
HTML
<form id="form_elem" action="/sdas" method="post">
<input type="text" id="example" maxlength="10"></input>
<span id="error_msg" style="color:red"></span>
<input type="button" id="validate" value="validate"></input>
</form>
Javascript:
$("#validate").click(function(){
var inputStr = $("#example").val();
if(inputStr.length<5)
$("#error_msg").html("enter atleast 5 chars in the input box");
else
$("#form_elem").submit();
})
I did a bit of a mix of the samples above trying to make it as simple as possible and avoid unnecessary alerts.
Script:
function checkLength(){
var textbox = document.getElementById("comment");
if(textbox.value.length <= 500 && textbox.value.length >= 5){
return true;
}
else{
alert("Your comment is too short, please write more.");
return false;
}
}
code in the form field would be: onsubmit="return checkLength();">
And the text area in the form itself:
<label for="comment">*Comment:</label>
<textarea name="comment" id="comment" rows="4" cols="40" required="required"></textarea>
hope this helps!
<input name="myTextInput" type="text" minlength="5" maxlength="10"></input>
This would do the trick if you do not want to trouble with js.
I am an absolute beginner in node.js and geddy. I've followed a few tutorials and now I try to write something similar for my purposes.
When I try to create a new item, though, I get the following message:
/arithmetic_problem_types/function%20(id)%20%7B%20%20%20%20%20%20options.id%20=%20id;%20%20%20%20%20%20return%20helpersBase.urlFor.action(options);%20%20%20%20%7D not found.
I have no idea where this could come from. I've looked through the code and found nothing.
Controller:
var ArithmeticProblemTypes = function () {
this.respondsWith =[ 'html', 'json', 'xml', 'js', 'txt'];
this.index = function (req, resp, params) {
var self = this;
geddy.model.ArithmeticProblemType.all(function (err, arithmetic_problem_types) {
self.respond({
params: params, arithmetic_problem_types: arithmetic_problem_types
});
});
};
this.add = function (req, resp, params) {
this.respond({
params: params
});
};
this.create = function (req, resp, params) {
var self = this, arithmetic_problem_type = geddy.model.ArithmeticProblemType.create({
name: '1', title: 'open', numberType: '1', numberRanges: '1', operators: '1', askedFor: '1', specialProblemCategory: '1', askedForNumDenomOrBoth: '1',
reducedFractions:'1', mixedFractions: '1'
});
arithmetic_problem_type.save(function (err, data) {
if (err) {
params.errors = err;
self.transfer('add');
} else {
self.redirect({
controller: self.name
});
}
});
};
....................................................................
};
exports.ArithmeticProblemTypes = ArithmeticProblemTypes;
add.html.ejs
<div class="hero-unit">
<%= partial('_form', {params: params}); %>
</div>
index.html.ejs
<div class="hero-unit">
<h2>Arithmetic Problem Types List</h2>
<%- linkTo('Create a new Aritmetic Problem Type', addArithmeticProblemTypePath, {class: 'btn pull-right'}) %>
</div>
<% if (arithmetic_problem_types && arithmetic_problem_types.length) { %>
<% for (var i in arithmetic_problem_types) { %>
<div class="row todo-item">
<div class="span8">
<h3><%- linkTo(arithmetic_problem_types[i].title, arithmeticProblemTypePath(arithmetic_problem_types[i].id)) %></h3>
</div>
<div class="span4"><h3><i class="icon-list-alt"></i><%= arithmetic_problem_types[i].status; %></h3></div>
</div>
<% } %>
<% } %>
How can I get rid of that message and make it work?
EDIT:
This is the beginning of the _form.html.ejs file:
<%
var isUpdate = params.action == 'edit'
, formTitle = isUpdate ? 'Update this Arithmetic Problem Type' : 'Create a new Arithmetic Problem Type'
, action = isUpdate ? arithmeticProblemTypePath(params.id) + '?_method=PUT' : arithmeticProblemTypePath
, deleteAction = isUpdate ? arithmeticProblemTypePath(params.id) + '?_method=DELETE' : ''
, btnText = isUpdate ? 'Update' : 'Add'
, nameValue = isUpdate ? arithmeticProblemTypePath.name : ''
, errors = params.errors;
%>
<form id="arithmetic-problem-type-form" class="form-horizontal" action="<%= action %>" method="POST">
....
</form>
EDIT2:
Inspecting the page where I should write the name of the item and click the add button, I've found this
<div class="hero-unit">
<form id="arithmetic-problem-type-form" class="form-horizontal" action="function (id) {
options.id = id;
return helpersBase.urlFor.action(options);
}" method="POST">
<fieldset>
<legend>Create a new Arithmetic Problem Type</legend>
<div class="control-group">
<label for="title" class="control-label">Title</label>
<div class="controls">
<input class="span6" name="name" placeholder="enter name" type="text">
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Add">
</div>
</fieldset>
</form>
</div>
Indeed the message comes from the action attribute of the form element, but how can I solve it?
The message is telling you that the requested URL could not be found. AKA 404
/arithmetic_problem_types/function%20(id)%20%7B%20%20%20%20%20%20options.id%20=%20id;%20%20%20%20%20%20return%20helpersBase.urlFor.action(options);%20%20%20%20%7D
is definitely not a nice looking url. So i'm assuming there's something wrong with your form's action attribute. If that's what happened when you validate the form.
If that's what happened when you click the link to "Create a new arithmetic problem type" then you should probably put parenthesis after addArithmeticProblemTypePath