Develop Reference

How to change class of an element from ng-repeat?

I'm getting info from a json file and creating a table with the results. what i need to do is to change the class of one of the elements on a click.
this is part of my code:
$scope.firstAvailables = function(){
$http.get('/app/json/products.json')
.then(function(data){
$scope.listOfProducts = data.data.products;
}
The html view:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Nickname</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in listOfProducts">
<th><a class="one">{{x.name}}</th>
<th><input type="text" class="form" id="theBox" value="1" style="width:40%"></th>
<th><button type="button" class="btn btn-primary" ng-click="toChange(x)">Change</button></th>
</tr>
</tbody>
</table>
What i want to do is to change the class from the input on different rows (not all, just a few). For that, i'm using the next piece of code that lives inside of toChange(x) (which lives on the button):
$scope.toChange = function(val){
//to get the specific value
var specific = val;
//to create a new name for the class
var y = 'some-' + specific.name;
//with JQuery remove the previous class and add the new one
$('#theBox').removeClass('algo').addClass(y);
//With this i receive on the console all the input html tag
console.log(document.getElementById('theBox'));
}
To here everything it's ok if i click on one row. But, if then i click on another, the class from the selected row, sum the name previous name and the new instead of replace:
console log from very first clicked element
<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">
console for the second element
<input type="text" class="algo-non algo-mollit" id="theBox" value="1" style="width:40%">
console for the next element
<input type="text" class="algo-non algo-mollit algo-liquit" id="theBox" value="1" style="width:40%">
What can i do to prevent the sum of the previous class names? The idea is to have on every click:
first click:
<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">
second click:
<input type="text" class="algo-mollit" id="theBox" value="1" style="width:40%">
third click:
<input type="text" class="algo-liquit" id="theBox" value="1" style="width:40%">
I'm using AngularJs, Javascript and Jquery.
Thanx in advance.

The problem is that $('#theBox') is selecting all of the inputs.
First click: the class algo-non is added to all of the inputs.
Second click: the class algo-mollit is added to all of the inputs.
Third click: the class algo-liquit is added to all of the inputs.
Use id="theBox-{{ $index + 1 }}" or id="theBox-{{ item.name }}", then select the inputs individually.
// Guaranteed to be unique
<input type="text" class="form" id="theBox-{{ $index + 1 }}" value="1" style="width:40%">
// Risk duplicates (if items have same name)
<input type="text" class="form" id="theBox-{{ x.name }}" value="1" style="width:40%">

Storing multiple sets of radio button values into object angularjs (without jQuery)

In this slimmed down version of my controller and view, I am attempting to store the user selection of multiple sets of radio buttons, grouped in threes, within an object. I then will send the object within ajax call in order to store via SQL database. I have succeeded in doing this, however I had to use jQuery to do so. Any ideas on ways to do this within the angularjs framework, hence avoiding the jQuery usage? In case you’re wondering, the radio buttons represent present and absent, in order to keep attendance for a large list of students. Thank you!
<tr ng-repeat="s in rollCallList">
<td align="left">{{s.Last_Name}}, {{s.First_Name}}</td>
<td>
<input name="{{s.dc_number}}" id="id1{{s.dc_number}}" type="radio" value="P" ng-checked="radiocheck" />P
<input name="{{s.dc_number}}" id="id2{{s.dc_number}}" type="radio" value="A" />A
<input name="{{s.dc_number}}" id="id3{{s.dc_number}}" type="radio" value="X" />X
</td>
</tr>
<tr>
<td colspan="2">
<button class="btn" ng-show="SaveAttBtn" ng-click="SaveAtt(RollCallDate)">Save Attendance</button>
<button class="btn" ng-show="DeleteAttBtn" ng-click="DeleteAtt(RollCallDate)">Delete Attendance</button>
</td>
</tr>
$scope.SaveAtt = function (dt) {
$scope.rollCallList.forEach(function (obj) {
var dc = obj.dc_number;
var attVal = $('input[name=' + dc + ']:checked').val();
obj.status = attVal;
obj.classDate = dt;
console.log(obj);
});
}

<input name="dcNumber_{{s.dc_number}}" type="radio" ng-model="s.status" ng-value="'P'" />P
<input name="dcNumber_{{s.dc_number}}" type="radio" ng-model="s.status" ng-value="'A'" />A
<input name="dcNumber_{{s.dc_number}}" type="radio" ng-model="s.status" ng-value="'X'" />X
When looping through your items, s.status will have the selected ng-value. As for ng-checked, you should set the s.status to equal to the value you want to be auto selected. (P,A,X)

Can't set checked attribute in radio button (radio button inside table)

I tried setting radio button checked to checked="checked" however this does not seem to work .
I have tried using
$(id_radio).prop('checked',true);
document.getElementById("id_radio").checked = true;
document.getElementById("id_radio").checked = true;
document.getElementById("id_radio").checked;
$(id_radio).attr('checked',checked);
But none of them seems to be changing the attribute of checked to checked="checked"
Below is my code
js_file.js
$(document).ready(function(){
$("document").on("click",".class_radio3",function(){
var id_radio=$(this).attr('value');
$(id_radio).prop('checked',true);
console.log(id_radio);
});
});
My code for creating table
<br>
<p class="uk-text-primary uk-text-bold"><u> General Message </u></p>
<table class="uk-table uk-border-rounded uk-grid-width-* uk-panel-box uk-text-justify" border="1">
<!--create top table -->
<tr> <!--tr defines a row --> <!-- define row 1 -->
<th class="uk-width-1-10"> Recipient </th> <!-- th defines a header cell-->
<th class="uk-width-1-3"> Message </th>
<th class="uk-width-1-10"> Action </th>
<th class="uk-width-1-10"> Default message </th>
</tr>
<!-- row 2 : display results onwards and creates dynamically -->
<!-- input fields at the bottom -->
<?php
include "../connect.php";
$get_data2admin = $db->query("SELECT ID,message,user FROM test_table_1 WHERE user='General'");
if( $get_data2admin->num_rows >0 ){ //if selected rows is more than zero
while($row_msg = $get_data2admin->fetch_assoc()){
$row_msg_id=$row_msg['ID']; //$row_msg['ID'] directly using it wont display in id tag attribute
echo "<tr>";
echo "<td>".$row_msg['user']."</td>";
echo "<td>".$row_msg['message']. "</td>";
?>
<td>Delete</td>
<?php
if($row_msg['user']=='General'){
echo "<td>"."<input class='class_radio3' type='radio' name='name_radio2' value='$row_msg_id' checked=''/>"."</td>";
}
else{
echo "<td>"."-"."</td>";
};
echo "</tr>";
}
}
?>
</table>
What could be the issue? Any insight/solution? Am a beginner in PhP any advice would be helpful. Thank you
Note
Its printing out the right id selected so i dont think its selection issue
A sidenote: another issue if i try using e.preventDefault at
$("document").on("click",".class_radio3",function(e){
e.preventDefault();
The radio button becomes un-clickable.Why is that so?
Update 1: Picture of what is the issue

Try This
HTML
if($row_msg['user']=='General'){
echo "<td>"."<input id='$row_msg_id' class='class_radio3' type='radio' name='name_radio2' value='$row_msg_id' />"."</td>";
}
JS
var id_radio=$(this).attr('id');
$('#' + id_radio).prop('checked',true);

Check the below,
You can use attr like below but i would recommend use prop
function chk(element) {
$(element).attr("checked", "checked");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="age">10</label>
<input type="radio" name="age" value="10" onclick="chk(this);" />
<label for="age">15</label>
<input type="radio" name="age" value="15" onclick="chk(this);" />

I think there are a couple of issues here... one is that only one radio can be checked per group - i.e. radios with the same "name". Having checked="" is the same as checked="checked" - the absence of the attribute altogether is the "unchecked" state.
div {
width: 50%;
float: left;
}
<div>
<h1>Group 1</h1>
<p><input type="radio" name="group1" value="1" checked="checked" />1</p>
<p><input type="radio" name="group1" value="2" checked="checked" />2</p>
<p><input type="radio" name="group1" value="3" checked="checked" />3</p>
<p><input type="radio" name="group1" value="4" checked="checked" />4</p>
<p><input type="radio" name="group1" value="5" checked="checked" />5</p>
</div>
<div>
<h1>Group 2</h1>
<p><input type="radio" name="group2" value="1" checked="checked" />1</p>
<p><input type="radio" name="group2" value="2" />2</p>
<p><input type="radio" name="group2" value="3" />3</p>
<p><input type="radio" name="group2" value="4" />4</p>
<p><input type="radio" name="group2" value="5" />5</p>
</div>
Secondly, in your code, you are saying (if I understand what PHP is outputting correctly), onclick of this input (radio), set the thing with an id that is the same as my value's property "checked" to true. That thing with an id is the a tag. An a tag does not have this checked property. See below where I'm setting its background to red (via a class), instead.
By default, a radio button will become checked on click, so you don't need to reiterate this default behavior.
I have also updated the code to respond when an input's value changes, as opposed to when the document is clicked and the target was the input. It is a little lighter performance-wise to listen for the more limited scope than the broader one you had. The approach that you used used to be referred to as a "live" listener in jQuery and is more appropriate for when JS is adding and removing elements that you're listening for on the page; in your case, PHP is rendering them, so we don't need it.
Additionally, jQuery selectors require a # to indicate id, a . to indicate class, and without these selectors, it assumes it is a tag. See below where I am appending a # to select the a with the id.
// This is listening for any radio buttons who were clicked, instead of any clicks on the document (it's a little more efficient)
$("input[type=radio]").on("change", function() {
// get the other radio buttons in this group
var $group = $('input[name=' + $(this).attr('name') + ']');
// Go through the group and if the input is checked, add the class to the corresponding element, otherwise, remove it
$group.each(function() {
var id_radio = "#" + $(this).attr('value');
if ($(this).is(":checked")) {
$(id_radio).addClass("radio-is-checked");
} else {
$(id_radio).removeClass("radio-is-checked");
}
});
});
.radio-is-checked {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="uk-text-primary uk-text-bold"><u> General Message </u>
</p>
<table class="uk-table uk-border-rounded uk-grid-width-* uk-panel-box uk-text-justify" border="1">
<!--create top table -->
<tr>
<!--tr defines a row -->
<!-- define row 1 -->
<th class="uk-width-1-10">Recipient</th>
<!-- th defines a header cell-->
<th class="uk-width-1-3">Message</th>
<th class="uk-width-1-10">Action</th>
<th class="uk-width-1-10">Default message</th>
</tr>
<!-- row 2 : display results onwards and creates dynamically -->
<!-- input fields at the bottom -->
<tr>
<td>$row_msg['user']</td>
<td>$row_msg['message']</td>
<!-- Since the radio in this row is checked by default, also apply the corresponding class -->
<td>Delete
</td>
<td>
<input class='class_radio3' type='radio' name='name_radio2' value='one' checked />
</td>
</tr>
<tr>
<td>$row_msg['user']</td>
<td>$row_msg['message']</td>
<td>Delete
</td>
<td>
<input class='class_radio3' type='radio' name='name_radio2' value='two' />
</td>
</tr>
<tr>
<td>$row_msg['user']</td>
<td>$row_msg['message']</td>
<td>Delete
</td>
<td>
<input class='class_radio3' type='radio' name='name_radio2' value='three' />
</td>
</tr>
</table>
Thirdly, the "default" behavior of a radio button is to become checked. By doing e.preventDefault you're cancelling that default behavior, so it doesn't become checked!

check to see if a particular checkbox is checked in a td using jquery

I am trying to make textbox readonly or not depending on the value of a checkbox of personalLoan. If personalLoan checkbox is checked I want the text to be not readonly. If it is unchecked then I want the text box to be readonly. Here is one of the rows
<tr id="mytableRows">
<td class="even"><input type="checkbox" value="true" name="homeLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="autoLoan" ></td>
<td class="even"><input type="checkbox" value="true" name="personalLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="noLoan" ></td>
<td class="odd"><input type="text" name="peronalAmount" value="1" readonly></td>
</tr>
I so far has this code
$(document).ready(function(){
$('.test tr').click(function (event) {
$(this).find(':checkbox').each(function(p){
if($(this).attr('name') == 'personalLoan'){
if ($(this).is(':checked')) {
alert("checked");
}else{
alert("unchecked");
}
}
});
});
});
This tells me the current status of the checkbox but what I really need is to know onchange of the personalLoan checkbox so I can make the textbox readonly or not in that row (td)
thanks

For my own sanity, here is what I understand the solution to be.
$('input[type=checkbox]', '.test').on('change', function(e) {
if (this.name === 'personalLoan') {
$(this).parents('tr').find('input[type=text]').prop('readonly', !this.checked);
}
});
Assuming a table with class test, this allows input when personalLoan is checked, and toggles to readonly when unchecked.
Demo on jsFiddle. (I've highlighted the checkbox in red.)
If this isn't it, then I really have no idea what you're trying to do.

It seems to me that you really want radio buttons, not checkboxes, and that the amount field should be set to disabled rather than readonly if the user selects "no loan".
Anyhow, here's an approach you can take. I've put the code in–line for convenience, it can re-implemented in jQuery or whatever you want, it's just an example of how to do what you seem to be trying to do.
The timeout is used so that the one click event can be used for any element in the form, including the reset button.
<form onclick="
var form = this;
setTimeout(function() {
form.personalAmount.readOnly = form.loanType[3].checked;
},0);
">
<table>
<tr>
<td><input type="radio" value="homeLoan" name="loanType">Home</td>
<td><input type="radio" value="autoLoan" name="loanType">Auto</td>
<td><input type="radio" value="personalLoan" name="loanType">Personal</td>
<td><input type="radio" value="true" name="loanType">None</td>
<td><input type="text" name="personalAmount" readonly></td>
<tr>
<td colspan="4">
<input type="reset">
</table>
</form>

Jquery .datepicker() - on a dynamic table

I am trying to create a dynamic table with each row containing two date fields. I am using Jquery datepicker. For some reason only the first row is showing in the date picker calendar. Other dynamically created fields are not showing the calendar. I should mention that the first row is by default in place when this page is loaded. Only from the second line it's dynamically created. All solutions say I should reinitialize the .datepicker(). I did and it's not working. I tried changing names and Ids still no solution. Is there something I am missing here. Below is the code used for this purpose.
Yes I know there are several questions related to this here in this site. But some how I couldn't find a solution to this as they aren't working for me.
Javascript:
$("#addurl").click(function(){
var idValue = "input[id='breachCount']";
var counter = $(idValue).val();
var trValue = $("#rowPH"+counter).html();
var countNew = parseInt(counter)+1;
$(idValue).val(countNew);
var newFile = "<tr id='rowPH"+countNew+"'>"+trValue+"</tr>";
$(newFile).insertBefore("#addLink");
var nameTemp, actNm;
var dcounter=0;
$('#rowPH'+countNew+' input').each(function(){
nameTemp = $(this).attr("name");
if(nameTemp){
actNm = nameTemp.substring(nameTemp.indexOf("."));
$(this).attr("name","breachList["+countNew+"]"+actNm+countNew);
}
});
$('.datepicker').each(function(i) {
this.id = 'datepicker' + i;
}).datepicker();
});
Html:
<table>.....
<tr id="rowPH0">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[0].breachText">
</td>
<td>
<input id="datepicker0" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[0].activationDt"><img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
<input id="datepicker1" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[0].deactivationDt">
<input type="checkbox" name="breachList[0].deactiveNa" checked="checked">
</td>
<td>
<input class="text_box_2" type="text" value="" name="breachList[0].note">
</td>
</tr>
</tbody>
<tbody>
<tr id="rowPH1">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[1].breachText1">
</td>
<td>
<input id="datepicker2" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].activationDt1">
<img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
<input id="datepicker3" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].deactivationDt1">
<input type="checkbox" name="breachList[1].deactiveNa1" checked="checked">
</td>
<td>
</tr>
<tr id="addLink">
<td colspan="5" >+ Add another row
<input type="hidden" id="breachCount" value="${fn:length(auditStandardBreachsForm.breachList)-1}"/>
</td></tr>
...</table>

Not necessary to assign unique ids to each field. Datepicker can identify each uniquely. Try putting following code in your js.
$('.datepicker').each(function(){
$(this).datepicker();
});
I've used it for multiple fields.
*Update*
I read your js code and it's messed up. All you want to do is (from what you've stated) is when user clicks on Add Another Link , you want to add a new row in table and want them to be able to work with jQuery datepicker. Right?
The reason above code is not working is, in this case, text fields are being added dynamically . While datepciker gets initialized on onDocumentReady. So datepicker can not attach itself to these newly created form fields. A solution is to attach datepicker while creating new fields itself.
Here's a working model I prepared for what you want to achieve. See demo on http://jsfiddle.net/phazorrise/bRE6q/

here is my updated code
Javascript
Modified at the bottom of the above javascript
var nameTemp, actNm;
$('#rowPH'+countNew+' input').each(function(){
nameTemp = $(this).attr("name");
if(nameTemp){
actNm = nameTemp.substring(nameTemp.indexOf("."));
$(this).attr("name","breachList["+countNew+"]"+actNm);
$(this).attr("id","breachList["+countNew+"]"+actNm+countNew); //added
}
});
$('.datepicker').each(function(i) {
$(this).removeClass('hasDatepicker').datepicker(); //changed ref: phazor comment
});