<table class="table">
<tr>
<td>
<input type="radio" id="radio1" name="1" checked="checked" class="radio"/>
</td>
<td>
<input type="radio" id="radio2" name="1" checked="checked" class="radio"/>
</td>
</tr>
</table>
I want to follow default behavior of radio group, but with one more functionality, Suppose any of radio is selected, now if same radio is selected/clicked then it will unchecked itself. I have tried using 'mouseup' event but its not working
function radioSearchFn(obj)
{
if(obj.checked == true)
{
obj.checked = false;
obj.removeAttribute("checked");
}
}
DEMO
Answer to your question here.
Radio buttons are meant to be required, therefore one of them must always be checked. If you want this attribute gone, you need to use checkboxes, which are meant to serve what you need.
More about checkboxes
If you still insist on using radio buttons, try this JQuery code, written in another answer in the post I referred to.
var radio_button=false;
$('.radio-button').on("click", function(event){
var this_input=$(this);
if(this_input.attr('checked1')=='11')
{
this_input.attr('checked1','11')
}
else
{
this_input.attr('checked1','22')
}
$('.radio-button').prop('checked', false);
if(this_input.attr('checked1')=='11')
{
this_input.prop('checked', false);
this_input.attr('checked1','22')
}
else{
this_input.prop('checked', true);
this_input.attr('checked1','11')
}
});
It's easy, you could add an attribute instead radio button is checked first time. Later you check this new attribute for next change. Example:
$("input[type='radio']").change(function () {
$(this).attr('checked_status', true);
});
$("input[type='radio']").click(function () {
if ($(this).attr('checked_status')) {
$(this).prop('checked', false);
$(this).attr('checked_status', false);
}
});
Related
i have function on click vuejs2
this is the function
#change='units(chosed_item.id,$event)'
and this is the code for this function to send the id and put result inside array
units:function(item_id,$event){
var unit_id = event.target.value;
$.ajax({
type:'POST',
url: path+'unit_search',
data: {unit_id,item_id},
success:(data) => {
this.voucher_items.push({
id:data['id'],
item_desc_ar:data['item_desc_ar'],
item_unit_name:data['item_unit_name'],
item_smallest_unit_cost:data['item_smallest_unit_cost'],
item_smallest_unit:data['item_smallest_unit'],
item_smallest_unit_selling_price:data['item_smallest_unit_selling_price'],
item_discount_value:data['item_discount_value'],
item_tax_value:data['item_tax_value'],
});
this.chosed_items = [];
}
});
},
and i loop the voucher_items in loop
like this
<tr v-for="voucher_item , key in voucher_items">
<td>
<input name='items_quantity_coast[]' type='text' class='form-control' />
</td>
<td>
<input type='number' name='items_quantity_quantity[]' min='1' class='form-control' v-model='voucher_item.quantity' required />
</td>
<td>
<input type='number' name='items_quantity_discount[]' min='1' class='form-control' v-model='voucher_item.item_discount_value_input' min='1' max=''/>
</td>
</tr>
how can i make the input focus go to last input in voucher_items like when i click unit function do the code above and focus the input in
<input type='number' name='items_quantity_discount[]' min='1' class='form-control' v-model='voucher_item.item_discount_value_input' min='1' max=''/>
thanks
You can use a custom directive ..
In your component, add a directives option ..
directives: {
focus: {
inserted(el) {
el.focus()
}
}
}
Use your new v-focusdirective to focus on the desired element ..
This will focus on the last input on your last row. If you want finer control on which element to focus you can create a custom directive and use it on an upper level element (the table element for example), then use normal DOM traversing techniques(firtElementChild, lastElementChild et al.) to target specific elements. The process will be the same.
I have a directive that sets a CSS class on a form element based on its $valid value. I want to use it with a radio button list. There a multiple radio buttons in the set but I only need to add the directive to one of them because a) they all control the same model and b) the CSS ultimately will reveal a single image tag which I only want once per radio button list.
Here's some HTML:
<div ng-app="myApp">
<input required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
<input add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>
Script:
angular.module('myApp', []).directive('addValidationClass', function() {
return {
require: '^ngModel',
link: function($scope, $element, $attrs, $ngModel) {
if (!$ngModel) return;
var update = function () {
alert($ngModel.$dirty);
$element
.removeClass()
.addClass($ngModel.$dirty ? ($ngModel.$valid ? 'valid' : '') : '');
};
$scope.$watch($attrs.ngModel, function (newValue, oldValue) {
update();
});
}
};
});
Fiddle: http://jsfiddle.net/JqBgs/
You can see from the fiddle that the watch fires update regardless of the radio button clicked on. This is what I expected because both radio buttons control the same model. However you can also see that the left radio button isn't dirty. So the CSS class isn't applied.
Why isn't it dirty?
I put this in the HTML:
<div ng-app="myApp">
<input ng-change="myForm.validateRadio.$dirty = true" required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
<input name="validateRadio" add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>
What a ridiculous bug in Angular.
I am using Spring MVC. I have a view that dynamically populates 2 dropdown lists based on queries called from the controller. I want to dynamically run a query based on the first dropdown selection to change the second dropdown, which means access the controller again (I think). Can I access the controller multiple times from the same view without changing the view? So for example, say starting out the first dropdown was a list of US States and the second started out as a list of all US cities, if I selected NC from the first list I would want to change the second list to include only NC cities.
Here is an example of the first dropdown:
<select name = "states" onChange = "populateCityList(this.options[this.selectedIndex].value)">
<option value ="*">All States</option>
<c:forEach items="${states}" var ="state">
<option value ="${state}">${state}</option>
Pretty straightforward, but I don't really know where to go from there. I have it calling a Javascript function within the current view right now, but I don't know if that is correct or what to even do within that function.
The magic word is AJAX.
Your JavaScript function needs to make an AJAX request to your controller, which should ideally return a JSON data structure containing the values for the second drop down. Your JS function should then have a callback that catches the JSON from your controller and populates the drop down HTML by manipulating the DOM. JQuery is the way to go. There are lots of examples on the web, just search for it.
Hi #user2033734 you can do something like this:
JQuery code
$(document).ready(function() {
$("#id1").change(function () {
position = $(this).attr("name");
val = $(this).val()
if((position == 'id1') && (val == 0)) {
$("#id2").html('<option value="0" selected="selected">Select...</option>')
} else {
$("#id2").html('<option selected="selected" value="0">Loading...</option>')
var id = $("#id1").find(':selected').val()
$("#id2").load('controllerMethod?yourVariable=' + id, function(response, status, xhr) {
if(status == "error") {
alert("No can getting Data. \nPlease, Try to late");
}
})
}
})
})
And JSP within
<table style="width: 100%;">
<tr>
<td width="40%"><form:label path="">Data 1: </form:label></td>
<td width="60%">
<form:select path="" cssClass="" id="id1">
<form:option value="" label="Select..." />
<form:options items="${yourList1FromController}" itemValue="id1" itemLabel="nameLabel1" />
</form:select>
</td>
</tr>
<tr>
<td width="40%"><form:label path="">Data 2: </form:label></td>
<td width="60%">
<form:select path="" cssClass="" id="id2">
<form:option value="" label="Select..." />
<form:options items="${yourList2FromController}" itemValue="id2" itemLabel="nameLabel2" />
</form:select>
</td>
</tr>
</table>
I hope help you :)
One solution would be to move some of the data gathering out into a service, so your main controller could use the service to gather the data before sending to the view.
So I have a viewModel that looks like this
self.zones = ko.observableArray(zones);
ko.utils.arrayForEach(self.zones(), function (zone) {
//Get all rooms for the zone
zone.rooms = getChildren("Organization", "Organization", zone.ID);
if (zone.rooms.length > 0) {
zone.buttons = ko.observableArray([]);
//For each Room in Zone find the Buttons and add them to the Zone.buttons ObservableArray
ko.utils.arrayForEach(zone.rooms, function (room) {
room.buttons = getChildren("Organization", "ButtonAssign", room.ID, { scheduleID: self.scheduleID });
ko.utils.arrayForEach(room.buttons, function (button) {
zone.buttons.push(button);
});
});
}
So a you can see a zone has a property called buttons that is an Observable array
In my view I loop through each zone and output the buttons but one of my zones does not contain any buttons and throws this exception:
Error: Unable to parse bindings.
Message: ReferenceError: buttons is not defined;
Bindings value: foreach:buttons
<table>
<tbody>
<tr data-bind="foreach: zones" style="vertical-align: top;">
<div class="zoneDiv">
<span data-bind="text: Name"></span>
<div data-bind="foreach:buttons" class="buttonsList">
<div class="buttonField">
<div data-bind="text: Name" style="float: left; width: 140px;">
</div>
</div>
<input type="hidden" data-bind="value: ID" />
</div>
</div>
</td>
</tr>
</tbody>
</table>
So my question is: How do you check for null values in an observable array before you start looping on it?
Additionally how do you check for a null value on a single property such as button.Name so that if the button has a name Ill write it out in a div and if it does not I wont write out anything (Or a default text).
So basically null checks on viewmodel properties in the view so I wont get this exceptions
Thanks
So my question is: How do you check for null values in an observable
array before you start looping on it?
Use the if binding: http://knockoutjs.com/documentation/if-binding.html
But in the case of your code, why don't you just set an empty observableArray, that way you don't need to introduce any conditionals:
self.zones = ko.observableArray(zones);
ko.utils.arrayForEach(self.zones(), function (zone) {
zone.rooms = getChildren("Organization", "Organization", zone.ID);
zone.buttons = ko.observableArray([]);
if (zone.rooms.length > 0) {
//For each Room in Zone find the Buttons and add them to the Zone.buttons ObservableArray
ko.utils.arrayForEach(zone.rooms, function (room) {
room.buttons = getChildren("Organization", "ButtonAssign", room.ID, { scheduleID: self.scheduleID });
ko.utils.arrayForEach(room.buttons, function (button) {
zone.buttons.push(button);
});
});
}
});
I have got several forms on my page. Here is an example of one.
<table width="400px">
#foreach (var menu in Model)
{
using (Html.BeginForm())
{
<tr>
<td>
#menu.Menus
</td>
<td>
#menu.Submenu
</td>
<td>
<input type="submit" name="update" value="Update" />
<input type="submit" name="delete" value="Delete" />
#Html.Hidden(#menu.MenuID.ToString());
</td>
</tr>
}
}
</table>
I want each of my actions to be invoked by the forms submit button. So the an action will be invoked depending on whether there was the update submit button pressed, or delete button pressed or whether a button was pressed with no name attribute...I also want my form to be post for only.
How can I achieve all that?
In the view you wrap each button with its own form. For example for update
#using (Html.BeginForm("Update","Home"))
{
#Html.Hidden(menu.MenuID.ToString());
}
#using (Html.BeginForm("Delete","Home"))
{
#Html.Hidden(menu.MenuID.ToString());
}
For each action you'll have in the controller
[HttpPost]
public ActionResult Update(int id)
{
//do stuff
}
[HttpPost]
public ActionResult Delete(int id)
{
//do stuff
}
I believe though the update needs more than an id, those fields should be included in the form and in the action's arguments.