I wanted to make the disabled attribute false, but it doesn't work. here is my code.
here ins my base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="{% static 'css/duty.css' %}">
<script src="{% static 'js/duty.js' %}"></script>
<title></title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
here is my duty.html
{% extends 'base.html' %}
{% block content %}
<h1>duties and details for TA</h1>
<p>#student:{{ course.capacity }}</p>
<form>
<table border="2" bordercolor="black" width="800" height="500" cellspacing="0" cellpadding="5">
<tr>
<th>classification</th>
<th>times</th>
<th>teaching activity</th>
<th>Approx. hours/student</th>
</tr>
<tr>
<td rowspan="3">Lab</td>
<td rowspan="3"><label><input class="duty" type="text" disabled="disabled" value="{{ taDuty.labNumber }}"></label>
</td>
<td>preparation</td>
<td><label><input class="duty" type="text" disabled="disabled" value="{{ taDuty.preparationHour }}"></label></td>
</tr>
</table>
<button onclick="modification()">modify</button>
<button type="submit">save</button>
</form>
{% endblock %}
here is my duty.js
function modification() {
let node = document.getElementsByClassName('duty');
for (let i = 0; i < node.length; i++) {
node[i].disabled = false;
}
}
my javascript function can be called. I tried to add alert() and it works, but the disabled attributed can't be set false. I don't know why. Thank you for any help!
Have a look at this, to enable the input field you can't just set elm.disabled = false.
Try using removeAttribute()
function modification() {
let node = document.getElementsByClassName('duty');
for (let i = 0; i < node.length; i++) {
node[i].removeAttribute("disabled");
}
}
Related
I want to count the number of correct answers and display it.i tried many ways but couldn't go through.will appreciate if anybody can help me .Thanks in advance.
{% extends 'base.html' %}
{% block title%}Quiz{% endblock title %}
{% block content %}
<div class=" text-danger mt-5 text-center">
<!-- <h2><b id="count">Timer</b></h2> -->
<h3>+++Quiz on Indian Politics+++</h3>
<hr>
</div>
<div class="pt-5">
{% for item in obj %}
<table>
<tr>
<h2>Q{{item.id}}. {{item.question}}</h2><br>
</tr>
<tr>
<input type="radio" class="rd" name="{{item.id}}" id="opt1" value="{{item.opt1}}"> {{item.opt1}}</input><br>
</tr>
<tr>
<input type="radio" class="rd" name="{{item.id}}" id="opt2" value="{{item.op2}}"> {{item.opt2}}</input><br>
</tr>
<tr>
<input type="radio" class="rd" name="{{item.id}}" id="opt3" value="{{item.opt3}}"> {{item.opt3}}</input><br>
</tr>
<tr>
<input type="radio" class="rd" name="{{item.id}}" id="opt4" value="{{item.opt4}}"> {{item.opt4}}</input><br>
</tr>
<tr>
<label id="lb" class="rd" name="{{item.id}}" value="{{item.cor_ans}}" style='display:none;color:green'><b>The correct answer is: {{item.cor_ans}}</b></label>
</tr>
<tr>
</tr>
</table>
<hr> {% endfor %}
<div class="pt-4">
<button type="submit" class="btn btn-success" id="btn">Submit</button>
</div>
<div class="pt-3">
<b id="counter"></b>
<b id="ans"></b>
</div>
</div>
{% endblock content %}
{% block scripts %}
<script>
const rad = document.getElementsByClassName('rd')
const input = document.getElementsByTagName('input')
const bt = document.getElementById('btn')
const label = document.getElementsByTagName('label')
const counter = document.getElementById('counter')
var score = 0;
bt.onclick = function() {}
// JQuery code
$(document).ready(function() {
$('#btn').click(function() {
$('.rd').show();
$('.rd').attr("disabled", true);
});
});
// # javascript code
bt.addEventListener('click', function() {
for (i = 0; i < input.length; i++) {
if (input[i].type === 'radio') {
if (input[i].checked) {
document.getElementById('ans').innerHTML += "Q" + input[i].name + " The Answer you selected is: " + input[i].value + "<br>";
}
}
}
})
// var interval = setInterval(function(){
// document.getElementById('count').innerHTML=count;
// count--;
// if (count === 0){
// clearInterval(interval);
// document.getElementById('count').innerHTML='Done';
// alert("You're out of time!");
// }
// }, 1000);
// document.getElementsByClassName('counter').innerHTML = cnt;
// console.log(label[j].innerHTML.replace("<b>The correct answer is: ","").replace("</b>",""))
//
// if(label[j].innerHTML.replace("<b>The correct answer is: ","").replace("</b>","") == input[i].value){
// console.log("Hello")
// }
</script>
{% endblock scripts %}
I have a grid with some items and I´d like to sum val_itemservico column from selected rows. My template sums all rows.
I´d like to sum val_itemservico column only for selected rows when I click on "Calcular" button. In this case, I need to know if ind_selecionado column is checked.
So, how can I do that?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ORÇAMENTO</title>
</head>
<h2>ORÇAMENTO</h2>
<form class=" bd-form-20 " action="#" name="form-name" method="GET">
{% csrf_token %}
<label>Serviço: </label>{{filter.form.servico}}
<button type = "submit" >OK</button>
<br><br>
</form>
<tbody>
<div class=" bd-customhtml-29 bd-tagstyles bd-custom-table">
<div class="bd-container-inner bd-content-element">
<table id="table" border="1" rules="all" cellspacing="0" cellpadding="10"> <!--width="100%" border="0" cellspacing="0" cellpadding="2">-->
<tr>
<th>Selecionar</th>
<th>ID Item Serviço</th>
<th>Item Serviço</th>
<th>Valor Serviço</th>
<th>Serviço</th>
</tr>
{% for item in response.object_list %}
<tr>
<td> <input type="checkbox" id="item.ind_selecionado"></td>
<td>{{ item.id }}</td>
<td>{{ item.desc_itemservico }}</td>
<td>{{ item.val_itemservico }}</td>
<td>{{ item.servico_id}}</td>
</tr>
{% endfor %}
{% if response.object_list %}
Total: {{ response.object_list|length }}
{% endif %}
<br><br>
</table>
<br><br>
Valores:<br>
{% for item in response.object_list %}
{{item.val_itemservico}}<br>
{% endfor %}
<br><br>
<span id="sumV"></span>
<script>
var table = document.getElementById("table");
getSum();
function getSum()
{
var sumVal = 0;
for (var i = 1; i < table.rows.length; i++){
sumVal = sumVal + parseInt(table.rows[i].cells[3].innerHTML);
}
console.log("Sum: " + sumVal)
}
</script>
<br><br>
<button onclick="getSum();">Calcular</button>
</div>
</div>
</tbody>
</html>
You have to test for the value of the check input inside your loop that calculate the sum
for (var i = 1; i < table.rows.length; i++){
sumVal = sumVal + parseInt(table.rows[i].cells[3].innerHTML);
}
should be replaced by something like :
for (var i = 1; i < table.rows.length; i++){
if(table.rows[i].cells[1].childNodes[0].checked){
sumVal = sumVal + parseInt(table.rows[i].cells[3].innerHTML);
}
}
I'm having hard time with js and jquery executing events, I guess there is something I'm missing in my understanding of jquery.
Because I'm really new to this language, I'm confused and need some orientation if you can help me please.
what I need:
I have a form as a row, and a button that adds a new form everytime I click on it. also the new generated forms have different Ids and names.
Now every form contains two selects and need a change function to be excuted on it.
Where should I write this change function, so that every row have his own change function without getting confused with other rows.
EDIT :
<div id="myDIV1" style="display: inline">
<form action="/banque" method="POST" enctype="multipart/form-data" id="personForm" data-tiers-url="{% url 'ajax_load_tiers' %}" >{% csrf_token %}{{ form.non_field_errors }}
<table style ="border-collapse: separate;border-spacing: 15px;" id="id_forms_table">
<tr><td width="5%">N P</td><td width="8%">Date d'operation</td><td width="25%">Désignation</td><td width="10%">Type tiers</td><td width="10%">Tiers</td><td width="10%">Référence de Facture</td><td width="10%">Montant debit </td><td width="10%">Montant crédit</td></tr>
{% for form in formset %}
<tr style="border:1px solid black;" id="{{ form.prefix }}-row" class="dynamic-form" >
<td{% if forloop.first %} class="" {% endif %}><div class="col-xs-1"><b><p name="np1">1</p></b></div></td>
<td>
{% render_field form.dateOperation class="form-control" %}{{form.dateOperation1.errors}}
</td>
<td>{% render_field form.designation class="form-control" %}{{form..errors}}
</td>
<td>
{% render_field form.typeTiers class="form-control" %}{{form.typeTiers.errors}}
</td>
<td>
{% render_field form.tiers class="form-control" %}{{form.tiers.errors}}
</td>
<td>{% render_field form.numfacture class="form-control" %}{{form.numfacture.errors}}
</td>
<td>{% render_field form.montantdeb class="form-control" %}{{form.montantdeb.errors}}</td>
<td>{% render_field form.montantcred class="form-control" %}</td>
</tr>
{% endfor %}
<tr>
</tr>
</table>
{{ formset.management_form }}
<tr>
<!-- BUTTONS <td colspan="4">add property</td> -->
<td width="16%"><input type="submit" name="annuler" value="Annuler" class="btn btn-danger" style="float:right ;margin: 5px; margin-right: 35px"></td>
<td width="16%"><button value="" class="btn btn-success" style="float:right;margin: 5px;" onclick="verifier()">enregistrer</button></td>
</form>
<td><input type="submit" name="ajoutligne" value="Ajouter une ligne" class="btn btn-primary" id="add-row" style="background-color: #8C1944; border-color: #8C1944; float:right;margin: 5px;" onclick="test()"></td></tr>
</div>
On change of each added row by the button Ajouter une ligne , I need to execute the following change function:
$("#id_form-"+0+"-typeTiers").change(function () {
alert($('#id_form-'+0+'-typeTiers').attr('name'));
var url = $("#personForm").attr("data-tiers-url");
var typeID = $(this).val();
$.ajax({
url: url,
data: {
'tiers': typeID,
},
success: function(data) { // `data` is the return of the `load_cities` view function
alert(data);
var i=1;
var listeClt = $(data).clone(true).find('option[id=facvente],option[id=fadepenses],option[id=frs]').remove().end().html();
var listefactVentes= $(data).clone(true).find('option[id=clt],option[id=fadepenses],option[id=frs]').remove().end().html();
var listefrs = $(data).clone(true).find('option[id=facvente],option[id=fadepenses],option[id=clt],option[id=cnss]').remove().end().html();
var listefactDep= $(data).clone(true).find('option[id=clt],option[id=facvente],option[id=frs]').remove().end().html();
// var cnss= $(data).clone(true).find('select').remove().end().html();
if(listeClt!=0){
$("#id_form-"+0+"-tiers").html(listeClt);
$("#id_form-"+0+"-numfacture").html(listefactVentes);
}
else if(listefrs!=0){
$("#id_form-"+0+"-tiers").html(listefrs);
$("#id_form-"+0+"-numfacture").html(listefactDep);
}
else {
$("#id_form-"+0+"-tiers").html(data);
}
}
});
});
"#id_form-"+0+"-typeTiers" is the id of the first row select , "#id_form-"+0+"-tiers" is the Id of the select that will get populated after changing "#id_form-"+0+"-typeTiers" of the same row.
this jquery changes the first row correctly, but what about rows tha will be add after ? their fields will have as Ids 1 , 2 .. etc instead of 0 .
Any help would be great. Thank You in advance
Please look on this some samples. it may helps you
https://www.aspsnippets.com/Articles/Add-Insert-Remove-Delete-Table-Rows-dynamically-using-jQuery.aspx
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-append-and-remove-table-row-dynamically
Almost everything working good beside 2 things
Code
var app = angular.module("MyApp", []);
app.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
});
app.controller("MyControler", function($scope, $http, $filter) {
$http.get("http://127.0.0.1:8000/cars/?format=json").
success(function(data) {
$scope.list = data;
});
$scope.itemsPerPage = 1;
$scope.currentPage = 0;
$scope.items = [];
for (var i=0; i<50; i++) {
$scope.items.push({ id: i, name: "name "+ i, description: "description " + i });
}
$scope.range = function() {
var rangeSize = 3;
var ret = [];
var start;
start = $scope.currentPage;
if ( start > $scope.pageCount()-rangeSize ) {
start = $scope.pageCount()-rangeSize+1;
}
for (var i=start; i<start+rangeSize; i++) {
ret.push(i);
}
return ret;
};
$scope.prevPage = function() {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.prevPageDisabled = function() {
return $scope.currentPage === 0 ? "disabled" : "";
};
$scope.pageCount = function() {
return Math.ceil($scope.filtered.length/ $scope.itemsPerPage)-1;
};
$scope.nextPage = function() {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage++;
}
};
$scope.nextPageDisabled = function() {
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
};
$scope.setPage = function(n) {
$scope.currentPage = n;
};
var filterBy = $filter('filter');
$scope.$watch('search', function (newValue) { $scope.filtered = filterBy($scope.list, newValue); }, true);
});
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
{% verbatim %}
<div ng-app="MyApp" ng-controller="MyControler">
<table class="table table-striped">
<thead>
<tr>
<th><input ng-model="search.name" ></th>
<th><input ng-model="search.years"></th>
<th><input ng-model="search.owners"></th>
<th><input ng-model="search.accidents"></th>
<th><input ng-model="search.description"></th>
</tr>
<tr>
<th>Name</th>
<th>Years</th>
<th>Owners</th>
<th>Accidents</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cars in filtered| offset:currentPage*itemsPerPage | limitTo: itemsPerPage">
<td>{{cars.name}}</td>
<td>{{cars.years}}</td>
<td>{{cars.owners}}</td>
<td>{{cars.accidents}}</td>
<td>{{cars.description}}</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">
<div class="pagination">
<ul>
<li ng-class="prevPageDisabled()">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
{{n+1}}
</li>
<li ng-class="nextPageDisabled()">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
</table>
</div>
{% endverbatim %}
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="{% static 'js/app2.js' %}"></script>
</html>
My objects are displayed only when i start typing into filter field, as i see after pagination is updated actively with typing but then happening sth strange, pagination displayed also pages with minuses ?
So i would like to make items showed already without starting typing into filter and make these minuses disappear.
Thanks ;)
var app=angular.module('MyApp', []);
app.controller("MyControler", function($scope, $http, $filter) {
$http.get("http://127.0.0.1:8000/cars/?format=json").
success(function(data) {
$scope.list = data;
});
$scope.currentPage = 0;
$scope.pageSize = 1;
$scope.numberOfPages=function(){
var myFilteredData = $filter('filter')($scope.list, $scope.search);
return Math.ceil(myFilteredData.length/$scope.pageSize);
};
});
app.filter("offset", function() {
return function(input, start) {
start = +start;
return input.slice(start);
};
});
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
{% verbatim %}
<div ng-app="MyApp" ng-controller="MyControler">
<table>
<tr>
<th><input type="text" ng-model="search.name" class="form-control input-sm" placeholder="SEARCH" ></th>
<th><input type="text" ng-model="search.years" class="form-control input-sm" placeholder="SEARCH"></th>
<th><input type="text" ng-model="search.owners" class="form-control input-sm" placeholder="SEARCH"></th>
<th><input type="text" ng-model="search.accidents" class="form-control input-sm" placeholder="SEARCH"></th>
<th><input type="text" ng-model="search.description" class="form-control input-sm" placeholder="SEARCH"></th>
</tr>
<tr>
<th>Name</th>
<th>Years</th>
<th>Owners</th>
<th>Accidents</th>
<th>Description</th>
</tr>
<tr ng-repeat="cars in list | filter:search|offset:currentPage*pageSize | limitTo:pageSize">
<td>{{cars.name}}</td>
<td>{{cars.years}}</td>
<td>{{cars.owners}}</td>
<td>{{cars.accidents}}</td>
<td>{{cars.description}}</td>
</tr>
</table>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="(currentPage + 1) == numberOfPages()" ng-click="currentPage=currentPage+1">
Next
</button>
</div>
{% endverbatim %}
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="{% static 'js/app2.js' %}"></script>
</html>
Solved
I know what this error is generally from but I just can't find it in my code. I know it is the statement:
button.setAttribute("onclick", "makeUneditable(" + row_id + ")")
And I've included all the code so you can know what you're looking at. And just fyi {{row}} is a list that I pass in with Jinja2 and then convert to a string in javascript. But I am not sure what in that statement is illegal. Any ideas?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function makeEditable(row_id) {
row_id = String(row_id)
var row = document.getElementById(row_id);
row.setAttribute("contenteditable", "true")
var button = document.getElementById(row_id+"_button");
button.setAttribute("onclick", "makeUneditable(" + row_id + ")")
button.innerHTML = "Done Editing";
}
function makeUneditable(row_id) {
row_id = String(row_id)
console.log(row_id)
var row = document.getElementById(row_id);
row.setAttribute("contenteditable", "false")
}
</script>
</head>
<body>
<table class="TFtable" style="width:300px">
<thead>
{% for column_name in column_names %}
<th>{{column_name}}</th>
{% endfor %}
</thead>
{% for row in table %}
<script>
document.writeln('<tr id="' + String({{row}}) + '">');
</script>
{% for cell in row %}
<td>{{cell}}</td>
{% endfor %}
<td contenteditable="false">
<script>
document.writeln('<button id="' + String({{row}})+'_button"');
</script>
type="button" onclick="makeEditable({{row}})">Edit Connector</button>
</td>
</tr>
{% endfor %}
</table>
</body>
Use single quotes around your value when concatenating it:
button.setAttribute("onclick", "makeUneditable('" + row_id + "')")