const dummydata = [
{ id: 1, description: "Walk the dog", completed: false },
{ id: 2, description: "Play football", completed: true }
];
This is my data I use to create classes in HTML like this:
this.root.innerHTML = `
<div ${data.completed ? "class=todo-item done" : "class=todo-item"}> # Does not work
<input type="checkbox" ${data.completed ? "checked" : ""} />
<h4>${data.description}</h4>
</div>`;
In my HTML it looks this this:
<div class="todo-item" done>
"done" is not included in the class. What am I doing wrong?
Try this,
this.root.innerHTML = `
<div class="${data.completed ? 'todo-item done' : 'todo-item'}">
<input type="checkbox" ${data.completed ? "checked" : ""} />
<h4>${data.description}</h4>
</div>
`;
Your issue is with missing quotes
<div class=todo-item />
will be parsed by the browser to:
<div class="todo-item" />
and
<div class=todo-item done />
will be parsed by the browser to:
<div class="todo-item" done />
So leaving off the quotes is valid, unless you have a space
A shorter notation is:
this.root.innerHTML = `
<div class="todo-item ${data.completed ? 'done' : ''}">
<input type=checkbox ${data.completed ? 'checked' : ''}/>
<h4>${data.description}</h4>
</div>`;
Also note the type=checkbox without quotes notation, the Browser will add quotes
Related
Html
<input type="text" class="fulltextbox saving_field" dataid="1" dataname="temperature" dataunit="° F" ng-model="addVt.Temp.value" />
js
var tData = [];
angular.forEach(angSel('.saving_field'), function(v, k){
console.log(v.dataname);
tData.push({id: v.dataid, name: v.dataname, value: v.value, unit: v.dataunit});
});
But I am getting v.dataname as undefined.
You should be using the following attribute to access it:
v.dataset
Also, the data attributes should have a hyphen in them. Like data-name and not dataname.
So HTML would be:
<input type="text" class="fulltextbox saving_field" data-id="1" data-name="temperature" data-unit="° F" ng-model="addVt.Temp.value" />
And in Javascript:
tData.push({id: v.dataset.id, name: v.dataset.name, value: v.value, unit: v.dataset.unit});
See the documentation on how to properly use data attributes.
In my use case I am using tag tag-it to get tags from user. I am getting the tags input in html <ul> form. I am using golang in server side.
html:
<form class="comment-form" action="/add/" method="POST" enctype="multipart/form-data">
<div class="form-input">
<label for="tags_label">Tags</label>
<ul id="tags">
<script type="text/javascript">
$("#myTags").tagit();
var tagsArray = ["C", "C++", "Go", "Ruby"];
$("#tags").tagit({
itemName: "teamId",
fieldName: "teamName",
availableTags: tagsArray,
allowSpaces:true,
caseSensitive:false,
removeConfirmation:true,
placeholderText:"Tags",
tagLimit: 5,
allowDuplicates: false,
singleFieldDelimiter: ',',
onlyAvailableTags: false
});
</script>
</ul>
</div>
</form>
and in server end I am trying to get the value like below similar to other fields in the form,
tags := r.FormValue("tags")
log.Printf("Tags : ", tags)
But it is not working. Could someone help me with this?
EDIT:
When I inspect the element this is what I see,
<div class="form-input">
<label for="tags_label">Tags</label>
<ul id="tags" class="tagit ui-widget ui-widget-content ui-corner-all">
<script type="text/javascript">
$("#myTags").tagit();
var tagsArray = ["C", "C++", "Go", "Ruby"];
$("#tags").tagit({
itemName: "teamId",
fieldName: "teamName",
availableTags: tagsArray,
allowSpaces:true,
caseSensitive:false,
removeConfirmation:true,
placeholderText:"Tags",
tagLimit: 5,
allowDuplicates: false,
singleFieldDelimiter: ',',
onlyAvailableTags: false
});
</script><li class="tagit-new"><input type="text" class="ui-widget-content ui-autocomplete-input" placeholder="Tags" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></li>
</ul>
</div>
Found the problem: you expected a single field but you didn't specify it in the options of tag-it. Use it as following (added some comments for clarity):
<script type="text/javascript">
$("#myTags").tagit();
var tagsArray = ["C", "C++", "Go", "Ruby"];
$("#tags").tagit({
fieldName: "teamName", // The name of the hidden input field
availableTags: tagsArray,
allowSpaces:true,
caseSensitive:false,
removeConfirmation:true,
placeholderText:"Tags",
tagLimit: 5,
allowDuplicates: false,
singleField: true, // Use a hidden input element with the fieldName name
singleFieldDelimiter: ',', // Optional, default value is same.
onlyAvailableTags: false
});
</script>
During runtime (and entering tags) a hidden <input> will be used, with the tag that you specified in the tag-it options.
<input type="hidden" style="display:none;" value="Go,another value,C" name="teamName">
In Go, handle it as following (you missed the %s in Printf):
tags := r.FormValue("teamName")
log.Printf("Tags: %s", tags)
You can then split the tags with strings.Split.
The page I'm working on displays content from a database in readonly input box. My problem is that it's displaying any special characters as the html code (ie: & displays as &). How do you get the code to display properly?
I'm using QuerySingle to connect to the database, don't know if that makes a difference. I'm new to using Razor. Any help is much appreciated.
Code in question:
var queryloan = "SELECT * FROM loans WHERE LoanId = #0";
var queryloandata = db.QuerySingle(queryloan, queryformstatus_submitted.doc_loanid);
<form class="jotform-form" action="submit-form.cshtml?isadmin=#(isadmin)&loanid=#(loanid)" method="post" name="form_30905105572145" id="30905105572145" accept-charset="utf-8">
<input type="hidden" name="formID" value="30905105572145" />
<input type="hidden" name="doc_id" value="#doc_id" />
<div class="form-all">
<ul class="form-section">
<li id="cid_3" class="form-input-wide">
<div class="form-header-group">
<h2 id="header_3" class="form-header">
Borrower Sources & Uses Summary
</h2>
#if (queryformstatus_submitted.doc_approval == "Pending Approval" || queryformstatus_submitted.doc_approval == "Approved")
{
<text><br />
<br />
<div class="error">
This form has already been submitted and cannot be edited. It is for reference only.</div></text>
}
#if(userid != queryformstatus_submitted.doc_userid){
<text><br/><br/><div class="error">You may not edit this form. It is for reference only.</div></text>
}
</div>
</li>
<li class="form-line" id="id_4">
<label class="form-label-left" id="label_4" for="input_4">
1. Property Name:
</label>
<div id="cid_4" class="form-input">
<input type="text" class=" form-textbox" id="input_4" name="q4_1Property" size="40" value="#Helpers.checkEmptyPreFill(queryinputvalue,"q4_1Property",queryloandata.LoanName)"/>
</div>
</li>
I'm not sure but I believe it may be something in this helper function that's causing the html code:
#helper checkEmptyPreFill(IEnumerable<dynamic> queryinputvalue, string field_id, string defaultval, int cloned = 0) {
var reqValue = queryinputvalue.FirstOrDefault(r => r.field_name.Equals(field_id));
var return_value = "";
if(reqValue != null){
return_value = reqValue.field_data;
} else {
return_value = defaultval;
}
if(cloned == 1){
return_value = "";
}
#return_value
}
The razor helper returns a HelperResult object so you'll have to convert it to a string before you can call HtmlDecode on it. Replace:
#Helpers.checkEmptyPreFill(queryinputvalue,"q4_1Property",queryloandata.LoanName)
with the following:
#HttpUtility.HtmlDecode(Helpers.checkEmptyPreFill(queryinputvalue,"q4_1Property",queryloandata.LoanName).ToString())
I would also suggest that you move some of the logic and data access code out of your view and into a controller but this should give you the result that you'e after.
I am playing with Angular and writing a Regex tester.
Problem is leading whitespace is trimmed when I enter data. See example jsfiddle here:
So when the page loads I have the RegEx "^\d+$".test(" 123 ") which results in "No Match", But if you enter an extra leading or trailing space in the Candidate box:
The leading and trailing spaces are removed from my variable
The result changes "Match"
Here is my HTML:
<div id='ng:app' class='ng-app: myApp' ng-app='myApp'>
<div ng-controller="Controller">{{addTodo2()}}
<form novalidate class="simple-form">Pattern:
<input type="text" ng-model="pattern" />Candidate:
<input type="text" ng-model="candidate" />
<br />.{{candidate}}.
<br>.{{candidate2}}.</form>
</div>
</div>
And here is the associated JavaScript:
function Controller($scope) {
$scope.pattern = "^\\d+$";
$scope.candidate = " 123 ";
$scope.candidate2 = " 123 ";
$scope.addTodo2 = function () {
var str = "Javascript is an interesting scripting language";
var re = new RegExp($scope.pattern, "g");
var result = re.test($scope.candidate);
if (result) {
return "Match22";
} else {
return "No Match22";
};
};
}
var myapp = angular.module('myApp', []);
Updated the fiddle, added ng-trim="false" to the input tags
http://jsfiddle.net/T2zuV/12/
<div id='ng:app' class='ng-app: myApp' ng-app='myApp'>
<div ng-controller="Controller">{{addTodo2()}}
<form novalidate class="simple-form">Pattern:
<input type="text" ng-model="pattern" ng-trim="false"/>Candidate:
<input type="text" ng-model="candidate" ng-trim="false"/>
<br />.{{candidate}}.
<br>.{{candidate2}}.</form>
</div>
</div>
Please check this link is not working, i have no idea what is wrong in my code.
I am trying to create a blog application, which have title, description and comments, but i am not getting proper output.
<h4>Title</h4>
<label data-bind="value: title" />
<h4>Description</h4>
<label data-bind="value: description" />
<h4>Comments</h4>
<p data-bind="foreach: comments">
<label data-bind="value: commenter" /><br>
<label data-bind="value: comment" /><br>
</p>
var data = {"title": "blog1",
"description": "Description1",
"comments": [{"commenter": "commenter1", "comment": "comment1"},
{"commenter": "commenter2", "comment": "comment2"},
{"commenter": "commenter3", "comment": "comment3"},
{"commenter": "commenter4", "comment": "comment4"}]};
function Comment(data) {
this.commenter = ko.observable(data.commenter);
this.comment = ko.observable(data.comment);
}
function BlogViewModel(data) {
var self = data;
self.title = data.title;
self.description = data.description;
self.comments = ko.observableArray(ko.utils.arrayMap(data.comments, function (com) {
return new Comment(com.commenter, com.comment);
}));
}
ko.applyBindings(new BlogViewModel(data));
You have multiple problems with your code some are related to KnockOut some of them are not:
Which are not related to KO:
In BlogViewModel the self variable should hold this not the data parameter: so it should be var self = this;
Your comment mapping is wrong: the new Comment(com.commenter, com.comment) should be new Comment(com)
Which are related to KO:
The value binding is used for input elements, you have labels so you need to use the text binding instead. E.g data-bind="text: title"
KO needs valid html. Because the self-closing label tag is not valid you need to add the closing tags to your labels e.g <label data-bind="text: description"></label>
Here is a working JSFiddle containg all the fixes.