We Keep Coding

Django - How to obtain corresponding row values from el-table after performing row-click?

I created a table in Django where upon doing row-click, the records for the corresponding row should be POSTED to the function "medicineRequestSelect" in view_doctor.py. However, it is unable to extract that row of values as shown in Image 1. It returns me None values.
I am relatively new to web development and any help or advice will be greatly appreciated!
<doctor_emr.html>
{% block mainbody%}
{% verbatim %}
<div id="app2" class="container">
<div class="emr-table">
<el-table
ref="multipleTable"
:data="list"
stripe
style="width: 50%"
#row-click="handle"
#selection-change="handleSelectionChange">
<el-table-column
prop="id"
label="Index">
</el-table-column>
<el-table-column
prop="order_id"
label="Order ID">
</el-table-column>
<el-table-column
prop="ward_number"
label="Ward No.">
</el-table-column>
<el-table-column
prop="prop"
label="Scan QR"
width="width">
<template slot-scope="{row$index}">
<el-button #click="onScanQR(row)" type="warning" icon="el-icon-camera" size="mini">Scan</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
{% endverbatim %}
<script>
new Vue({
el: '#app2',
data() {
return {
list: []
}
},
mounted() {
this.getemrList()
},
methods: {
getemrList() {
// Obtain EMR list
axios.post(ToDJ('emrList'), new URLSearchParams()).then(res => {
if (res.data.code === 0) {
console.log(res.data.data)
this.list = res.data.data
} else {
this.NotifyFail(res.data.data)
}
})
},
// Purpose: For the row click
handle(row, event, column) {
console.log(row, event, column)
axios.post(ToDJ('medicineRequestSelect'), new URLSearchParams()).then(res => {
if (res.data.code === 0) {
console.log(res.data.data)
this.list = res.data.data
let index = this.list.findIndex(item => {
return item.id == row.id
})
if (index == -1) {
this.$refs.multipleTable.toggleRowSelection(row, true);
this.list.push(row)
} else {
this.$refs.multipleTable.toggleRowSelection(row, false);
this.list.splice(index, 1)
}
} else {
this.NotifyFail(res.data.data)
}
})
},
onScanQR(row) {
this.dialogFormVisible = true;
this.tmForm={...row}
},
// Success notification
NotifySuc(str) {
this.$message({
message: str,
type: 'success'
})
},
// Error notification
NotifyFail(str) {
this.$message({
message: str,
type: 'warning'
})
}
}
})
</script>
{% endblock %}
<view_doctor.py>
#api_view(['GET',"POST"])
def medicineRequestSelect(request):
id = request.POST.get('id')
order_id = request.POST.get('order_id')
ward_number = request.POST.get('ward_number')
print("Values: ", id, order_id, ward_number)
return Action.success()
Image 1: Output Obtained
Image 2: Table I created

I'm also learning, and I try to progress by trying to help other's problem.
First where are you getting your data's from? From your Models?
So if I understood correctly you should import the model you want your data from and then make queries to it using your model.
model = TheNameOfYourModel.objects.all()
and then you can make your queries using q
PS: I'm still learning, i'm curious to see the answer of someone experienced

Using datepicker in cell editor with aggrid in streamlit app

I'm working on a streamlit app, where i have some datas to manage with streamlit-aggrid, and specialy a date column.
I would like to edit this date column, with a date picker as a popup.
I tried to use a custom cell editor :
DatePicker = JsCode(
"""
class DatePicker {
init(params) {
const template = '
<input type="date" data-input style="width: 100%" />
<a class="fa fa-times">Cliquez pour modifier la date</a>
';
this.params = params;
this.eGui = document.createElement('div');
this.eGui.classList.add('ag-input');
this.eGui.style.height = '100%';
this.eGui.innerHTML = template;
this.eInput = this.eGui.querySelector('input');
this.picker = flatpickr(this.eGui, {
onChange: this.onDateChanged.bind(this),
dateFormat: 'd-m-Y',
wrap: true,
defaultDate: this.params.value,
});
this.picker.calendarContainer.classList.add('ag-custom-component-popup');
this.date = this.params.value;
}
getGui() {
return this.eGui;
}
onDateChanged(selectedDates) {
this.date = selectedDates[0] || this.params.value;
this.params.onDateChanged();
}
getValue() {
return this.eInput.value;
}
}
"""
)
gb.configure_column(
"Terminé le",
cellEditor=DatePicker2,
cellEditorPopup=True,
editable=True,
)
It’s working actualy. But 3 clicks are needed instead of a double, because of the inner html raw.

