Javascript Bootstrap randomize checkboxes - javascript

I have the following situation I can not solve. I would be very thankful if anyone had an idea:
My webpage contains a table of players. Each line (player) contains two checkboxes: One that selects if the player is active (checked) or not, the other which team he/she belongs to (checked=Team 1; unchecked=Team 2).
So each line looks sth like this:
<tr>
<td><input id="plyr2_active" type="checkbox" name="plyr_active[]" value="2"></td>
<td><input type="checkbox" id="plyr2_team" name="plyr_team[2]" data-on-color="danger" data-off-color="success" data-on-text="RED" data-off-text="GREEN" checked value="1"></td>
</tr>
I'd like to add a button that, when clicked, will run a function that randomizes the teams of the ACTIVE players. Meaning that the players will be shuffled and half of them belong to one, the other half to the other team.
What I tried: Get all checkbox states in an array, then shuffle() the array and try to change the checked-state via bootstrap. Miserably failed :-(
Any help will be much appreciated. Thanks!!

Okay, this should help to get you started. It shows how to pull a list of active players (using jQuery) from your table.
Assuming you have a button with an id of 'shuffleBtn':
<button id="shuffleBtn">Shuffle<button>
and a table with id 'players':
<table id='players'>
:
</table>
-
$("#shuffleBtn").click(function() {
var newPlayerArray = [],
id = 1;
$("#players tr td:first-child").each(function() {
if ($(this).find('input:first').prop('checked')) {
newPlayerArray.push(id);
}
id++;
});
console.log(newPlayerArray);
});
This will display an array of the active players (assuming the first row is player 1, the second player 2, etc.) on the console.
Example: [1,3,4]
It then iterates each row () and grabs the first column (). Then for each of those it finds the first <input> and checks if the 'checked' property is present (this means the checkbox has been clicked).
I am just pushing the row index (starting at 1) so you may need to change how you interpret the associated player.

Related

AngularJS add/remove item from dynamic object

Currently I have problem with adding/removing content dynamically from my application.
Scenario: I have few buttons in each row of table. After click on specified button, its value + typename should be visible on list below table. Button should also get active-class.
On the other hand, click on ACTIVE button should remove specified item from list and should also remove active-class.
My idea of adding elements was to create empty itemsArray = [] and push into that array details about clicked elements. PS. I can click all buttons from all rows so all can be active.
Question: how to remove specified item? On what should I iterate ? Buttons in first row have indexes equal to 1,2,3...
Buttons in second row have indexes equal to 1,2,3... and all rows have the same.
Splice won't work because script doesn't know which index=1, index=2 should remove.
<tr ng-repeat="score in scores" ng-class-odd="'odd-row'" ng-class-even="'even-row'">
<td class="time">{{score.time}}</td>
<td class="result">{{score.result}}</td>
<td class="match-odds">
<a class="default-btn" ng-repeat="match_odd in score.match_odds">{{match_odd.value}}</a>
</td>
</tr>

AngularJS toggle getting blocked by Math function

I have rows where cells are populated with words from an API. I've added a toggle feature on the cells to show if a user selected it. I'm using ng-class={selected:toggle} ng-click="toggle = !toggle" to toggle a CSS class to show the cell is selected or not.
HTML
<tr ng-repeat="row in game.rows">
<td id="row-{{$parent.$index+1}}-col-{{$index+1}}" ng-repeat="word in row.words" ng-class={selected:toggle} ng-click="toggle = !toggle"><div class="points">{{generateRandomPoints()}}</div>{{word}}</td>
</tr>
I added a Math function to the controller to randomly assign points to each cell (<div class="points">{{generateRandomPoints()}}</div>):
JavaScript
$scope.generateRandomPoints = function(){
return Math.floor((Math.random()*5)+2);
};
This function appears to be blocking my ability to use the toggle feature. Another oddity is that each click of a cell re-generates random numbers from the Math function.
Any thoughts why the toggling would be blocked?
It appears your generateRandomPoints call is punching through the local scope of your repeated element. Try creating a function like this:
$scope.toggle(index) {
game.rows[index].toggle = !game.rows[index].toggle;
}
And call it like ng-click="toggle($index)".
Full documentation for ngRepeat can be found here.

Delete multiple ng-repeat elements on click of a single button

I have a table showing project names as shown in below image ,
On delete button click, I am passing the selected check-boxes data as array of objects to my controller
[{id:1,name:'Name 8'},{id:2,name:'Name 7'}]
Then deleting the names from the table at the server side. This all works fine but how do i remove the rows from DOM after deleting them?? I went through this post which says how to remove ng-repeat elemets from DOM but in that case the elements are removed one at a time, by passing the $index to the splice() function
In my case i need to remove multiple rows. If ill have to use the splice function in my controller how do i get the index from the selected rows object? Or is there any better way of doing it.
Hope my question is clear!
Update: jsFiddle
Solution: Well i had to modify #wickY26 answer a bit to suite my scenario. Here is my update jsFiddle
What i did was , in the delete() change code to
angular.forEach($scope.projects, function (row, index) {
if($scope.projects[index].checked) {
$scope.projects.splice(index,1);
}
});
You can keep selected rows on an object via binding checkbox with ng-model,
so example table html should be like this
HTML
<table class="table table-bordered">
<tbody>
<tr ng-repeat="row in data" ng-class="{'success' : tableSelection[$index]}">
<td>
<input type="checkbox" ng-model="tableSelection[$index]" />
</td>
<td ng-repeat="cell in row">
{{cell}}
</td>
</tr>
</tbody>
</table>
and if you define a function in your controller which travel through your data and splice array depends on tableSelection object boolean values...
UPDATE
after your comment I debug my code and see I cannot remove multiple rows same time, so I look at my code and change some part of it...
at my example you cannot delete multiple rows same time because everytime you splice an element from data array you shift indexes of array for rest, so right way to do it starting from last index,
Here new CONTROLLER
$scope.removeSelectedRows = function() {
//start from last index because starting from first index cause shifting
//in the array because of array.splice()
for (var i = $scope.data.length - 1; i >= 0; i--) {
if ($scope.tableSelection[i]) {
//delete row from data
$scope.data.splice(i, 1);
//delete rowSelection property
delete $scope.tableSelection[i];
}
}
};
I update my PLUNKER added comments and some other functionallty as well...

dygraphs setVisibility() with muiltiple plots on page

I've been working with dygraphs and have gotten a webpage working well with check boxes to toggle on and off visibility for a potentially infinite number of dygraphs on a page.
I am however now stuck when I've added buttons to set the values all on or all off.
I've found a basic example I've followed: http://dygraphs.com/tests/color-visibility.html which has the ID names of the check boxes 0-3. This works well with one plot, or even with multiple plots as long as I don't have to call the ID of the check boxes. I had the whole system working with repeating the ID numbers.
However when I add a button to automatically check the box I need uniquely identified check boxes or else it only checks and unchecks the first set of boxes. Then once I rename the check box ID the original visibility function doesn't work.
HTML:
<input type=checkbox id=0 onClick="change(this,plotname)" checked=true > A
<input type=checkbox id=1 onClick="change(this,plotname)" checked=true > B
<input type=checkbox id=2 onClick="change(this,plotname)" checked=true > C
<input type=checkbox id=3 onClick="change(this,plotname)" checked=true > D
<input id="all_On" type="button" value="All On" onclick="checkTheBoxes([true, true, true, true],<%= chartnumber %>)">
JS code:
function change(element,name) {
name.setVisibility(element.id, element.checked);
}
function checkTheBoxes(tfarray,section) {
for (var j = 0;tfarray.length;j++){
document.getElementById(j).checked = tfarray[j]
document.getElementById(j).onclick()
//I have been using the section input to identify plots with the renamed IDs
}
}
I believe the problem lies in the "this" call when passing through the change function. When I probe with Firebug the element is input#3 if I click check box number 3 and this works. However if I have renamed the ID something like plot2box3 the firebug element is input#plot2box3 which I believe the setVisibilty function doesn't know what to do with.
The question is then, how do I keep the "this" reference outputting the correct element while being able to uniquely call the check box.
Thanks!

adding n removing row in table with unique id of elements

here's a demo table
<table id="table1">
<tr>
<td><label>name</label><input type="text" id= "name1"/></td>
<td><label>age</label><input type="text" id= "age1"/></td>
<td><input type="button" id= "addRow"style="background-image:url("images/addicon.png");"/></td>
</tr>
and jquery code m trying is
$("#addRow").live("click", function (e, index) {
var val = ("#table1 tr").length();
val++;
$('#table1 tbody > tr:last').after('<tr><td><label>name</label><input type="text" id= "name"'+val+'/></td><td><label>age</label><input type="text" id= "age"'+val+'/></td><td><input type="button" id= "addRow"style="background-image:url("images/addicon.png");"/></td><td><input type=button id="deleteRow" style="background-image:url("images/removeicon.png");"></td>');
});
$("#deleteRow").live("click",function(e,index){
$(this).parent().closest("tr").remove();
});
Now problem comes when somebody add a row 2 times and delete a row
i.e val will be name2, name3
suppose name2 is deleted
then again adding row no. of rows is 2 so val++
result in 3
and new row will have name3 as id, this is creating problem for me.
What actually i want is, I should maintain the row count
1 2 3 ... like this irrespective what row is deleted.
Can anyone help me out with this, I have gone through loads of tutorial but none of them have maintained a uniform rowcount that's y i have put up this question.
You can use input names like name[] to have an array of values in the form. This is easier than using things like name1, name2, etc. If your concern is the labels, you can wrap an input in a label and skip the for, like so:
<label>String: <input></label>
Clicking String: focuses the input.
If you want to stick with what you have, just store val one scope outside of .click and increment it every time. Don't rely on the length.
By the way, you should also switch from .live to .on assuming it's available.

Categories