I'm having a trouble why it keeps telling the console bad request after I check all the data, but if I manually check each item on table it works fine, but when I use check all - bad request I think the problem it has "on" data on my table. Is there any expert can know about this?Im begginner of django and javascript please suggest if anyone know about this thanks in advance
Bad Request using check all
Check manually
table.html
<button type="submit" id="delete_btn" class="btn btn-secondary round btn-min-width mr-1 mb-1" >Mark
as Paid</button>
<table class="table" name="table" id="table">
<thead>
<tr >
<th >No</th>
<th><input type="checkbox" onClick="toggle(this)" /></th>
<th>ID Number</th>
<th >Name</th>
<th >Barangay</th>
<th >Sex</th>
<th >Sector</th>
<th Amount</th>
<th >Signature/Thumb Marks</th>
<th >ID Presented/ Date & Issuance</th>
<th>Date Received</th>
<th >Remarks</th>
</tr>
</thead>
<tbody class="report-content">
{% csrf_token %}
{% for user_information in benefeciaries %}
<tr id="{{user_information.id}}">
<td></td>
<td><input type="checkbox" name="product_id[]" value="{{user_information.id}}"
id="delete_product"></td>
<td>{{user_information.covid_id}} </td>
<td>{{user_information.lastname}}, {{user_information.firstname}}
{{user_information.middle}}</td>
<td width="5%">{{user_information.barangay}}</td>
<td></td>
<td ></td>
<td>{{user_information.amount|floatformat:2|intcomma}}</td>
<td></td>
<td ></td>
<td ></td>
<td></td>
</tr>
{% endfor %}
</tbody>
</table>
javascript
//js checkall
function toggle(source) {
checkboxes = document.getElementsByName('product_id[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
//js mark as paid button
$(document).ready(function(){
$('#delete_btn').click(function(){
if(confirm("Are you sure ?")){
var id =[];
var csrf=$('input[name=csrfmiddlewaretoken]').val();
$(':checkbox:checked').each(function(i){
id[i]=$(this).val()
})
if(id.length===0){
alert("please select item ")
}
else{
console.log(id)
$.ajax({
url:"/delete/",
method:"POST",
data: {
id,
csrfmiddlewaretoken:csrf
},
success:function(response){
Swal.fire({title:"Successfully saved!",text:"Mark As Paid",type:"success",confirmButtonClass:"btn btn-success",buttonsStyling:!1})
}
})
}
}
})
});
views.py ajax
def delete(request):
if request.method=="POST":
product_ids=request.POST.getlist('id[]')
for id in product_ids:
Person.objects.filter(pk=id).update(paid=1)
return redirect('dashboard')
Related
So I have this Data Table [Fig. 1] inside a form which submits the table's data, the problem is it doesn't submit all the checked rows in all pages, it only submits what's shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box's value with data-checkid's value.
The scenario is all the checked rows that'll be submitted will run a query like this
UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**
[Fig.1]
<form method="POST" id="manage-layers" name="manage-layers">
<button class="btn btn-warning" type="submit" id="save_layers">
<i class="fa fa-save"></i>
<strong>Save</strong>
</button>
<table id="subgrp_layertbl" class="table table-responsive text-dark">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Layer Name</th>
<th scope="col">Associate Layer</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%">1</td>
<td width="50%">Value 1</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="12,27" data-checkid="40" >
</div>
</td>
</tr>
<tr>
<td width="1%">3</td>
<td width="50%">Value 3</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="14" data-checkid="3" >
</div>
</td>
</tr>
<tr>
<td width="1%">8</td>
<td width="50%">Value 8</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="16" data-checkid="8" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
[Fig.2]
<script type="text/javascript">
$(document).ready(function (){
var table = $('#subgrp_layertbl').DataTable();
$('#manage-layers').on('submit', function(e){
e.preventDefault();
var data = table.$('input,select,textarea').serializeArray();
console.log(data);
});
});
</script>
I really think this should answer your problem
https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.
I want to export data from firebase and show the data on web page.
The table should updtae but unfortantly the table can't create new rows.
the code is example for two childs and the image show how the page looks right now.
the html code:
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Board</th>
<th scope="col">Image</th>
<th scope="col">Notes</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><a id="board1"></a></td>
<td><a id="image1"></a></td>
<td></td>
<td><input type="checkbox" name="firstYes" /></td>
<td><input type="checkbox" name="firstNo" /></td>
</tr>
<tr>
<th scope="row">2</th>
<td><a id="board2"></a></td>
<td><a id="image2"></a></td>
<td></td>
<td><input type="checkbox" name="secYes" /></td>
<td><input type="checkbox" name="secNo" /></td>
</tr>
the js code:
function doFunction(){
var ref = firebase.database().ref();
ref.on("value", function(snapshot) {
board=snapshot.child("1").child("Board").val();
imageChild=snapshot.child("1").child("Image").val();
document.getElementById("board1").innerHTML = board;
document.getElementById("image1").innerHTML = imageChild;
})
}
function doFunctionSec(){
var ref = firebase.database().ref();
ref.on("value", function(snapshot){
boardsec=snapshot.child("2").child("Board").val();
imageChildsec=snapshot.child("2").child("Image").val();
document.getElementById("board2").innerHTML = boardsec;
document.getElementById("image2").innerHTML = imageChildsec;
})
}
HTML from with table and button:
<div>
<h1>Info</h1>
<form>
<table id="t">
<tr>
<th></th>
<th>index</th>
<th>name</th>
<th>job</th>
<th>date</th>
<th>department</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>Alex</td>
<td>Hacker</td>
<td>100000000000000000</td>
<td>2</td>
</tr>
</table>
<br/>
<input type="submit" value="delete" onclick="deleteRow()">
</form>
</div>
I want to remove rows, which have establishes checkbox. Delete should be at the click of a button.
Javascript function that should delete:
function deleteRow() {
let table = document.getElementById('t')
let boxs = table.getElementsByTagName("input")
for (i = 0; i < boxs.length; i++){
if(boxs[i] == true) {
table.deleteRow((boxs[i].parentNode.parentNode).rowIndex)
}
}
}
I debugged this code, the size of the array defined correctly, but doesn't enter to condition.
In you code you don't need to change much.
You need to change if statement like below.
From
if(boxs[i] == true) {
}
To
if(boxs[i].checked == true) {
}
Because box[i] is object.
So If you want to get the check status you need to call boxs[i].checked. This will give you true/false.
function deleteRow() {
let table = document.getElementById('t')
let boxs = table.getElementsByTagName("input")
for (i = 0; i < boxs.length; i++){
if(boxs[i].checked == true) {
table.deleteRow((boxs[i].parentNode.parentNode).rowIndex)
}
}
return false;
}
<div>
<h1>Info</h1>
<form onsubmit="return deleteRow()">
<table id="t">
<tr>
<th></th>
<th>index</th>
<th>name</th>
<th>job</th>
<th>date</th>
<th>department</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>Alex</td>
<td>Hacker</td>
<td>100000000000000000</td>
<td>2</td>
</tr>
</table>
<br/>
<input type="submit" value="delete">
</form>
</div>
I have a table which is being filled dynamically on button click
This is my table
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
<thead>
<tr>
<th width="20%">Product</th>
<th width="10%">Category</th>
<th width="10%">Pkg Date</th>
<th width="10%">Mfact date</th>
<th width="10%">Expiry</th>
<th width="10%">Batch No.</th>
<th width="8%">Unit Price</th>
<th width="8%">Qty</th>
<th width="10%">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="tablebody">
</tbody>
<tfoot id="grandtot">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>
</td>
</tr>
</tfoot>
</table>
I am adding to this table on button click using jquery
var stock = Number($('#currentstockinput').val());
var qty = Number($('#tablettosellinput').val().replace(/[^0-9\.]+/g,""));
var pertabprice = Number($('#prodpricetabcapinput').val().replace(/[^0-9\.]+/g,"")).toFixed(2);
var subtotal = qty * pertabprice;
var pkgdate = $('#pkgdateinput').val();
var manufactdate = $('#manufactinput').val();
var expdate = $('#expdateinput').val();
var batchno = $('#s2_1 option:selected').text();
$('#tablebody').prepend('<tr>'+
'<td class="prodname">'+prod+'</td>'+
'<td class="category">'+type+'</td>'+
'<td class="pkgdate">'+pkgdate+'</td>'+
'<td class="manufactdate">'+manufactdate+'</td>'+
'<td class="expdate">'+expdate+'</td>'+
'<td class="batchno">'+batchno+'</td>'+
'<td class="unitprice">'+pertabprice+'</td>'+
'<td class="qty">'+qty+'</td>'+
'<td class="subtot">'+subtotal+'</td>'+
'<td>'+
'<button class="btn btn-link" type="button">Remove</button>'+
'</td>'+
'</tr>');
Upto this, it is working fine
Now I am trying to assign value from each row to dropdown list on button click before submitting my form to servlet
$('#tSortable_2 tbody tr').each(function() {
alert('Adding option');
$('<option>').val($(this).find(".prodname").text()).text($(this).find(".prodname").text()).appendTo('#prodnd');
$('<option>').val($(this).find(".category").text()).text($(this).find(".category").text()).appendTo('#categoryd');
$('<option>').val($(this).find(".pkgdate").text()).text($(this).find(".pkgdate").text()).appendTo('#pkgdated');
$('<option>').val($(this).find(".manufactdate").text()).text($(this).find(".manufactdate").text()).appendTo('#manufactd');
$('<option>').val($(this).find(".expdate").text()).text($(this).find(".expdate").text()).appendTo('#expd');
$('<option>').val($(this).find(".batchno").text()).text($(this).find(".batchno").text()).appendTo('#batchd');
$('<option>').val($(this).find(".unitprice").text()).text($(this).find(".unitprice").text()).appendTo('#unitd');
$('<option>').val($(this).find(".qty").text()).text($(this).find(".qty").text()).appendto('#qtyd');
$('<option>').val($(this).find(".subtot").text()).text($(this).find(".subtot").text()).appendTo('#subtotd');
})
Now if I have multiple rows in my table the above .each() iterates only once and submits the form.
My form tag contains this code
<form action="customerbill" method="post" id="submittest">
<div class="head clearfix">
<div class="isw-grid"></div>
<h1>Purchase Cart</h1>
</div>
<div class="block-fluid table-sorting clearfix">
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
<thead>
<tr>
<th width="20%">Product</th>
<th width="10%">Category</th>
<th width="10%">Pkg Date</th>
<th width="10%">Mfact date</th>
<th width="10%">Expiry</th>
<th width="10%">Batch No.</th>
<th width="8%">Unit Price</th>
<th width="8%">Qty</th>
<th width="10%">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="tablebody">
</tbody>
<tfoot id="grandtot">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>
</td>
</tr>
</tfoot>
</table>
</div>
<select name="prodnd" id="prodnd" style="display:none" >
</select>
<select name="categoryd" id="categoryd" style="display:none" >
</select>
<select name="pkgdated" id="pkgdated" style="display:none" >
</select>
<select name="manufactd" id="manufactd" style="display:none" >
</select>
<select name="expd" id="expd" style="display:none" >
</select>
<select name="batchd" id="batchd" style="display:none" >
</select>
<select name="unitd" id="unitd" style="display:none" >
</select>
<select name="qtyd" id="qtyd" style="display:none" >
</select>
<select name="subtotd" id="subtotd" style="display:none" >
</select>
<div class="toolbar clear clearfix">
<div class="right">
<div class="btn-group">
<button id="printreport" type="submit" class="btn btn-small btn-warning" onClick="submitForm()"><span>Print</span></button>
</div>
</div>
</div>
</form>
The problem is that the .each() function iterates only once and only the values inside the first row are getting popuated in the dropdown lists.
The .each() function iterates only once when there are multiple rows in table.
You could try this, but I do not believe it will work right off the bat. I need to see more information, but you need to try something new.
$('#tSortable_2').find('tbody').find('tr').each(function(){ //do this });
This will at least give you the array you're looking for in a more correct way. (Less wasteful way?) It isn't a huge fix, or even a real fix it is just something new so try that and we will go from there. Also... fiddle.
I have an html table shown below:
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall" /></th>
<th colspan="2">Status</th>
<th class="data-name">UserName</th>
<th class="data-name">Description</th>
</thead>
</table>
The Status uses a text to indicate active and inactive users. Here I'm trying to display an error msg if anyone tries to delete the checkbox that has status as 'active'. Only 'inactive' users can be deleted.
I'm looking for a jquery code for that. can someone help me?
I'm providing a sudo code of what i'm trying to achieve. this might not be syntactically correct.
if $('#selectall input[type="checkbox"]:checked') is 'active'
{
alert('do not delete the checkbox');
}
else
{
alert('delete the checkbox');
}
this might do it
if ($('#selectall input[type="checkbox"]:checked').size() > 0)
{
alert('do not delete the checkbox');
}
else
{
alert('delete the checkbox');
}
i developed his next code in javascript and html
http://jsfiddle.net/jHpKB/1/
I hope you help
(My english is bad sorry)
html
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall" /></th>
<th colspan="2">Status</th>
<th class="data-name">UserName</th>
<th class="data-name">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" data-user-id="1" data-status="active" /></td>
<td>Active</td>
<td>User 1</td>
<td>None</td>
</tr>
<tr>
<td><input type="checkbox" data-user-id="1" data-status="inactive" /></td>
<td>Inactive</td>
<td>User 1</td>
<td>None</td>
</tr>
</tbody>
</table>
Javascript
$(document).ready(function(){
$("#selectall").on("click", function(){
var checked = $(this).is(":checked");
$("input[type='checkbox'][data-status='inactive']").attr("checked", checked )
});
});