Generating an auto-complete function Angular and Jquery - javascript

I am currently working on a web application that makes use of :
JQuery
AngularJS
Kendo framework
In particular, I need to implement an auto-complete function using kendo on an input text.
So, my first option, was to select that input text using jquery and then apply the auto-complete to it like this :
$(".autoComplete").kendoAutoComplete({
dataSource: data,
filter: "startswith",
placeholder: "Select country...",
separator: ","
});
Where the auto-complete class is applied to an input element of type text.
However, it seems that this solution is not applicable seen that the input text is generated dinamically as an angular modal :
script type="text/ng-template" id="dialogAddCompany.tpl.html">
<div class="modal-header no-header"></div>
<div class="modal-body">
<div class="row"><div class="col-sm-12 col-md-12"><div class="modal-caption-description-title"><label>{{tab.modal.title}}</label></div><div class="col-sm-12 col-md-12 caption-description"></div></div></div>
<div ng-if="tab.modal.type === 'blackbox'">
<fieldset>
<div class="col-md-12 form-group">
<label class="">Nome compagnia</label>
<input class="autoComplete" />
<input type="text"/>
// rest of the code
Looking on the internet, I found a solution to this problem using event delegation like this :
$("#bubble").on("click", ".autoComplete",function() {
$(".autoComplete").kendoAutoComplete({
dataSource: data,
filter: "startswith",
placeholder: "Select country...",
separator: ","
});
});
Where #bubble is the id of a div that is already present on the page when it's loaded.
However this solution is not working. Any Idea how to solve this ? I have already tried to use a solution using angular like :
<input type="text" kendo-auto-complete k-data-source="data" />
Where data is an array of data.
Thank you for your help!.
Edit :
I forgot to mention that the code I am talking about is inside a template like this :
<script type="text/ng-template" id="dialogAddCompany.tpl.html">
<div class="modal-header no-header"></div>
<div class="modal-body">
<div class="row"><div class="col-sm-12 col-md-12"><div class="modal-caption-description-title"><label>{{tab.modal.title}}</label></div><div class="col-sm-12 col-md-12 caption-description"></div></div></div>
<div ng-if="tab.modal.type === 'blackbox'" ng-controller="aipCompanyController">
<fieldset>
<div class="col-md-12 form-group">
<label class="">Element</label>
<input kendo-auto-complete k-data-source="data"/>
<input type="text" ng-click = "clicked()" kendo-auto-complete k-data-source="data" />
<!--<div ap-textbox ap-options="tab.cfg.textInput.options" ap-class="'form-control'" type="text" ap-value="tab.tabData.prova"></div>-->
If I try to create an input text with autocomple OUTSIDE of this template it works perfectly fine.

With angular you should use the kendo-auto-complete attribute and bind to your data-source like this:
<input kendo-auto-complete ng-model="yourModel" k-data-source="data" />
<p class="demo-hint">Your selection: {{ dataToShow }}</p>
https://demos.telerik.com/kendo-ui/autocomplete/angular

You can try something like this:
HTML:
<div id="example" ng-app="KendoDemos">
<script type="text/ng-template" id="dialogAddCompany.tpl.html">
<div ng-controller="MyCtrl">
<h4>Select Country /e.g. Armenia/</h4>
<input kendo-auto-complete ng-model="country" k-data-source="countryNames" />
<p>Your selection: {{ country }}</p>
</div>
</script>
<a ng-click="currentTemplate='dialogAddCompany.tpl.html'">Load template</a>
<div ng-include src="currentTemplate"></div>
JS:
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.countryNames = [
"Albania",
"Andorra",
"Armenia",
"Austria"];
});
</script>
Here I created a working example: https://dojo.telerik.com/AqEraMib

You can find angular material implementation here:
https://material.angularjs.org/latest/demo/autocomplete
It's easy to understand and implement.
or you can watch this implement yourself:
https://www.youtube.com/watch?v=y4gZMJKAeWs

Related

How can I pass the value from drop down list as a link for button?

