so I need help with my code. My boss wanted to search in my dropdown category multiple times for example in ID, more likely a range value, example i want to search SCP ID values: 123 and 169, all significant data will show that matches the record.i attach my UI sample belowsample UI my problem is that in my UI i can only search 1 value only for the same category. someone help me pls with the function and design. thanks alot.
This is my HTML:
<input type="text" id="txtsid" style="width: 70%; margin-left:2px;" value="" ng-model="sid" class="input-group inline form-control" placeholder="SCP ID" ng-required="true" required>
<button id="scpid1" class="btn btn-primary" onclick="addFields()">ADD</button>
This is my function:
$scope.sid=$scope.sidData;
$scope.filterSearch2nd = function(sid) {
if(sid ==""){
sid="scpid";
}
$rootScope.loader = true;
skinCareProdService.filter2ndSearch(sid)
.then(function(data){
$scope.rawSCP = data.data;
$rootScope.loader = false;
$scope.sidData=data.data[0].SCP_id;
}
);
}
i also use append
Related
I'm learning about AngularJS and effectively what I have is a search box, within that box I want three icons (magnifineglass, a cross and a spinner). The first instance I would like the magnifineglass to appear when the input box is empty, the second instance I would like the spinner to appear when the user has entered some characters into the input box and when the search has gone through the array to output possible searches (just using a timer for this just now) then I would like the "x" to appear in the third instance once the possible searches are returned, which when clicked will clear the field and start over.
This is what I have so far:
<div ng-app="searchDemo" ng-controller="LocationFormCtrl">
<div>
<input type="text" class="clearable magnifineglass" ng-click="search()"/>
<!--<i class="glyphicon glyphicon-refresh spinning"></i>-->
{{ outputText }}
</div>
Fiddle - I couldn't get the formatting to work correctly on the form so I simply put the rest in a fiddle.
I also tried to make a brief "clear field" example here.
What I am struggling with is that I can represent the icons with text (outputText) however I am unsure how to replace this with the icons and have them inside the input box and work with angular.
Any help would be greatly appreciated as I have been working on it for the past couple of hours and I feel as though I could do each of the three separately but bringing all three together is tricky and I seem to be getting more and more confused.
Thanks,
John
In HTML use :
<input type="text" class="clearable" ng-model="searchText"/>
<i class="glyphicon" ng-class="searchIcon" ng-hide="clearEnable" ng-click="search()"></i>
<i class="glyphicon" ng-class="searchIcon" ng-show="clearEnable" ng-click="clear()"></i>
In controller :
// initialise searchIcon with magnifying glass
$scope.searchIcon = "glyphicon-search";
In search() function :
$scope.searchIcon = "glyphicon-refresh spinning";
In clear() function :
$scope.searchIcon = "glyphicon-search";
Updated Fiddle : for demo i have used ng-click on icons, you can use ng-keyup, ng-blur on input tag also
In angular , you can achieve it using directives such as ng-show and ng-key down.
Here
example
<body ng-controller="tempC">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search" ng-show="search"></span>
<span class="glyphicon glyphicon-pencil" ng-show="editing"></span>
<span class="glyphicon glyphicon-remove" ng-show="remove" ng-click="removeIcon()"></span>
</span>
<input type="text" class="form-control col-sm-4" placeholder="enter" ng-model="text" ng-keydown="typing()" />
</div>
</body>
angular.module('temp',[]).
controller('tempC',['$scope','$timeout',function($scope,$timeout){
$scope.remove = false;
$scope.search=true;
$scope.editing = false;
$scope.typing = function(){
$scope.search = false;
$scope.editing = true;
$timeout(operation,1000);
}
$scope.removeIcon = function(){
$scope.remove = false;
$scope.search = true;
$scope.text = '';
}
function operation(){
//perform operation
$scope.editing = false;
$scope.remove = true;
}
}])
I'm new in Angular and I can't achieve something really simple, lets say we have several checkbox input loops followed by an input text field like this:
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<input type="checkbox" ng-repeat="btn in btns" ng-model="changing" ng-change="change(btn.value, 'other')" class="here" value="{{btn.value}}">
<input type="text" class="uncheck" ng-disabled="other">
<!-- Here comes the other one -->
<input type="checkbox" ng-repeat="btn in btns" ng-model="changing" ng-change="change(btn.value, 'other2')" class="here" value="{{btn.value}}">
<input type="text" class="uncheck" ng-disabled="other2">
</div>
</body>
And the idea in here is this: once the checkbox with value "other" is checked it will enable the corresponding text field determinate in the field parameter of the change function, so I develop a function change(value, field) and works like this:
$scope.btns = [
{value:'one'},
{value:'two'},
{value:'other'}
];
$scope.other = true;
$scope.other2 = true;
$scope.change = function(value, field) {
if(value == 'other'){
if($scope.field == false){
$scope.field = true;
} else {
$scope.field = false;
}
}
};
But the problem is, this does not work, I don't know if I making this in the right way, the $scope.field is the problem, how can I pass a parameter to the $scope
Hope someone can help me.
Thanks.
You can use ng-model with the checkbox, then use ng-disabled to listen to that model belonging to the checkboxes.
<input type="checkbox" value="Other" ng-model="myCheckboxes['other']" />
<input type="text" ng-disabled="myCheckboxes['other']" />
I have a list of products:
For each product they can select a time type (per hour, per day etc).
When they have done so and clicked book, it adds the product to cart;
this is done inside addToCart below on the line that is bolded.
addToCart: function (resultId, cartId) {
var that = this;
this.shoppingCart.forEach(function (cartItem, cartIndex) {
cartItem.added = false;
if (cartIndex == cartId)
{
cartItem.added = true;
that.results.forEach(function (resultItem, resultIndex) {
if (resultItem.id == resultId) {
that.shoppingCart.$set(cartIndex,
{
productTimeType: cartItem.productTimeType,
quantity : cartItem.quantity
});
var numberOfBookings = (parseInt(resultItem.numberBookings, 10) + cartItem.quantity);
that.results.$set(resultIndex, {
numberBookings: numberOfBookings,
name: resultItem.name,
quantity: resultItem.quantity,
id: resultItem.id,
category_id: resultItem.category_id,
description: resultItem.description,
image: resultItem.image,
created_at: resultItem.created_at,
updated_at: resultItem.updated_at
});
The html:
<tr v-for="result in results">
<td>
<form class="form-inline" #submit.prevent='addToCart(result.id, $index)'>
<input v-model="shoppingCart[$index].quantity" class="form-control" placeholder="Quantity" name="quantity" type="text">
<select v-model="shoppingCart[$index].productTimeType" class="form-control input-lg"><option value="" selected="selected">All types</option><option value="1">Whole day</option><option value="2">Half day</option><option value="3">Per hour</option></select>
<input class="btn btn-warning" type="submit" value="add to cart">
</form>
When I debug this, and console.log the values it's doing it perfectly. Then it seems like there's some sort of refresh happening, and all the fields are reset on the page to what they were before, and no values are updated.
Change the type of your input to button instead of submit
<input class="btn btn-warning" type="button" value="add to cart">
Ok,in my case the issue was with the fact that I was outputting the select box with Laravel using Laravel Collective's package, and each time it did so, it generated the markup with a certain option selected. This was resetting the dropdown.
It would seem that there are better ways to work with VueJs and the backend like fetching the data or the html from the server and passing that to VueJs to generate the dropdown (if the dropdown is dynamic). I will follow an approach similar to this.
I am having difficulty with a javascript that I need some help with. I have a form which sends to a php the exact amount of inputs to be filled, now I want to create a preview using jQuery/javascript but how can I catch all the fields dynamically.
Here is a portion of my form for reference:
<td>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil"></i></span>
<input class="form-control" id="task" type="text" name="task" placeholder="Task Title">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil"></i>
</span>
<input class="form-control" id="description" type="text" name="description" placeholder="Task Description">
</div>
</td>
So, I added in PHP the name field + the number, this way I can get different names ie: task1, task2,...etc.
Now what I need to do is get the values using jQuery/javascript.
My thoughts so far is to declare the var (variable) inside a for() (loop)
var task = $('input[name=task]').val();
How can I get all values task1, task2. No one knows how many task fields the user will submit so I need to get the number of fields
Any help direction so I can figure this out
First of all, you don't need to give your input fields names like task1, task2, etc to distinguish among them on the server-side i.e on the PHP. You just need to give all of them a name attribute value like tasks[] And notice the brackets [] so you may have something like the following:
<input class="form-control" id="tasks[]" type="text" name="tasks[]" placeholder="Task Title">
...
<input class="form-control" id="tasks[]" type="text" name="tasks[]" placeholder="Task Title">
Like that automatically values in those fields will be posted as an array to the PHP and it is going to be received like the following in PHP script:
$tasks = $_POST['tasks'];
foreach ($tasks as $task){
echo $task;
}
Second By this way you will easily able to collect your inputs data using Javascript inorder to generate the preview by using getElementsByName method as follows:
function preview(){
output = "";
tasks = document.getElementsByName('tasks[]');
for (i=0; i < tasks.length; i++){
output += "<b>Title</b>: "+tasks[i].value+"<hr />";
}
panel = document.getElementById('panel');
panel.innerHTML = output;
}
Of course you can expand this solution to any number of fields in your form such as descriptions[].
A javascript DEMO: http://jsbin.com/kiyisi/1/
Using the Attribute Starts With Selector [name^="value"] and jQuery.each()
var tasks = $('input[name^=task]').val();
$.each(tasks,function(index, value){
//do something with the value
alert($(this).val());
});
edit
var tasks = $('input[name^=task]');
$.each(tasks,function(index, value){
//do something with the value
$('#Preview').append($(this).val());
});
Q: now I want to create a preview using jquery/javascript but how can I catch all the fields dinamically:
If you give them a class, you can get all fields with each:
$(".className").each(function() {
do something
Next, "catch" all fields... I'm assuming you may want the values of these fields too? Check this example for details, here is a snippet which loads the key:value pairs (form field name : value of field) into a map:
var map = {};
$(".activeInput").each(function() {
map[$(this).attr("name")] = $(this).val();
});
Print all values inside div (Here, I'm assuming you're talking about children values of div):
<div>
<span>Hi</span>
<span>Hello</span>
<span>Hi again</span>
</div>
$("div").children().each(function () {
console.log($(this).text());
});
OR
$("div span").each(function () {
console.log($(this).text());
});
I'm trying to do some very simple validation using the knockout validation plugin. I want to validate if at least one text field has text and at least one checkbox is checked. All bindings work correctly and knockout itself is awesome so far. I've tested native validation rules and they work with messaging. I just can't get the validation to work for these 2 rules.
I realize I can check for empty values very easily with jQuery but I would really like to utilize knockout.
The model (without validation because I haven't found anything that works yet):
var SearchForm = function(collections) {
// main search fields
this.fullRecord = ko.observable();
this.title = ko.observable();
this.author = ko.observable();
// collections to search
var sources = [];
$.each(collections, function(index,collection) {
sources.push(new Source(collection));
});
this.sources = ko.observableArray(sources);
// Error handling vars
this.errors = ko.validation.group(this);
};
var Source = function(collection) {
$.extend(this,collection);
this.id = "collection-"+this.code;
this.selected = ko.observable(true);
};
Here I'm just creating a list of source objects from collection data that comes from the server. That data is irrelevant since I'm only concerned with the observable 'selected' property.
The markup:
<div id="advanced-controls" class="row">
<div class="col-sm-8">
<fieldset id="search-fields">
<div class="form-group">
<label for="fullrecord" class="control-label">Keywords:</label>
<input type="text" id="fullrecord" class="form-control" name="fullrecord" placeholder="Full Record Search" data-bind="value:fullRecord" />
</div>
<div class="form-group">
<label for="title" class="control-label">Title:</label>
<input type="text" id="title" name="title" class="form-control" data-bind="value:title"/>
</div>
<div class="form-group">
<label for="author" class="control-label">Author:</label>
<input type="text" id="author" name="author" class="form-control" data-bind="value:author"/>
</div>
<div class="form-group">
<button id="advanced-search-submit" class="btn btn-primary" data-bind="click:search">Search</button>
<button id="advanced-search-reset" class="btn" data-bind="click: clear">Clear All</button>
</div>
</fieldset>
</div>
<div class="col-sm-4">
<fieldset data-bind="foreach: sources">
<div class="form-group">
<input type="checkbox" name="collections" data-bind="attr:{ id:id, value:code }, checked:selected, click: $parent.clearRequiredSourceError ">
<label data-bind="attr:{ for:id }, text: name"></label>
</div>
</fieldset>
</div>
</div>
In the validation function before submitting:
// If there's any knockout validation errors
if (model.errors().length > 0) {
model.errors.showAllMessages();
isValid = false;
}
I've tried setting a custom validation extension on the observable array of sources like this:
this.sources = ko.observableArray(sources).extend({
validation: {
validator : function (sources) {
var anySelected = false;
$(sources).each(function(){
anySelected = this.selected();
});
return anySelected;
},
message: 'At least one source is required to search.'
}
});
But that doesn't fire when the checkboxes are clicked, only when the array is changed ~ push, pop, etc. Yes I have the config set correctly:
ko.validation.configure({
grouping: {
deep: true,
observable: true
}
});
This seems like it should be very simple to achieve. Maybe my brain is just fried from diving into the whole knockout world this week. Any suggestions are greatly appreciated. Thanks in advance!
Forgive me for not reading your entire question, as it is very long, but I am curious if you need Knockout validation for this or if you are looking for something like this -
var selectedOption = ko.observable();
var selectionsOk = ko.computed(function () {
((!!field1()|| !!field1()|| !!field1())&&!!selectedOption())
});
Where selectedOption is a list of radio buttons, and once one is selected returns the value, and you could either use an observableArray to contain each of your fields so it is dynamic or you list the fields out and make sure that at least one of them has a value. The !! will evaluate your observable as true or false, true would be returned unless the observables' value was null, undefined, '', or false
The selectionOk computed could be used to prevent clicking some button to proceed or inversely for displaying an error message until the conditions are met.