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.
Related
Need help again ;)
I would like to show a photo in my Angular page. These are my steps,
REST API gets a document/record from backend MongoDB. The base64 images are stored as this.
The images/data are loaded into an array {{file_src[i]}} in the component code, then the component HTML will show the image as below
Situations:
If I used "img srcs={{file_src[i]}}", I got insecure operation. My REST API server has CORS enabled. Since the image is base64 data and doesn't have any URL, I don't know it is related to CORS.
I googled around and found the ng-src and data-ng-src directives. Both of them don't work too. Please see my binding error below.
Question: how to show the base64 image in my Angular page?
------Code as requested by Vic--------
<section class="fhirForm">
<fieldset>
<legend class="hd">
<span class="text">Photo</span>
</legend>
<div class="bd" formArrayName="photos">
<div *ngFor="let photo of patFormGroup.controls.photos.controls; let i=index" class="panel panel-default">
<div class="panel-body" [formGroupName]="i">
<label>Description</label>
<input type="text" class="form-control" formControlName="desc">
<label>Photo</label>
<input type="file" size="30" multiple formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input>
<!-- img src={{file_srcs[i]}} crossorigin="anonymous" alt="" /-->
<img data-ng-src={{file_srcs[i]}} alt="" />
<span class="glyphicon glyphicon-remove pull-right" *ngIf="patFormGroup.controls.photos.controls.length > 1" (click)="removePhoto(i)"></span>
</div>
</div>
</div>
</fieldset>
<div class="margin-20">
<a (click)="addPhoto()" style="cursor: default">
<small>Add another photo +</small>
</a>
</div>
</section>
initPhoto(desc?: String, photo?: string) {
//Add new entry on the 1 dimensional array. Allow 1 photo per section
this.file_srcs.push(photo);
console.log("Photo for file_srcs: [" + this.file_srcs[this.file_srcs.length - 1] + "]");
return this.formBuilder.group({
desc: [desc],
photo: [photo]
});
}
Please see the console.log. It showed that this.file_srcs are valid.
------------- Error Message in Chrome -------
------------- UPDATE 1 -----------
If I commented out the "input type=file ..." line above the "img src" as below, I can see the photo. What's wrong with my input? Sorry, I don't remember what is that #input for.
Hence, my issue may not be in the photo, but on the input line ;) Shame on me!!!
<label>Photo</label>
<!-- input type="file" size="30" formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input -->
<img src={{file_srcs[i]}} crossorigin="anonymous" alt="" />
--------- RESOLVED -----------
Thanks a lot for all the help!!!
i. the base64 image isn't the root cause;
ii. the file input "input type=file" was initialized by incorrect supplying the base64 image as the default value. It caused the error - failed to set the value of HtmlInputElement is correct in IE. The error message 'Insecure Operation' may be misleading in Firefox.
Hence, the root cause is not related to the base64 image. I would like to delete this thread a week later.
initPhoto(desc?: String, photo?: string) {
this.file_srcs.push(photo);
console.log("Photo for file_srcs[" + (this.file_srcs.length - 1) + "]: [" + this.file_srcs[this.file_srcs.length - 1] + "]");
return this.formBuilder.group({
desc: [desc],
photo: [""] //This was photo: [photo]. After supplying the default value as "", it works well.
});
Best regards,
Autorun
Fetch the base64 content in your controller like this:
$http.get($scope.user.photo).then(function(response) {
$scope.user.data = response.data;
});
then display it on view
<img data-ng-src="data:image/png;base64,{{user.data}}"/>
I use base64 image a lot and haven't see that error before. Is it caused by the crossorigin attribute?
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAA+0lEQVQ4T6WS3W3CMBSFz40QvDJCu0GYALJB2QBeUFzjCm9AJ0gLMQl9STegG5QNYARG6CsI+SKjpmppSY3w8/10fnwIVzy6lE2SollrbBcAPV8ET2fzOzAXDNYPUrx6wxOT9QjkwL4DnWMvODV5wUAP4EclxbiM+i88meUJMUYA3pSMu987qoRLqwDW+10j0rr/4QV/lrNwxwGClpSD9enPHJXTdD5i4vY+YK2F2BjzElrYdwDN05x/KpelMOGJGB0AIQGboYxvz23hR+apyVcO+jq2HCklll7wcT31rbMbgrBU93FUtcBfbSdZdlOztILlbpWq90jOqR8Au8VfIQFLZecAAAAASUVORK5CYII=";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<img src={{base64}} />
</div>
I have a multi-form that I am trying to build using ember.js. I've created the first step of the form using an array of data in my ObjectController but I now need to get the data from a JSON object provided by a rails app. I'm having a bit of trouble understanding how I can use ember-data to retrieve the JSON object and load just the options data into my select menu.
Here's my HTML:
<div class="col-md-12 col-xs-12 content">
<div class="text-center center-block">
<div class="col-md-12">
<span>Which of these</span>
<h2>Activities Appeal</h2>
<span>to you the most?</span>
<div class="form-group single-step">
{{view Ember.Select
content=studies
optionValuePath="content.value"
optionLabelPath="content.label"
prompt="Area of Study"
name="answer[3]"
id="answer_3"
class="form-control span12"
}}
</div>
</div>
</div>
Here's my JS:
var Mobile = Ember.Application.create({
LOG_TRANSITIONS: true
});
/** Setup the urls for the mobile screens **/
Mobile.Router.map(function(){
this.resource('index', { path: "/" });
});
/* Extend the controllers to load objects */
Mobile.IndexController = Ember.ObjectController.extend({
selecedStudies:null,
studies: [
{value:'14', label: 'Business'},
{value:'15', label: 'Criminal Justice'},
{value:'16', label: 'Education'},
{value:'17', label: 'Engineering & Science'},
{value:'18', label: 'Fire & Emergency Mgmt'},
{value:'19', label: 'Healthcare'},
{value:'20', label: 'Information Technology'},
{value:'21', label: 'Legal/Paralegal Studies'},
{value:'22', label: 'Liberal Arts'},
{value:'24', label: 'Psychology & Counseling'},
{value:'25', label: 'Social Services'},
{value:'26', label: 'Web/Graphic Design'},
{value:'27', label: 'Theology'},
{value:'23', label: 'Nursing'}
]
});
And Here is the JSON data as it will come from the rails app:
{"form_id":17,"questions":[{"question":{"id":3,"identifier":"","name":"Area of Study","question_validation_id":null,"require_question":true,"set_as_qualification":false,"type_id":3,"from_option":true,"options":[{"option":{"id":14,"name":"Business"}},{"option":{"id":15,"name":"Criminal Justice"}},{"option":{"id":16,"name":"Education"}},{"option":{"id":17,"name":"Engineering & Science"}},{"option":{"id":18,"name":"Fire & Emergency Mgmt"}},{"option":{"id":19,"name":"Healthcare"}},{"option":{"id":20,"name":"Information Technology"}},{"option":{"id":21,"name":"Legal/Paralegal Studies"}},{"option":{"id":22,"name":"Liberal Arts"}},{"option":{"id":24,"name":"Psychology & Counseling"}},{"option":{"id":25,"name":"Social Services"}},{"option":{"id":26,"name":"Web/Graphic Design"}},{"option":{"id":27,"name":"Theology"}},{"option":{"id":23,"name":"Nursing"}}],"option_view":"grid"}}]}
The end goal is to be able to get and post data for each step in a multi-form but for now I just need to be able to get my data from the JSON object and display it in the step of the form.
I have a working example of my static form available here: http://jsbin.com/qefod/5/edit
Any insight on the proper Ember way to loading a JSON object with Ember Data would be much appreciated.
::: UPDATE :::
I have a bit of an update where I've changed the routes to reflect the source data nesting and I've added model definitions and API request. You can see the updated JSBin here: http://jsbin.com/qefod/7/edit
What I need to do in this example is to load the options from the JSON data into the select menu. For some reason my Ember console does load the data into the model but I can not access it through the template.
To get the value selected in your select element, you need to add value to your view Ember.select like so:
{{view Ember.Select
content=studies
optionValuePath="content.value"
optionLabelPath="content.label"
prompt="Area of Study"
name="answer[3]"
value=selecedStudies
id="answer_3"
class="form-control span12"
}}
Then you can access this inside your step2 action in your controller:
actions: {
step2: function() {
console.log(this.get('selecedStudies'));
}
}
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'm building an icon library where the user on the front end (submitting a form) can select an icon. I managed to get everything working as far as the selection process. Now, the final product will have over 400 icons, and i wanted to add a search (ajax, i guess) or autocomplete input where the user can type a couple of letters and it filter's out those icons.
They search will be filtering out some with a class that has the prefix "icon-", so the search term would be whatever is after that prefix. (i.e: icon-TWIITER, icon-FACEBOOK, etc).
I started on jsFiddle here: http://jsfiddle.net/yQMvh/28/
an example would be something like this :
http://anthonybush.com/projects/jquery_fast_live_filter/demo/
http://cheeaun.github.io/jquery.livefilter/
I'm trying to stay away from jQuery plugins and try and figure this out before i resort to that. I'm using wordpress as the backend of the website.
as soon as the user types, it's already sorting out the icons that pertain to the input value.
My HTML Markup:
<div class="iconDisplay">Display's selected icon</div>
<span id="selectedIcon" class="selected-icon" style="display:none"></span>
<button id="selectIconButton">Select Icon</button>
<div id="iconSelector" class="icon-list">
<div id="iconSearch">
<label for="icon-search">Search Icon: </label>
<input type="text" name="icon-search" value="">
</div>
<span class="icon-icon1"></span>
<span class="icon-icon2"></span>
<span class="icon-icon3"></span>
<span class="icon-icon4"></span>
<span class="icon-icon5"></span>
<span class="icon-icon6"></span>
<span class="icon-icon7"></span>
<span class="icon-icon8"></span>
</div>
JS:
var iconVal = $(".icon_field").val();
$('#selectedIcon').addClass(iconVal);
$("#selectIconButton").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
selectIcon($(this));
});
function selectIcon(e) {
var selection = e.attr('class');
$(".icon_field").val(selection);
$("#iconSelector").hide();
$('#selectedIcon').removeClass();
$('#selectedIcon').addClass(selection).show();
return;
}
Made an update on your jsfiddle jsfiddle.net/yQMvh/30 Just enter the classname e.g. icon-icon1 and all icons without icon-icon1 gets hidden
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.