I am creating a web app (using thymeleaf, html, css, javascript) and I ran into a problem. Say I have a search bar and a button like this:
Now this represents the functionality of an app and currently it can only search records from a table by their name. But I want to add some other functions like "search by population", "search by capital" etc. I was planning on creating a drop-down list next to the search bar where these options will be included, and the user will select from that list how he wants to search for a record. I can't see a way to do that. Currently this is a search bar code:
<h4 class="left">
<form ui-jp="parsley" th:action="#{/events/showByState}" th:object="${myState}" method="get">
<div class="row m-b">
<div class="child">Search by State Name:</div>
<div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r"/></div>
<div class="child box-3">
<button class="btn">Search!</button>
</div>
</div>
</form>
</h4>
So it is unclear for me how I do this because I need to specify the link for button based on what user will choose from the list. Any help is appreciated!
You can create a <select> element with options whose value indicate what the action of the form should be. Whenever its value changes, you can update the form's action.
document.getElementById('search-by').addEventListener('change', function(e) {
let searchBy = this.value;
console.log(searchBy);
this.form.action = `/events/${searchBy}`;
});
<form ui-jp="parsley" th:action="#{/events/showByState}" th:object="${myState}" method="get">
<div class="row m-b">
<div class="child">Search by
<select id="search-by">
<option value="showByState">State Name</option>
<option value="showByPopulation">Population</option>
<option value="showByCapital">Capital</option>
</select>:</div>
<div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r" /></div>
<div class="child box-3">
<button class="btn">Search!</button>
</div>
</div>
</form>

Set variable value in jQuery to Javascript calculator

I have a form with a price calculator and while I am able to set all text fields and such using a jQuery script, I can't figure out how to simply set a variable in that jQuery script that is used in a price calculator in another Javascript on the page.
There is a text field with an id of #price_draftarticles that I set a value to - that works but I also have a variable called price_draftarticles that is being added to other variables to create a total. I referenced my Form_Calculator() function but it's still not updating the total.
Relevant form code
<div class="col-sm-8">
<div class="radio">
<label>
<input class="structype" type="radio" name="CorpStructure" id="price_structureop3" value="I want to provide my own structure" onClick="checkRadioCS(); Form_Calculator();"><strong>I want to provide my own structure</strong>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="checkbox">
<label>
<input name="DraftArticles" type="checkbox" id="DraftArticles" onClick="checkRadioTF(); Form_Calculator();" value="Yes">DETAILS
</label>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<input name="price_draftarticles" type="text" class="form-control fcalc" id="price_draftarticles" value="" readonly>
</div>
</div>
My jquery function
<script>
$(function () {
$('.structype').change(function () {
if ($(this).val() === 'I want to provide my own structure')
{
$("#DraftArticles").prop("checked", true);
$("#price_draftarticles").val('$25.00');
$("price_draftarticles").val('25.00');
$('#CustomStructureDetail').show('500');
}
if ($(this).val() == 'Standard structure template one class of shares') {
$('#CustomStructureDetail').hide('500');
}
if ($(this).val() == 'Two classes of shares') {
$('#CustomStructureDetail').hide('500');
}
});
checkRadioTF();
checkCheckBox();
Form_Calculator();
checkeFileJur();
});
</script>
Looks like you forgot the '#' character in
$("price_draftarticles").val('25.00');
This should be
$("#price_draftarticles").val('25.00');
As what #BYates said the selector missed '#' for price_draftarticles.
$("#price_draftarticles").val('25.00');
But if you're trying to get/set value of the input using it's name. The selector should be like this:
$('input[name="price_draftarticles"]').val('25.00')

Saving dynamically generated inputs grid with the same ng-model