Why is onClick misbehaving and sometimes not showing data behind it?

New to typescript and have been using it for 2 days now mainly to build a custom component for my streamlit app. I have created the below navigation bar and the custom component is a tab that can be clicked on the sidebar though it is behaving strangely. When I click on the component tab, sometimes it loads the corresponding page and at times it does not as demonstrated below:
custom navigation bar gif
I have a hunch it might be how I wrote the typescript code, perhaps the onClick function. Is there a better way to do this so as to:
return the value input labelName via Streamlit.setComponentValue()
make sure that upon clicking on the component tab, it actually loads the page behind it? I have placed the python code for how it should behave below:
Typescript component
import {
Streamlit,
StreamlitComponentBase,
withStreamlitConnection,
} from "streamlit-component-lib"
import React, { ReactNode } from "react"
interface State {
navLabel: string|number
}
class MyComponent extends StreamlitComponentBase<State> {
public state = {navLabel: ""}
public render = (): ReactNode => {
const labelName = this.props.args["name"]
const iconName = this.props.args["iconName"]
const { theme } = this.props
const styles: React.CSSProperties = {}
return (
<div className="navtab" onClick={this.onClicked}>
<div className="content">
<input type="radio" name="indicator" id="input-data"/>
<div className="list">
<label htmlFor="input-data" className="input-data">
<span><i className="material-icons">{iconName}</i></span>
<span className="text-display">{labelName}</span>
</label>
</div>
</div>
</div>
)
}
private onClicked = (): void => {
this.setState(
prevState => ({navLabel: this.props.args["name"]}),
() => Streamlit.setComponentValue(this.state.navLabel)
)
}
Python execution code
import streamlit as st
import streamlit.components.v1 as components
def my_component(name, iconName, tabIndex, key=None):
component_value = _component_func(name=name, iconName=iconName, tabIndex=tabIndex, key=key, default='Option')
# We could modify the value returned from the component if we wanted.
# There's no need to do this in our simple example - but it's an option.
return component_value
with st.sidebar:
test = my_component(name='Dashboard', iconName='dashboard', tabIndex=1, key="1")
test_2 = my_component(name='Data Analysis', iconName='insights', tabIndex=2, key="2")
test_3 = my_component(name='Testing', iconName='business', tabIndex=3, key="3")
if test == 'Dashboard':
st.title("Dashboard")
st.write('Name of option is {}'.format(test))
elif test_2 == 'Data Analysis':
st.title("Data Analysis")
st.write('Name of option is {}'.format(test_2))
elif test_3 == "Testing":
st.title("Third one")

I was able to sort this out using the li and ul element:
import {
Streamlit,
StreamlitComponentBase,
withStreamlitConnection,
} from "streamlit-component-lib"
import React, { ReactNode } from "react"
interface State {
label: string,
icon: string
}
class MyComponent extends StreamlitComponentBase<State> {
public render = (): ReactNode => {
const labelName:string[] = this.props.args["name"]
const iconName:string[] = this.props.args["iconName"]
let data:any[] = [];
iconName.forEach((v,i) =>
data= [...data, {"id":i+1, "label": labelName[i], "icon":v}]
)
this.state = {
icon:data[0].icon,
label:data[0].label
}
const res = data.map(({id, icon, label}) => (
<span>
<li className="tab"
key={id}
onClick={() => this.setState(
prevState => ({icon:icon, label:label}),
() => Streamlit.setComponentValue(label)
)}><i className="material-icons">{icon}</i><span className="labelName">{label}</span></li></span>
))
return (
<div className="navtab">
<ul className="tab-options">
{res}
</ul>
</div>
)
}
}

Problem dealing with a space when moving JSON to Python

I am high school math teacher who is teaching myself programming. My apologies in advance if I don't phrase some of this correctly.
I am collecting CSV data from the user and trying to move it to a SQLite database via Python.
Everything works fine unless one of the values has a space in it.
For example, here is part of my JavaScript object:
Firstname: "Bruce"
Grade: ""
Lastname: "Wayne Jr"
Nickname: ""
Here is the corresponding piece after applying JSON.stringify:
{"Firstname":"Bruce","Lastname":"Wayne Jr","Nickname":"","Grade":""}
This is then passed to Python via a form. In Python, I use:
data = request.form.get("data")
print(data)
data2 = json.loads(data)
print(data2)
I get a bunch of error messages, ending with: json.decoder.JSONDecodeError: Unterminated string starting at: line 1 column 250 (char 249) and the log of the first print gives:
[{"Firstname":"Jason","Lastname":"Bourne","Nickname":"","Grade":"10"},
{"Firstname":"Steve","Lastname":"McGarret","Nickname":"5-0","Grade":""},
{"Firstname":"Danny","Lastname":"Williams","Nickname":"Dano","Grade":"12"},
{"Firstname":"Bruce","Lastname":"Wayne
So it seems to break on the space in "Wayne Jr".
I used what I learned here to build the basics:
https://bl.ocks.org/HarryStevens/0ce529b9b5e4ea17f8db25324423818f
I believe this JavaScript function is parsing the user data:
function changeDataFromField(cb){
var arr = [];
$('#enter-data-field').val().replace( /\n/g, "^^^xyz" ).split( "^^^xyz" ).forEach(function(d){
arr.push(d.replace( /\t/g, "^^^xyz" ).split( "^^^xyz" ))
});
cb(csvToJson(arr));
}
Updates based on comments:
I am using a POST request. No AJAX.
There are actually 2 inputs for the user. A text box where they can paste CSV data and a file upload option. Here is some more of the JavaScript.
// Use the HTML5 File API to read the CSV
function changeDataFromUpload(evt, cb){
if (!browserSupportFileUpload()) {
console.error("The File APIs are not fully supported in this browser!");
} else {
var data = null;
var file = evt.target.files[0];
var fileName = file.name;
$("#filename").html(fileName);
if (file !== "") {
var reader = new FileReader();
reader.onload = function(event) {
var csvData = event.target.result;
var parsed = Papa.parse(csvData);
cb(csvToJson(parsed.data));
};
reader.onerror = function() {
console.error("Unable to read " + file.fileName);
};
}
reader.readAsText(file);
$("#update-data-from-file")[0].value = "";
}
}
// Method that checks that the browser supports the HTML5 File API
function browserSupportFileUpload() {
var isCompatible = false;
if (window.File && window.FileReader && window.FileList && window.Blob) {
isCompatible = true;
}
return isCompatible;
}
// Parse the CSV input into JSON
function csvToJson(data) {
var cols = ["Firstname","Lastname","Nickname","Grade"];
var out = [];
for (var i = 0; i < data.length; i++){
var obj = {};
var row = data[i];
cols.forEach(function(col, index){
if (row[index]) {
obj[col] = row[index];
}
else {
obj[col] = "";
}
});
out.push(obj);
}
return out;
}
// Produces table for user to check appearance of data and button to complete upload
function makeTable(data) {
console.log(data);
send_data = JSON.stringify(data);
console.log(send_data);
var table_data = '<table style="table-layout: fixed; width: 100%" class="table table-striped">';
table_data += '<th>First name</th><th>Last name</th><th>Nickname</th><th>Grade</th>'
for(var count = 0; count < data.length; count++) {
table_data += '<tr>';
table_data += '<td>'+data[count]['Firstname']+'</td>';
table_data += '<td>'+data[count]['Lastname']+'</td>';
table_data += '<td>'+data[count]['Nickname']+'</td>';
table_data += '<td>'+data[count]['Grade']+'</td>';
table_data += '</tr>';
}
table_data += '</table>';
table_data += '<p><form action="/uploaded" method="post">';
table_data += 'Does the data look OK? If so, click to upload. ';
table_data += '<button class="btn btn-primary" type="submit">Upload</button><p>';
table_data += '<input type="hidden" id="data" name="data" value='+send_data+'>';
table_data += '<input type="hidden" name="class_id" value="{{ class_id }}">';
table_data += '</form>';
table_data += 'Otherwise, fix the file and reload.';
document.getElementById("result_table").innerHTML = table_data;
}
</script>

The JavaScript can be made a lot simpler. If you do the following instead, do you have any problems with the JSON getting cut off?
document.getElementById('update-data-from-file').addEventListener('change', function(evt){
var file = evt.target.files[0];
document.getElementById('filename').innerText = file.name
if (file === "")
return;
Papa.parse(file, {
header: true,
skipEmptyLines: true,
complete: function(results) {
json = results.data
console.log(json)
// Do stuff with the json here
}
});
document.getElementById('update-data-from-file').value = ''
})
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.2/papaparse.min.js"></script>
</head>
<body>
<label>
Upload CSV
<input type="file" name="File Upload" id="update-data-from-file" accept=".csv" />
</label>
<div id="filename">No file chosen</div>
</body>
</html>

The problem was the way I was sending the JSON string -- it wasn't in quotes so anytime there was a space in a value, there was a problem.
To fix it: I got the JSON from the answer above, then before sending the JSON string via a POST request, I enclosed it in quotes.
send_data = JSON.stringify(json);
send_data = "'" + send_data + "'";
I am now able to send values that have spaces in it.

sending checkbox array from js to django views

I'm confused about how to do it via Ajax or Json, but how can I send the selection array (curCheck) on-click to Django views and receive it as a python array
javascript
document.getElementById('results').addEventListener('click', function(){
html_table = '<thead><tr><th>Currency</th><th>Amount</th><th>Symbol</th>><tr/><thead/>'
var checkElements = document.getElementsByClassName('ch');
for(var i =0; i< curname.length; i++){
if (checkElements[i].checked) {
var curChecked = curname[i];
var JsonArr = JSON.stringify(curChecked);
postcurChecked(JsonArr)
html_table += '<tr><td>' + curname[i] + '</td>';
}
}
document.getElementById('result_table').innerHTML = html_table;
},false;
ajax
function postsubChecked(curChecked) {
$.ajax({
"url": "http://127.0.0.1:8000/results/",
"type": "POST",
"data": {"checkbox": curChecked},
"headers": { 'X-CSRFToken': getCookie('csrftoken')}
})
}
in django
def currencyChecked(request):
body_unicode = request.body.decode('utf-8')
body_unicode = body_unicode.replace('%22','')
print(body_unicode) json_data = json.loads(body_unicode.read())
I would like to see the python array print to see it is passed to the back
but I keep getting this error:
json_data = json.loads(body_unicode.read()) AttributeError: 'str' object has no attribute 'read'

For getting the selected checkbox values and sending as an array using ajax you can use jquery like this:
consider you have multiple checkboxes and a button.
<input type="checkbox" name="imageName">
<input type="checkbox" name="imageName">
.......
<button id="deletePhoto">Delete</button>
after selecting multiple checkbox values click on this button. On clicking the below jquery will be triggered to make an arrya of selected checkbox values.
//jquery for getting the selelcted checkbox values
$(document).on("click","#deletePhoto",function(){
var favorite = [];//define array
$.each($("input[name='imageName']:checked"), function(){
favorite.push($(this).val());
});
alert("Photo Selected: " + favorite.join(", "));
if(favorite.length == 0){
alert("Select Photo to delete");
return false;
}
//ajax for deleting the multiple selelcted photos
$.ajax({type: "GET",
url: "/olx/deletePhotoFromEdit",
data:{
favorite:favorite
},
success: function(){
// put more stuff here as per your requirement
});
}
});
});
In the view you can get the array like this:
selected_photo = request.GET.getlist('favorite[]')