I'm working with form that contain select element. I need to fill select with the data coming via json format. How to use jquery template to fill the select element?
I read about jquery template, it's documentation. But still can't get right result.
2 question: Is it good way to use jQuery Template for big data, for example: 4000 columns?
<div class="col-lg-5">
<select id="sel"></select>
</div>
<script id="optionTmpl" type="text/x-jquery-tmpl">
{{each $options}}
<option value="${$code}">${$title}</option>
{{/each}}
</script>
var options = [
{ code: "1", title: "A" },
{ code: "2", title: "B" },
{ code: "3", title: "C" },
{ code: "4", title: "D" },
{ code: "5", title: "E" },
];
$('#optionTmpl').tmpl(options).appendTo('#sel');
You may have a little change in the code as follows,
var options = [
{ code: "1", title: "A" },
{ code: "2", title: "B" },
{ code: "3", title: "C" },
{ code: "4", title: "D" },
{ code: "5", title: "E" },
];
$('#optionTmpl').tmpl(options).appendTo('#sel');
<!-- These are added to execute the code -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
<div class="col-lg-5">
<select id="sel"></select>
</div>
<!--
These was your code,
<script id="optionTmpl" type="text/x-jquery-tmpl">
{{each $options}}
<option value="${$code}">${$title}</option>
{{/each}}
</script>
which is changed to =>
-->
<script id="optionTmpl" type="text/x-jquery-tmpl">
<option value="${code}">${title}</option>
</script>
If your json format is fixed from server side then you can try this.
var options = [
{ code: "1", title: "A" },
{ code: "2", title: "B" },
{ code: "3", title: "C" },
{ code: "4", title: "D" },
{ code: "5", title: "E" },
];
$.each(options , function(i, obj){
$('#select').append($('<option>').text(obj.title).attr('value', obj.code));
});
we can also append the json to the input type select field if the key and value are same like this.
Reference : https://jocapc.github.io/jquery-view-engine/
var options = [ "A" ,"B" ,"C" ,"D"];
$('#myselect').view(json);
Variables in template are defined incorrectly
${$code} should be ${code}
You can use the following method instead of a for loop as explained in the plugin
$(document).ready(function() {
var options = [
{ code: "1", title: "A" },
{ code: "2", title: "B" },
{ code: "3", title: "C" },
{ code: "4", title: "D" },
{ code: "5", title: "E" },
];
var markup = '<option value="${code}">${title}</option>';
// Compile the markup as a named template
$.template( "optionsTemplate", markup );
// Render the template with the options data and insert
// the rendered HTML under the "sel" element
$.tmpl("optionsTemplate", options ).appendTo("#sel");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div class="col-lg-5">
<select id="sel"></select>
</div>
Related
How can i display a confirmation alert only if i want to change radio button on previous step? So if i confirm my action all steps below should be removed.
I've binded a #change directive to the radio button with a method implementing the expected confirmation alert, but it appears on each change i make.
Here is my fiddle
Thanks for your advices in advance
new Vue({
el: "#app",
data() {
return {
answer: ["1"],
stepsData: [
{
id: "1",
yes_section: "2",
no_section: "4",
name: "Step 1",
},
{
id: "2",
yes_section: "5",
no_section: "1",
name: "Step 2",
},
{
id: "3",
yes_section: "2",
no_section: "4",
name: "Step 3",
},
{
id: "4",
yes_section: "2",
no_section: "4",
name: "Step 4",
},
{
id: "5",
yes_section: "2",
no_section: "4",
name: "Step 5",
},
],
};
},
computed: {
quation() {
return this.answer.map((answer) => {
return this.stepsData.find((step) => step.id === answer);
});
},
},
methods: {
pushAnswer(answer) {
this.answer.push(answer);
},
confirmPopup() {
alert('Are you sure?')
},
},
});
.step {
background: #ccc;
padding: 20px;
margin-bottom: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(step, id) in quation" :key="id" class="step">
<div v-html="step.name"></div>
<div>
<input
type="radio"
:id="step.UF_NO_SECTION"
:name="step.ID"
:value="step.yes_section"
#click="pushAnswer(step.yes_section)"
#change="confirmPopup"
/>
<label
:for="step.UF_NO_SECTION"
class="legal-aid__step-btn button _outline _no"
>
YES {{ step.yes_section }}
</label>
</div>
<div class="legal-aid__step-action_no">
<input
type="radio"
:id="step.UF_NO_SECTION"
:name="step.ID"
:value="step.no_section"
#click="pushAnswer(step.no_section)"
#change="confirmPopup"
/>
<label
:for="step.UF_NO_SECTION"
class="legal-aid__step-btn button _outline _no"
>
NO {{ step.no_section }}
</label>
</div>
</div>
</div>
I would add a property on every stepData that is called isSelected which will be initialized to false and once it was clicked, it will be changed to true.
So you data will look like this:
stepsData: [
{
id: "1",
yes_section: "2",
no_section: "4",
name: "Step 1",
isSelected: false
},
....
]
You will need to change pushAnswer to set isSelected to `true:
#click="pushAnswer(step)"
pushAnswer(answer) {
answer.isSelected = true;
this.answer.push(answer.yes_section);
},
And confirmPopup function will check if the answer is already selcted or not:
#change="confirmPopup(step)"
confirmPopup(step) {
if (step.isSelected) {
alert('Are you sure?')
}
},
Of course you can change anything to your liking, but this is the basic idea
<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames">
</select>
now when i access the value if {{selectedQuestion.Title}} i am getting proper value,
when i am accessing value of {{selectedQuestion.ID}} also i am getting proper value,
what i actually need is value of {{selectedQuestion.ControlPrefix}} to be accessed in model(javascript) but it cannot be accessed neither in UI with {{selectedQuestion.ControlPrefix}} nor in model like
$scope.Newmodel = {
Title: "New Question Title",
ControlPrefix: $scope.selectedQuestion.ControlPrefix
};
basicaly i want the value inside the $scope.Newmodel.ControlPrefix variable i.e $scope.Newmodel.ControlPrefix
**tabnames array/objet is below**
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},
I don't See any problem with this, please check and verify -
var app = angular.module("myApp",[]);
app.controller("myCntr",function($scope){
$scope.tabnames = [
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},]
$scope.NewQuestionmodel = {
Title: "",
QuestionTypeID: "",
};
$scope.Dosomething = function(selectedQuestion){
$scope.NewQuestionmodel.Title = selectedQuestion.Title;
$scope.NewQuestionmodel.QuestionTypeID= selectedQuestion.ID;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntr">
<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames" ng-change="Dosomething(selectedQuestion)">
</select>
<br>
<span>FRom UI - Selected Question Title : {{selectedQuestion.Title}} </span><br>
<span>From UI - Selected Question ID : {{selectedQuestion.ID}} </span><br>
<span>From UI - Selected Question ControlPrefix : {{selectedQuestion.ControlPrefix}} </span><br><br>
<br>
<span>Selected Question Title from Backend is {{NewQuestionmodel.Title}}</span><br>
<span>Selected Question ID from Backend is {{NewQuestionmodel.QuestionTypeID}}</span>
</div>
How can i filter based on object values like 1 or 2 or 3
i am trying to filter my json which looks similar to the names object
This is my code i tried to apply filter but its not working
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names ">
{{ x.name }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = {
"1": {
"name": "some"
},
"2": {
"name": "values"
},
"3": {
"name": "are"
},
"4": {
"name": "there"
},
"5": {
"name": "here"
}
}
});
</script>
</body>
</html>
filter and orderBy do not work on object properties, only arrays. That being said, I think I found a solution that you will like:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="searchText"/>
<ul ng-init="nameArray=objArray(names)">
<li ng-repeat="x in nameArray | filter:searchText">
{{x.value.name}}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.searchText='';
$scope.names = {
"1": {
"name": "some"
},
"2": {
"name": "values"
},
"3": {
"name": "are"
},
"4": {
"name": "there"
},
"5": {
"name": "here"
}
};
$scope.objArray=function (obj) {
var result=[];
for (var key in obj) {
result.push({
key: key,
value: obj[key]
});
}
return result;
}
});
</script>
</body>
</html>
I don't think you can filter on property names. I assume these property names are some kind of IDs that you want to filter on. Then your data structure should reflect that and be like this:
$scope.names = [
{ id: "1", name: "some" },
{ id: "2", name: "values" },
{ id: "3", name: "are" },
{ id: "4", name: "there" },
{ id: "5", name: "here" }
]
Then you can filter like this:
<ul>
<li ng-repeat="x in names | filter: { id: searchId } >
{{ x.name }}
</li>
</ul>
Replace the searchId with your specific scope variable which contains the ID you are looking for.
Currently, I am trying to build an interface in OpenUI5, which is supposed to allow managing relationships. The whole application connects to the backend via oData.
Consider the following example: Two entities, "Group" and "Person". Each Group may consist of a number of Persons ("members"). What I'd like to do is to list all the Groups in a table - and for each groups members, I'd like to present a MultiComboBox to select the Persons associated with the group, like so:
Setting up the views is easy, but I have some trouble regarding the bindings. Binding a collection (like "Groups") to a table and binding properties (like "name") to an item is no problem of course, but I have no clue how to bind a collection - which is a child of another collection - to a nested list so to speak.
I don't even know if it is possible at all, especially since I want not only the Persons currently affiliated with a group to show up in the combo box, but all others as well to be able to select them. And of course, I want changes made in the interface to apply to the model as well...
Any hint towards a way to achieve the described functionality is much appreciated!
Two different models are binded to the Table..
YOu can have Groups and Members as entities with navigation property as members
you can play around here
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Mobile App in 23 Seconds Example</title>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"></script>
<!-- only load the mobile lib "sap.m" and the Blue Crystal theme -->
<script type="text/javascript">
var sampleData = {
"Groups": [
{
"GroupId": "D1",
"GroupName": "Developers",
"Members": []
},
{
"GroupId": "D2",
"GroupName": "GreenDay",
"Members": []
},
{
"GroupId": "D3",
"GroupName": "BackStreet Boys",
"Members": []
},
{
"GroupId": "D4",
"GroupName": "Managers",
"Members": []
}
]
};
var oModel = new sap.ui.model.json.JSONModel(sampleData);
var aData = [
{
key: "A",
text: "John"
},
{
key: "B",
text: "Sachin"
},
{
key: "C",
text: "Dravid"
},
{
key: "D",
text: "David"
},
{
key: "E",
text: "Sunil"
},
{
key: "F",
text: "Ronald"
},
{
key: "G",
text: "Albert"
}
];
var oMulti = new sap.m.MultiComboBox({
selectionChange: function (oEvent) {
//change your group data?
}
});
oMulti.setModel(new sap.ui.model.json.JSONModel(aData));
var oTemplate = new sap.ui.core.Item({
key: "{key}",
text: "{text}",
customData: new sap.ui.core.CustomData({
key: "{GroupId}",
value: "{GroupName}"
})
});
oMulti.bindItems("/", oTemplate);
//Build Table
var oTable = new sap.m.Table({
columns: [
new sap.m.Column({
width: "150px",
header: new sap.m.Label({
text: "Group Name"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "Members"
})
})
]
}).placeAt("content");
var oTemplate = new sap.m.ColumnListItem({
cells: [
new sap.m.Label({
text: "{GroupName}"
}),
oMulti
],
press: function (oEvent) {
alert(oEvent.getSource().getBindingContext());
}
});
oTable.setModel(oModel);
oTable.bindItems("/Groups", oTemplate);
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Here is the Live Example what I currently have now : https://dl.dropboxusercontent.com/u/11126587/input%20Tag%20Creation/tag.html
What I am wanting is that if I click on the "+ Add Another Segment" text it will Create same input box with same tag effect Like what currently have now(You can write Something and press the Enter To See the Tag Effect) .
HTML
<html>
<head>
<meta charset="utf-8">
<title>
Input Tag
</title>
<link rel="StyleSheet" href="css/jquery.tagedit.css" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.autoGrowInput.js"></script>
<script type="text/javascript" src="js/jquery.tagedit.js"></script>
<script type="text/javascript">
$(function() {
// Empty List
$( '#empty-list input.tag' ).tagedit({
autocompleteURL: 'server/autocomplete.php'
});
// Edit only
$( '#brackets input.tag').tagedit({
autocompleteURL: 'server/autocomplete.php'
});
// Arrow List
$( '#arrow input.tag' ).tagedit({
autocompleteURL: 'server/autocomplete.php',
autocompleteOptions: {minLength: 0}
});
// Custom Break Characters
$('#custom-break input.tag').tagedit({
autocompleteURL: 'server/autocomplete.php',
// return, comma, space, period, semicolon
breakKeyCodes: [ 13, 44, 32, 46, 59 ]
});
// Local Source
var localJSON = [
{ "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
{ "id": "2", "label": "Common Quail", "value": "Common Quail" },
{ "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" }
];
$('#local-source input.tag').tagedit({
autocompleteOptions: {
source: localJSON
}
});
$('#local-source2 input.tag').tagedit({
autocompleteOptions: {
source: localJSON
}
});
$('#local-source3 input.tag').tagedit({
autocompleteOptions: {
source: localJSON
}
});
// Function Source
$('#function-source input.tag').tagedit({
autocompleteOptions: {
source: function(request, response){
var data = [
{ "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
{ "id": "2", "label": "Common Quail", "value": "Common Quail" },
{ "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" },
{ "id": "4", "label": "Merlin", "value": "Merlin" },
];
return response($.ui.autocomplete.filter(data, request.term) );
}
}
});
});
</script>
</head>
<body>
<p id="local-source" style="padding:0px; margin:0px;">
<input type="text" name="tag[]" value="" class="tag"/>
</p>
+ Add Another Segment
I found this tag Effect from a someones Blog But I wanted to extend this with Click to Create New Segment . Also I am not used to with js Fiddle So I gave example link from my Drop Box .
If Someone can make this it would be great . If my posting format have anything Wrong please let me know if I Can help you with posting or giving more Information .
Thanks in advance
Something like this??
<p id="local-source">
<input type="text" class="tag"/>
</p>
<div id="add">
+ Add Another Segment
</div>
$(document).ready(function() {
$('#add').on('click', function() {
var input = '<input type="text" class="tag"/>';
$(input).appendTo($('#local-source'));
});
});