I have these snippets of code :
$scope.createPack = function(informationsPack, informationsActivite) {
PackService.add(informationsPack, informationsActivite)
.then(function(res) {
$state.go('packs.list');
}, function(error) {
alert('error : ' + error);
})
};
<form name="packAddForm" id="packAddForm" class="form-horizontal">
<div ng-repeat="item in items">
Jour {{ item.jour }}
<div class="form-group">
<div>
<input type="text" id="nom_activite" class="form-control" placeholder="Nom Activité"
ng-model="informationsActivite.name_activity">
</div>
</div>
<div class="form-group">
<div>
<textarea name="description_activite" id="description_activite" cols="60"
rows="5" ng-model="informationsActivite.description_activity"></textarea>
</div>
</div>
</div>
</form>
<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="createPack(informationsPack, informationsActivite)">
Enregistrer</button>
What I'm trying basically to do is generating 1, 2 or 3 input based on what the user gave. And that is what the ng-repeat is doing. But the problem is when I submit the form how can I get all the values of the generated inputs. If it was just one input it would be ok. But for example if I have 2 informationsActivite.name_activity generated how can I get all datas. I really need help.
I think you need to do something like this
<div>
<textarea name="description_activite{{$index}}"
id="description_activite{{$index}}" cols="60" rows="5"
ng-model="informationsActivite.description_activity{{$index}}"></textarea>
</div>
to make these attribute values unique.
Side note- duplicate id attributes in a html document makes it invalid

How can I use the same jQuery function for multiple divs without repeating the code

I have a add/remove textfield feature wherein I want to implement a jQuery function to all the textfields in a div.
Can I use the same jQuery function for all the fields in the div or should I write different for each.
DEMO can be got here. In the demo I have made it work for one input field, how can I make it work for the rest.
HTML
<div id="single">
<div id="Ivrgroupzbase_grpzWelcomeNotes" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
<div id="p_scents" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
</div>
fiddle http://jsfiddle.net/Drea/28h0L6eb/
html
changed id "addScnt" to class - you should avoid using same id multiple times
js
$('.addScnt').on('click', function (event) {
event.preventDefault();
$(this).closest('.row').append(createInput($('#Ivrgroupzbase_grpzWelcomeNotes p').length + 1), '');
});

How to add data from scope to select box

I'm fairly new to angular, so hopefully this is a super simple question for someone to nail.
I have a form (cut down version below) that I want to be able to have a live preview being shown as the user fills in the form.
All was going well with standard fields, however I've hit a roadblock with <select> fields.
<div ng-app="jobcreate">
<div class="row fullWidth" ng-contoller="JobCtrl">
<div class="medium-6 columns">
<form method="POST" action="http://localhost:3030/job/create" accept-charset="UTF-8">
<label for="title">Enter a title</label>
<input placeholder="title" id="title" required="required" ng-model="job.title" name="title" type="text" />
<br />
<label for="title">Pick template</label>
<select ng-model="job.template" ng-options="template.Name for template in templates" name="template"></select>
</form>
</div>
<div class="medium-6 columns">
<div class='job-detail {{ job.template || "default" }}'>
<h2>{{ job.title || "Enter a title"}}</h2>
<h2>{{ job.template || "Pick a template"}}</h2>
<pre>Templates: {{templates | json}}</pre>
</div>
</div>
</div>
</div>
And here is the js:
angular.module('jobcreate', []).controller('JobCtrl', function($scope) {
$scope.templates = [
{ID:'default', name:'Default'},
{ID:'obnoxious', name:'Obnoxious'}
];
});
I have a jsfiddle here so you can see it in action: http://jsfiddle.net/2m8jm/4/
As you can see, entering something in the title field works as intended, but I'm struggling to get the contents of the $scope.colors to fill in the select field
In your fiddle : http://jsfiddle.net/2m8jm/4/, you have choosed templates as an data array for ng-options but there is not scope variable named templates in the controller JobCtrl. I have renamed $scope.colors to $scope.templates and modified the ng-options bit - ng-options="template.ID as template.name for template in templates".
Here is a working plunker : http://plnkr.co/edit/wsbxkjRqTEU2yfcHOV0D?p=preview
Update
Is there a way to not have the first empty value be in the select field?
Yes, Couple of ways.
1) Initialize job.template with some default value in your markup as :
<label for="title" ng-init="job.template='obnoxious'">Pick template</label>
<select ng-model="job.template" ng-options="template.ID as template.name for template in templates" name="template"></select>
2) Define controller as follows to set default value for job.template inside the controller :
.controller('JobCtrl', function($scope) {
// some other codes
$scope.job = {};
$scope.job.template = 'default';
});

Categories

Resources