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.
Related
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
I am trying to make an autocompleting search bar. What I have until now is:
<div class="ui search">
<div class="ui inverted transparent icon input">
<input class="prompt" type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
</div>
<script>
$('.ui.search')
.search({
apiSettings: {
url: '/search?key={query}'
},
});
</script>
And router.get('/search',...
This one does a database search (mongoose) and returns an array with all the documents which name contains the search string and does: res.send(thearray). But this doesn't work, is it right to use res.send and is the script right?
Please see examples in Semantic UI: https://semantic-ui.com/modules/search.html#/examples
$('.ui.search')
.search({
apiSettings: {
url: '//api.github.com/search/repositories?q={query}'
},
fields: {
results : 'items',
title : 'name',
url : 'html_url'
},
minCharacters : 3
})
;
You need to map the response from your API into the matching fields required for search.
I am trying to clone elements when clicking a button. I was trying to use ko.toJS. On page load it works fine, but when I want clone the items, it is unable to bind the items (like, value, Text, etc.).
Here is the HTML:
<div class="stockItems-inner" data-bind="foreach: StockItems">
<div data-bind="if: Type=='Input'">
<div class="stock_container_input">
<input type="text" data-bind="value: Value" />
</div>
</div>
<div data-bind="if: Type=='Radio'">
<div class="stock_container_control">
<div data-bind="foreach: Options">
<div class="stockLbl">
<input type="radio" data-bind="text: Text, checked:$parent.Value, attr:{'id':Id, 'name': $parent.Text, 'value': Value}" />
<label data-bind="attr:{'for':Id}, text: Text"></label>
</div>
</div>
</div>
</div>
</div>
<div class="addItem">
<button type="button" data-bind="click: CloneItem"><img src="images/add.png" alt="" /></button>
</div>
The View Model:
ConfigurationStockViewModel = function() {
var self = this;
this.StockItems = ko.observableArray();
this.ApplyData = function(data){
self.StockItems(data.Items);
}
this.CloneItem = function(StockItems){
self.StockItems.push(ko.toJS(StockItems));
};
};
When clicking the button, an error is thrown: Unable to process binding. I am using JSON data for binding.
Not exactly sure what end result you want without working code, but sounds like you want to clone the last item in array and add to array?
If so, I think you have an error - your add button click binding will never pass anything to the function you defined, since it is outside the foreach. You need something like this:
this.CloneItem = function() {
var toClone = self.StockItems()[self.StockItems().length - 1]
self.StockItems.push(toClone);
};
Here is a simplified example without radio buttons, etc:
http://jsfiddle.net/5J47L/
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.