I have a jquery template with N radio buttons and I need to select radio button with value that I pass after loading template from external html file(using jQuery.tmpl() method). Is there a good way of selection of radio button in template without multiple {{if}}, {{else}} statements, duplicate code and selectors?
In what format is your data coming back from the server? If it's a JSON array, could you do something like this?
html:
<script id="myTemplate" type="text/html">
<input type="radio" value="${value}"{{if selected}} checked{{/if}}>${name}</input><br />
</script>
<div id="myDiv">
</div>
javascript:
var myData = [
{name: 'test 1', value : 'radio1', selected : false},
{name: 'test 2', value : 'radio2', selected : false},
{name: 'test 3', value : 'radio3', selected : true},
{name: 'test 4', value : 'radio4', selected : false}
];
$('#myTemplate').tmpl(myData).appendTo('#myDiv');
http://jsfiddle.net/JbTwB/1/
If you have the value of the desired radio, you could do something like:
jInstance.find('input[value=' + desiredValue + ']').attr('checked', true);
This assumes that jInstance is the newly-created copy of the template, and that desiredValue exactly matches the value of the radio button you'd like to be pre-selected.
If you only know part of the value, there are other jQuery selectors you can use to target that input.
If you're looking for a more general "form pre-filling" routine, you'll need to establish some kind of format for storing the set of pre-fill values, and a mapping from that format to the template. But it can be done, and it's not necessarily that hard, either.
Related
I have a simple form
<form>
Name:
<input type="text" ng-model="edit"><br />
</form>
and a simple array in the controller
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'}
];
I am repeating the array in the view
<div ng-repeat="x in statuses">{{x.text}}<button ng-model="edit">edit</button></div>
so i was wondering when i click the edit button can the data be populated inside the form input field using ng-model ?
plunker
You can do that by using a ng-click in yout button instead of a ng-model.
Your button will have to run a function on click, just like this :
<button ng-click="editFunction(x)">edit</button>
And then in your controller, there is the function :
$scope.editFunction = function(x){
$scope.edit = x.text;
}
In this function you will get the value of x and set this value in your form ng-model.
There is a working Plunker
HTML:
<select data-ng-options="o.id as o.device for o in deviceList" data-ng-model="selectedDeviceID"></select>
<input type="text" id="deviceWidth" ng-model="deviceList[selectedDeviceID].width" placeholder="width"/>
Data:
$scope.deviceList = [{id: 0, device: 'Apple iPhone 5', width:320,height:568},
{id: 1, device: 'Nokia Lumia 920', width:320,height:533},
{id: 2, device: 'Samsung Galaxy S III', width:360,height:640}]
When I select devicename in dropdown, respective width will be displayed in textbox. It is working fine. But I dont want change the original values, when I change value in textbox.
Simply, I want to show the value in textbox and editable. But I dont want this value to be stored.
You add ng-change="updateDeviceWidthTextbox()" to the select, change the model of the input-field to something like ng-model="deviceWidthTextbox" and in the controller you implement the function:
$scope.updateDeviceWidthTextbox = function() {
$scope.deviceWidthTextbox = deviceList[selectedDeviceID].width;
};
May be i didn't understand you correctly. Hope I could help you.
<select ng-change="changed(selectedDeviceID)" data-ng-options="o.id as o.device for o in deviceList" data-ng-model="selectedDeviceID"></select>
<input type="text" id="deviceWidth" ng-model="inputText" placeholder="width"/>
In your controller
$scope.changed = function (selectedDeviceID) {
$scope.inputText = $scope.deviceList[selectedDeviceID].width
});
I am getting data from server and loading them to JQuery auto suggest. It's works fine. But I don't know how to configure it. I Initialize my text box to it. Now i need when user select one value from it, He will be not able to choose another value of he cant enter a word, except he can delete old value.
Here is my code :-
$(document).ready(function(e){
//handle auto suggestion when compose message
var user_ids = {};
//var hidden_user_ids = $('input:hidden[name=user_ids]');
var url = '/account/insiderName';
var conf = {
selectedItemProp: 'name',
searchObjProps: 'name',
asHtmlID: 'insider_ids',
neverSubmit: true,
multiSelect: false,
preFill: ',' //, {{attributes: {name: 'joe', value: '12345'}, num: '1'}},
};
$('.insiderUser').autoSuggest(url, conf);
});
Here is my text Box Code:-
<div class="field to"><input type="text" name="toInsider" value="" class="insiderUser"/></div>
Add this configuration option also:
selectionLimit: 1
since it defaults to false, which means no limit.
From the docs: https://github.com/wuyuntao/jquery-autosuggest
I want auto complete text box with text and id .I used the following code for auto complete in my application
<script type="text/javascript">
var $auto=$.noConflict();
$auto(document).ready(function(){
var data3 = ['niju','vivek','anil','Anil'];
$auto("#employee").autocomplete(data3);
});
</script>
<input type="text" name="employee" id="employee" value="" class="inp-form">
In this code we faced one drawback .There can be duplicate entry is possible since the same values as been repeated .
How to get id value instead of text label ?
Any suggestions are highly appreciated.
Demo Here
You can try with a source define like : [ { label: "Choice1", value: "value1" }, ... ].
See documentation here : autocomplete#option-source
In your case it would be something like :
var data3 = [{label: 'niju', value: 1},{label : 'vivek', value : 2}, ...];
$auto("#employee").autocomplete({source: data3});
This puts a checkbox next to each item of a list where changing the checked status adds/removes that value from the SelectedItems array:
<script type="text/x-jquery-tmpl" id="tmpl">
<input name="cSelect"
type="checkbox"
value="${ ID }"
data-bind="checked: VM.SelectedItems" />
<!-- Add other item content here -->
</script>
VM.SelectedItems = ko.observeableArray([]);
At any point, SelectedItems contains the ids of the checked items.
What if I wanted the checkbox to add and remove an object to SelectedItems? For example, I want to store an actual object of { id : 3, checked : true } instead of serializing it for the value attribute?
When using the checked binding against an array, it will only work with an array of primitives.
One option is to create a computed observable that builds your array of objects from the selected ids.
var ViewModel = function() {
var self = this;
this.items = [{id: 1, name: "one"}, {id: 2, name: "two"}, {id: 3, name: "three"}];
this.selectedIds = ko.observableArray();
this.selectedItems = ko.computed(function() {
return ko.utils.arrayMap(self.selectedIds(), function(id) {
return ko.utils.arrayFirst(self.items, function(item) {
return item.id == id; //selected id will be a string
});
});
});
};
ko.applyBindings(new ViewModel());
If you are dealing with a large number of items, then you might want to build an object that is an index of the items by key, so that you can loop through selectedIds and directly grab each object to reduce the amount of looping.
Here is a sample: http://jsfiddle.net/rniemeyer/pQQsY/
With KnockoutJS 3.0.0 you can use the checkedValue parameter:
<input name="cSelect" type="checkbox" value="${ ID }" data-bind="checkedValue: $data, checked: VM.SelectedItems" />
If your binding also includes checkedValue, this defines the value
used by the checked binding instead of the element’s value attribute.
This is useful if you want the value to be something other than a
string (such as an integer or object), or you want the value set
dynamically.
More details in the documentation
We can use like
<input type="checkbox" data-bind="attr: {value: JSON.parse($data).Id}, checked: $root.selectedIds"/>
and write a click event in the checkbox to get a selected data or subscripe method for selectedIds and get the selected id entire details as a JSON and we have to use JSON.parse to get the data.
but I don't how to store entire object with out JSON.