I am trying to add a new table row with Htmx. By clicking the "Add A New Row" button, a new row should be added to the table.
I can't get the row in the secondary_hx.html to be added to the table, instead it results as three forms next to each other without or .
Any help would be appreciated. Thank you in advance.
My code is like this:
main.html:
<table id="myTable">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody id="Tbody">
<tr>
<td>
<button class="add_button"
type="submit"
hx-post="/add_row/"
hx-target="#Tbody"
hx-swap="beforeend"
>
Add A New Row
</button>
</td>
</tr>
</tbody>
</table>
partials/secondary_hx.html:
<tr hx-target="this"
hx-swap="outerHTML">
<td>{{ form.a }}</td>
<td>{{ form.b }}</td>
<td>{{ form.c }}</td>
</tr>
Related
In Models.py
class Interview(models.Model):
Current_Date = models.DateField(auto_now_add=True )
User = models.ForeignKey(User,on_delete=models.CASCADE)
Recuirement = models.ForeignKey(Client_Requirement,on_delete=models.CASCADE)
Candidate = models.ForeignKey(Candidate, on_delete=models.CASCADE)
Interviewer = models.ForeignKey(Interviewer, on_delete=models.CASCADE)
Interview_Mode = models.ForeignKey(Interview_Mode, on_delete=models.CASCADE)
Date = models.DateField()
Time = models.TimeField()
Interview_status = models.ForeignKey(Interview_status, on_delete=models.CASCADE)
Interview_Location = models.CharField(max_length=30)
Comments = models.TextField(max_length=1000)
Update_Date = models.DateTimeField(auto_now=True)
def __str__(self):
return str(self.Interviewer)
in Views.py
def BD(request):
Interview_data = Interview.objects.all()
context={'Interview_data':Interview_data}
return render(request,'Sub/BD.html', context)
How i can get all the data in Interview table and also individual details of Recuirement, Candidate table in modal bootstrap 5
In for loop tag in django
<div class="row">
<div class="row">
<h1>Graphs</h1>
</div>
<div class="row">
<div class="col-lg-12" style="padding: 20px 60px 0 60px;">
<table class="table table-hover table-bordered">
<thead>
<tr class="table-dark">
<th scope="col">Id</th>
<th scope="col">Created_on</th>
<th scope="col">Recruiter</th>
<th scope="col">Requirement</th>
<th scope="col">Candidate</th>
<th scope="col">Interview_Mode</th>
<th scope="col">Data&Time_Interview</th>
<th scope="col">Interview_Status</th>
<th scope="col">Interview_Location</th>
<th scope="col">Comments</th>
<th scope="col">Last_updated</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{% for interview in Interview_data %}
<tr>
<th scope="row">{{interview.id}}</th>
<th scope="row">{{interview.Current_Date}}</th>
<th scope="row">{{interview.User}}</th>
<td>
{{interview.Recuirement}}
<div class="modal fade" id="Requirement" tabindex="-1" aria-labelledby="requirement" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="requirement">Requirement Details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table">
<tbody>
<tr>
<th scope="row">ID</th>
<td>{{ interview.Recuirement.id }}</td>
</tr>
<tr>
<th scope="row">Company Name</th>
<td>{{ interview.Recuirement.Client_Info }}</td>
</tr>
<tr>
<th scope="row">Position</th>
<td>{{ interview.Recuirement.Position }}</td>
</tr>
<tr>
<th scope="row">Department</th>
<td>{{ interview.Recuirement.Department }}</td>
</tr>
<tr>
<th scope="row">Experience</th>
<td>{{ interview.Recuirement.From_Year }} Years {{ interview.Recuirement.To_Year }} Months</td>
</tr>
<tr>
<th scope="row">Notice Period</th>
<td>{{ interview.Recuirement.NoticePeriod }}</td>
</tr>
<tr>
<th scope="row">Salary Package</th>
<td>{{ interview.Recuirement.Salary_package}}</td>
</tr>
<tr>
<th scope="row">Location</th>
<td>{{ interview.Recuirement.Location }}</td>
</tr>
<tr>
<th scope="row">No of Openings</th>
<td>{{ interview.Recuirement.No_Of_Openings }}</td>
</tr>
<tr>
<th scope="row">Job Description</th>
<td>{{ interview.Recuirement.Job_Description }}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
<td><button type="button" style="border-radius: 30px;" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#Candidate">
{{interview.Candidate}}
</button>
<div class="modal fade" id="Candidate" tabindex="-1" aria-labelledby="candidate" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="candidate">Candidate Details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table">
<tbody>
<tr>
<th scope="row">id</th>
<td>{{ interview.Candidate.id }}</td>
</tr>
<tr>
<th scope="row">Current_Date</th>
<td>{{ interview.Candidate.Current_Date }}</td>
</tr>
<tr>
<th scope="row">Candidate_Name</th>
<td>{{ interview.Candidate.Candidate_name }}</td>
</tr>
<tr>
<th scope="row">Client</th>
<td>{{ interview.Candidate.Client_Info }}</td>
</tr>
<tr>
<th scope="row">Qualification</th>
<td>{{ interview.Candidate.Qualification }}</td>
</tr>
<tr>
<th scope="row">Experience</th>
<td>{{ interview.Candidate.Year }} Years {{ interview.Candidate.Months }} Months</td>
</tr>
<tr>
<th scope="row">Current_Salary</th>
<td>{{ interview.Candidate.Current_Salary }}</td>
</tr>
<tr>
<th scope="row">Current_Location</th>
<td>{{ interview.Candidate.Current_Location}}</td>
</tr>
<tr>
<th scope="row">Expected_Salary</th>
<td>{{ interview.Candidate.Expected_Salary }}</td>
</tr>
<tr>
<th scope="row">Preferred_Location</th>
<td>{{ interview.Candidate.Preferred_Location }}</td>
</tr>
<tr>
<th scope="row">Languages_Known</th>
<td>{{ interview.Candidate.Languages_Known }}</td>
</tr>
<tr>
<th scope="row">Marital_Status</th>
<td>{{ interview.Candidate.Marital_Status }}</td>
</tr>
<tr>
<th scope="row">Candidate_Notice_Period</th>
<td>{{ interview.Candidate.Candidate_Notice_Period }}</td>
</tr>
<tr>
<th scope="row">Email</th>
<td>{{ interview.Candidate.Email }}</td>
</tr>
<tr>
<th scope="row">Primary_Contact_No</th>
<td>{{ interview.Candidate.Primary_Contact_No }}</td>
</tr>
<tr>
<th scope="row">Secondary_Contact_No</th>
<td>{{ interview.Candidate.Secondary_Contact_No }}</td>
</tr>
<tr>
<th scope="row">Comments</th>
<td>{{ interview.Candidate.Comments }}</td>
</tr>
<tr>
<th scope="row">Update_Date</th>
<td>{{ interview.Candidate.Update_Date }}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div></td>
<td>{{interview.Interview_Mode}}</td>
<td>{{interview.Date}}-{{interview.Time}}</td>
<span class="badge rounded-pill bg-primary">Primary</span>
<td>{{interview.Interview_status}}</td>
<td>{{i.Interview_Location}}</td>
<td>{{interview.Comments}}</td>
<td>{{interview.Update_Date}}</td>
<td>Edit</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
Trying to add the value of item['val'] to the table results in empty space
item.num is a list of numbers that is shown as an integer on the table, where as item.val is a float number that needs to be shown as is on the table
app.py
#app.route('/')
def index():
items = Item.query.filter_by().all()
# item.num is a list of items
# item.val is a float value
tmp = {"item_num":item.num , "item_val":str(item.val)}
result[item.name] = tmp
return render_template("information.html", info=result)
information.html
<thead>
<tr>
<th scope="col">name</th>
<th scope="col">item num</th>
<th scope="col">item val</th>
</tr>
</thead>
<tbody>
{% for item in info %}
<tr>
<td>{{ item }}</td>
<td>{{ item['num'] | length }}</td>
<td>{{ item['val'] }}</td>
</tr>
{%endfor%}
</tbody>
how do you add a value from the dictionary to the table
If I understand you correctly, you have a dict with a nested dict, like in this example. The name of an item represents the key value under which further data is stored. Since you don't mention your second table in your code, I can't refer to that one.
#app.route('/')
def index():
items = Item.query.all()
result = { item.name: {'num': item.num, 'val':str(item.val)} for item in items }
return render_template('information.html', info=result)
So you can iterate over all key-value pairs with the keyword items() and then query the data from the nested dict.
<thead>
<tr>
<th scope="col">name</th>
<th scope="col">item num</th>
<th scope="col">item val</th>
</tr>
</thead>
<tbody>
{% for k,v in info.items() %}
<tr>
<td>{{ k }}</td>
<td>{{ v['num'] | length }}</td>
<td>{{ v['val'] }}</td>
</tr>
{%endfor%}
</tbody>
I am quite new to Flask and I am having a hard time to understand why I am only getting a list of elements in my browser (single column), I would like to get 3 different columns and my data is correct:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Mail</th>
<th>Delete</th>
</tr>
{% for n in customers %}
<tr>
<td>{{n['First Name']}} </td>
</tr>
<tr>
<td>{{n['Last Name']}}</td>
</tr>
<tr>
<td>{{ n['Phone']}}</td>
</tr>
<tr>
<td> Supprimer <td></td>
</tr>
{% endfor %}
</table>
What you are really looking for is something like this:
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Mail</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{% for n in customers %}
<tr>
<td>{{n['First Name']}} </td>
<td>{{n['Last Name']}}</td>
<td>{{ n['Phone']}}</td>
<td> Supprimer <td></td>
</tr>
{% endfor %}
</tbody>
</table>
tr Stands for Table Row. Check out this link to learn a bit more about tables
I have created a table with django forms in it. The forms do get data from the database, from two different models. Since this form has 42 fields consisting of 7 days and 6 shifts, i would love to save it as the table it is rendered. Is there any way to do this?
forms.py
class EditSchedule(forms.Form):
def __init__(self,*args,**kwargs):
super(EditSchedule, self).__init__(*args,**kwargs)
for k in range(1,8):
for i in range(1,7):
self.fields["S"+str(i)+"D"+str(k)] = forms.ChoiceField(choices=get_my_choices(i,k))
self.fields["S"+str(i)+"D"+str(k)].widget.attrs.update({"class":"form-control select2 select2-hidden-accessible"})
html file
<div class="box">
<form method="POST" action="">{% csrf_token %}
<div class="box-body">
<div class="table-container table-responsive">
<table class="table table-bordered table-hover dataTable" role="grid" >
<thead>
<tr>
<th class = "shicht"><h3>Schicht</h3></th>
<th class = "montag"><h3>Montag</h3></th>
<th class = "dienstag"><h3>Dienstag</h3></th>
<th class = "mittwoch"><h3>Mittwoch</h3></th>
<th class = "donnerstag"><h3>Donnerstag</h3></th>
<th class = "freitag"><h3>Freitag</h3></th>
<th class = "samstag"><h3>Samstag</h3></th>
<th class = "sonntag"><h3>Sonntag</h3></th>
</tr>
</thead>
<tbody>
<tr class="even">
<td class="shicht">Schicht 1</td>
<td class="montag">{{ form.S1D1 }}</td>
<td class="dienstag">{{ form.S1D2 }}</td>
<td class = "Mittwoch">{{ form.S1D3 }}</td>
<td class = "donnerstag">{{ form.S1D4 }}</td>
<td class = "freitag">{{ form.S1D5 }}</td>
<td class ="samstag">{{ form.S1D6 }}</td>
<td class ="sonntag">{{ form.S1D7 }}</td>
</tr>
<tr class="odd">
<td class="shicht">Schicht 2</td>
<td class="montag">{{ form.S2D1 }}</td>
<td class="dienstag">{{ form.S2D2 }}</td>
<td class = "Mittwoch">{{ form.S2D3 }}</td>
<td class = "donnerstag">{{ form.S2D4 }}</td>
<td class = "freitag">{{ form.S2D5 }}</td>
<td class ="samstag">{{ form.S2D6 }}</td>
<td class ="sonntag">{{ form.S2D7 }}</td>
</tr>
<tr class="even">
<td class="shicht">Schicht 3</td>
<td class="montag">{{ form.S3D1 }}</td>
<td class="dienstag">{{ form.S3D2 }}</td>
<td class = "Mittwoch">{{ form.S3D3 }}</td>
<td class = "donnerstag">{{ form.S3D4 }}</td>
<td class = "freitag">{{ form.S3D5 }}</td>
<td class ="samstag">{{ form.S3D6 }}</td>
<td class ="sonntag">{{ form.S3D7 }}</td>
</tbody>
</table>
</div>
</div>
<input type="submit" value="Save">
You can use raw queries for this.
For capture the form filds you can use the "clean" methods in the base form class see forms validation
in my views.py:
def show(request):
query_results=Emails.objects.all()
#from py_utils import open_py_shell;open_py_shell.open_py_shell()
context = { 'query_result' : query_results }
return render(request, 'show.html', context)
in show.html:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
{% for item in query_result %}
<tr>
<td>Ohad</td>
<td>{{ item.email }}</td>
<td>{{ item.baseurl }}</td>
</tr>
{% endfor %}
</tbody>
</table>
an email object has email field and baseurl field but it seems that i cannot load it,
i checked and in query_result i have a list of Emails object just cannot put it in the table, any help?