I am trying to move checked checkboxes from one checklist, which is actually in a table, to another checklist in another table so the two are in sync. However, this code gives me the syntax error "Unexpected end of input" in Chrome and won't work:
var checkedBoxes = document.querySelectorAll('.contentChecks');
var chkArray = [];
chkArray = $.map(checkedBoxes, function(el) {
if(el.checked) { return el.id.substring(1, el.id.length) }
});
for (var i = 0; i < chkArray.length; i++)
{
var checkbox = document.getElementById("B" + chkArray[i]);
checkbox.checked = true;
var row = $("#B" + chkArray[i]).closest('tr'); // row with changed checkbox
row.insertBefore(row.parent().find('tr:first-child')); // move to top
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
<thead>
<tr>
<th>Checkboxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="A127" class="contentChecks" checked />
<label for="A127" class="todo">
<i class="fa fa-check"></i>Sample Text 1
</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="A32" class="contentChecks" checked />
<label for="A32" class="todo">
<i class="fa fa-check"></i>Sample Text 2
</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="A1543" class="contentChecks" checked />
<label for="A1543" class="todo">
<i class="fa fa-check"></i>Sample Text 3
</label>
</td>
</tr>
</tbody>
</table>
<table id="table2">
<thead>
<tr>
<th>Checkboxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="B127" class="contentChecks2" />
<label for="B127" class="todo">
<i class="fa fa-check"></i>Sample Text 1
</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="B32" class="contentChecks2" />
<label for="B32" class="todo">
<i class="fa fa-check"></i>Sample Text 2
</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="B1543" class="contentChecks2" />
<label for="B1543" class="todo">
<i class="fa fa-check"></i>Sample Text 3
</label>
</td>
</tr>
</tbody>
</table>
I've tried debugging this a million ways to no avail, except I have concluded that something must be wrong with my for loop since commenting out the other code still gave the error. I've put this code in JavaScript validators and they all conclude the syntax is valid and the "end of the input" is just fine. Also it works just fine in my code snippet.
IMPORTANT: I am pulling this JavaScript code from an external file, so it is HTML along with this JS being returned from an AJAX call to the webpage the user is seeing, replacing the previous HTML.
I found the solution - it was a scope issue. Trying to pull HTML and JavaScript from an external file didn't work on the AJAX call, so I just put the same code under the complete section of the AJAX call of the same file/page and it worked :)
Related
i am trying bellow jquery code to perform some dynamic changes to my front view to make the odoo switch toggle to behave like radio button.so it could be selected one at a time like radio button
Note: console.log("test") is working but the code with css selector is not working
please guide me how i run my script to work it fine
$(document).ready(function(){
$(".wk_checked_question").click(function(){
alert("you click me!");
});
console.log("test");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
*test.html**
<tbody>
<tr>
<td class="question_id" style="width:70%">Q1. t-shirt coler
size</td>
<td class="question_id" style="width:50%">$ 120.00</td>
<td><label class="switch">
input class="wk_checked_question" data-id="2" type="checkbox">
<span class="check_box round"></span>
</label>
</td>
</tr>
<tr>
<td class="question_id" style="width:70%">Q2. t-shirt size</td>
<td class="question_id" style="width:50%"> Free</td>
<td>
<label class="switch">
<input class="wk_checked_question" data-id="1" type="checkbox">
<span class="check_box round"></span>
</label>
</td>
</tr>
</tbody>
Maybe this is what you are looking for:
$(document).ready(function(){
$("body").on("click",".wk_checked_question",function(ev){
$(".wk_checked_question").each((i,cb)=>cb.checked=(cb==this));
this.checked=true; // a "real" radio button cannot be unchecked ...
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:500px">
<tbody>
<tr>
<td class="question_id" style="width:70%">Q1. t-shirt color size</td>
<td class="question_id" style="width:50%">$ 120.00</td>
<td><label class="switch"><input class="wk_checked_question" data-id="2" type="checkbox">
<span class="check_box round"></span></label></td>
</tr>
<tr>
<td class="question_id" style="width:70%">Q2. t-shirt size</td>
<td class="question_id" style="width:50%"> Free</td>
<td>
<label class="switch">
<input class="wk_checked_question" data-id="1" type="checkbox">
<span class="check_box round"></span></label></td>
</tr>
</tbody>
</table>
After a click on a checkbox the .each() loop goes over all checkboxes with the same class and sets only the one being identical to the clicked ono (this). All others are unchecked.
I used "delegated event attachment" with jQuery.on() as suggested in #freedomn-m's comment. This has the advantage that it will work on target elements (.wk_checked_question) that don't even exist at the time of the event attachment.
Your HTML was also missing the <table> tags around your <tbody> which I added.
Edit
Coming back to this answer I realized that I could simplify the script even further and allow for an option to be unselected again by using this:
$("body").on("click",".wk_checked_question",function(ev){
let newstate=this.checked;
$(".wk_checked_question").prop("checked",false);
this.checked=newstate
});
I have a jsp page where i am displaying value from data base .
Now i need to edit the table value in click of that particular row and that selected row value should get set into respective input text .
My java script function is getting called but clicked value is not getting displayed into respective input type .
The java script function name is onRowClick
I am adding code for that .
Please suggest .
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script>
function onRowClick(){
var table = document.getElementById("hoteltable"),rIndex;
for(var i = 0; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
rIndex = this.rowIndex;
document.getElementByName("hId").value = this.cells[0].innerHTML;
document.getElementByName("hName").value = this.cells[1].innerHTML;
document.getElementByName("hArea").value = this.cells[2].innerHTML;
document.getElementByName("hNumOfRooms").value = this.cells[3].innerHTML;
document.getElementByName("hImgUrl").value = this.cells[4].innerHTML;
hideButton();
showDelete();
showEdit();
};
}
}
</script>
</head>
<body>
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form:form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td><form:input name="hId" path="hotelId"></form:input></td>
<td><form:errors path="hotelId" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelName:</td>
<td><form:input name="hName" path="hotelName"></form:input></td>
<td><form:errors path="hotelName" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelArea:</td>
<td><form:select name="hArea" path="hotelArea">
<form:option value="Marthalli">Marathalli</form:option>
<form:option value="SilkBoard">SilkBoard</form:option>
</form:select></td>
<td><form:errors path="hotelArea" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td><form:input name="hNumOfRooms" path="hotelNumOfRooms"></form:input></td>
<td><form:errors path="hotelNumOfRooms" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td><form:input name="hImgUrl" path="hotelImgUrl"></form:input></td>
<td><form:errors path="hotelImgUrl" cssClass="error"></form:errors></td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"></input> <br> <br>
<input type="submit"value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"></input><br> <br>
<input type="reset"value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form:form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td><h4>hotelId</h4></td>
<td><h4>hotelName</h4></td>
<td><h4>hotelArea</h4></td>
<td><h4>hotelNumOfRooms</h4></td>
<td><h4>hotelImageUrl</h4></td>
</tr>
<c:forEach var="hotels" items="${hotelList}">
<tr onclick="onRowClick()">
<td >${hotels.hotelId}</td>
<td>${hotels.hotelName}</td>
<td>${hotels.hotelArea}</td>
<td>${hotels.hotelNumOfRooms}</td>
<td>${hotels.hotelImgUrl}</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
If you look in the web console, you'll find an error message. There is no document.getElementByName function in the DOM. There's getElementsByName (plural), but not a singular, and that one wouldn't really help you since it would give you a collection of all of the elements with that name, anywhere on the page. (Although if the only ones with those names are the ones you want, you could use it and then use [0] to get the only entry in the resulting collection.)
There's a different problem, though: Your click="onRowClick()" doesn't pass on any information about which row was clicked, and the function itself just hooks up event handlers on the rows rather than actually doing what you want done on click.
Instead, hook click on the table, and check to see if the click passed throug a row; if it did, fill in the information in the first table. See comments:
// Hook click on the table, rather than individual rows
document.getElementById("hoteltable").addEventListener("click", function(e) {
// Make sure the click passed through a row in this table
var row = e.target.closest("tr");
if (!row || !this.contains(row)) {
return;
}
// Get the form we're filling in
var form = document.querySelector("form[action=hotelaction]");
// Fill in the various inputs
// Note: I'd recommend giving each cell a data-name attribute or something
// and using those rather than using `row.cells[0]` and such. That way
// when (not if ;-) ) you change the source table, the cell references
// aren't messed up
form.querySelector("[name=hId]").value = row.cells[0].innerHTML;
form.querySelector("[name=hName]").value = row.cells[1].innerHTML;
form.querySelector("[name=hArea]").value = row.cells[2].innerHTML;
form.querySelector("[name=hNumOfRooms]").value = row.cells[3].innerHTML;
form.querySelector("[name=hImgUrl]").value = row.cells[4].innerHTML;
/*
hideButton();
showDelete();
showEdit();
*/
});
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td>
<input name="hId" path="hotelId">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelName:</td>
<td>
<input name="hName" path="hotelName">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelArea:</td>
<td>
<select name="hArea" path="hotelArea">
<option value="Marthalli">Marathalli</option>
<option value="SilkBoard">SilkBoard</option>
</select>
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td>
<input name="hNumOfRooms" path="hotelNumOfRooms">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td>
<input name="hImgUrl" path="hotelImgUrl">
</td>
<td>
<span class="error"></span>
</td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"><br> <br>
<input type="submit" value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"><br> <br>
<input type="reset" value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td>
<h4>hotelId</h4>
</td>
<td>
<h4>hotelName</h4>
</td>
<td>
<h4>hotelArea</h4>
</td>
<td>
<h4>hotelNumOfRooms</h4>
</td>
<td>
<h4>hotelImageUrl</h4>
</td>
</tr>
<tr>
<td>1</td>
<td>Savoy</td>
<td>Marthalli</td>
<td>300</td>
<td>https://via.placeholder.com/150?text=Savoy</td>
</tr>
<tr>
<td>2</td>
<td>Marriott</td>
<td>SilkBoard</td>
<td>450</td>
<td>https://via.placeholder.com/150?text=Marriott</td>
</tr>
<tr>
<td>3</td>
<td>Premier Inn</td>
<td>Marthalli</td>
<td>150</td>
<td>https://via.placeholder.com/150?text=Premier+Inn</td>
</tr>
</table>
</div>
Note that I removed from JSP- or template-isms from the HTML in that, so it used standard form inputs. I assume what gets delivered to the browser uses standard form elements.
Using ng-repeat I'm displaying Item related textboxes and on click of SaveAll button I want to read all text box values based on ITEM ID and Save it to DB.
<tr>
<td>
<table ng-repeat="item in itemDtls">
<tr>
<td>
<label for="lblItemName">Item ID: </label> {{item.ITEM_ID}}
</td>
</tr>
<tr>
<td>
<label for="lblPriority">Item Priority </label>
<input type="text" id="inpPriority" ng-model="ValuesPriority" value="{{item.PRIORITY}}" />
</td>
</tr>
<tr>
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="ValuesComment" value="{{item.COMMENT}}" />
</td>
</tr>
<tr>
</table>
</td>
<tr>
<td>
<button type="submit" ng-click="SaveAll()">SaveAll</button>
</td>
</tr>
Do not use "value" tag instead use "ng-model" only.
Eg:
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="item.COMMENT" />
</td>
So whatever comments you change, it will update in that variable.
Later you can send "itemDtls" in backend to store in DB.
You must need a backend to store in DB.
I have this table:
my problem is that I want to if I check the checkbox of selected row it will enabled/desabled the "Montant" input,this is my try but it never works
I get all the rows activated!!
<table>
<thead>
<tr>
<th >
<input type="checkbox" />
</th>
<th>Montant</th>
</tr>
</thead>
<tbody ng-model="finalOperationsList">
<tr ng-repeat="item in finalOperationsList track by $index ">
<td class="TableHeaderalignment"><input type="checkbox"
ng-model="finalOperationsList[$index].checked" ng-change="changeMontantLBL($index)"/></td>
<td class="TableHeaderalignment">
<input type="text" class="form-control" value="{{item.montant}}" ng-disabled="montantBL" />
</td>
</tr>
</tbody>
</table>
and this is function in Controller:
$scope.changeMontantLBL =function($index){
if(true){
$scope.montantBL = false;
}
else{
$scope.montantBL = true;
}
}
so please how can I correct my code to make the input "Montant" enabled/desabled depending on the choice of selected row checkbox
thanks for help
You can directly consume the value of "finalOperationsList[$index].checked" in the ng-disabled of the input textbox, and remove the ng-change and scope.montantBL altogether.
<tr ng-repeat="item in finalOperationsList track by $index ">
<td class="TableHeaderalignment"><input type="checkbox"
ng-model="finalOperationsList[$index].checked"/></td>
<td class="TableHeaderalignment">
<input type="text" class="form-control" value="{{item.montant}}" ng-disabled="finalOperationsList[$index].checked" />
</td>
</tr>
It is also worth to note that you might have misused value="{{item.montant}}" and should use ng-model="item.montant" instead. You can also simplify your code for that row to:
<tr ng-repeat="item in finalOperationsList track by $index ">
<td class="TableHeaderalignment">
<input type="checkbox" ng-model="item.checked"/></td>
<td class="TableHeaderalignment">
<input type="text" class="form-control" ng-model="item.montant" ng-disabled="item.checked"/>
</td>
</tr>
You could just use the bound ng-model (answers[item.questID]) value itself in your ng-change method to detect if it has been checked or not.
Example:-
<input type="checkbox" ng-model="answers[item.questID]" ng-change="stateChanged(item.questID)" /> <!-- Pass the specific id -->
and
$scope.stateChanged = function (qId) {
if($scope.answers[qId]){ //If it is checked
alert('enable or disable input');
}
}
I am trying to delete selected rows (via checkbox) but I don't understand where I am going wrong
this is my code
JQuery
$("#delete").click(function(){
$("table input[type ='checkbox']:checked").parent().parent().remove();
});
HTML
<div class = "patientData">
<div class ="searchBar">
<input type = "search" name = "search" class = "search">
<i class ="fa fa-search"></i>
<button id = "delete">Delete Selected</button>
</div>
<table style ="width:95%" class = "Info">
<tr>
<th><input type="checkbox" id="select"> </th>
<th> Name</th>
<th>Number</th>
<th>Date</th>
</tr>
</table>
</div>
The user enters the rows which is why my table by default only has headings. I have stuck on this for a while now and no research is helping me solving the problem.
Please help if anyone can, Thanks in advance.
You should use the :has selector to get all rows containing a checked box, rather than working your way back up to the parent. This will keep the selector at the row-level, preventing DOM changes from accidentally working up too many parents and deleting large chunks of the page.
Something like:
$("#delete-button").on("click", function(e) {
$("#delete-table tr:has(td > input[type=checkbox]:checked)").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="delete-button">Delete!</button>
<table id="delete-table">
<tr>
<th>
<input type="checkbox" />
</th>
<th>Header</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 2</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 3</td>
</tr>
</table>