Case:
I have a table in my database in which every row contains a value of type form and has a save button at the end of the row.
Now what I want to do the following things:
When I click the save button, a modal popup must open and it should display the data that was present in the row whose save button was clicked.
Also, the modal will have two buttons submit and cancel.
If I click on save button on the model, the data must be sent at the back-end (I am using Django as back-end).
How can I do this?
Any help will be highly appreciated.
Code:
{% block content %}
<table id ="devicetable" cellpadding="20%" style="width:100%">
<thead>
<tr>
{% for column in columns %}
<td>{{ column }}</td>
{% endfor %}
{% if type != "NReq" %}
<td> Button </td>
{% endif %}
</tr>
</thead>
{% for a in all %}
<tr>
<form action = {% url type %} method="POST">{% csrf_token %}
{% for k in columns %}
<td>{{ a|get_item:k }}<input type = "hidden" name = {{k}} value = "{{ a|get_item:k }}"></td>
{% endfor %}
{% if type != "NReq" %}
<td> <button type="submit" class="btn btn-primary">{{type}}</button></td>
{% endif %}
</form>
</tr>
{% endfor %}
</table>
{% endblock %}
You can handle the submit event of the form when clicking the save button (see onsubmit Event). Use this event to call a function where you (a):
Open the modal
Loop through the <input> tags inside the form and display the contents in the modal
Return false so that this data is not send to the server
Now when the modal is open, handle the events of your buttons and manually raise the submit event of your form. For jQuery this may look like this (b) - untested:
$("#submit").on("click", function() { $("#formId").submit(); });
$("#cancel").on("click", function() { $("#modalId").close(); });
Please note: when you submit the form from the modal (b), you should insert a global variable to not repeat the steps of (a). Otherwise the form will never be submitted.
Related
I am creating a dynamic html table, it is populated with data from a pandas dataframe in python. The last column contains a large block of text (article abstract) for each row, making the rows very large and the table hard to read/navigate. I am looking to hide the content of the last column behind a toggle button (either popover or link to a popup window would be fine). I'm using bootstrap css and javascript.
Is there a way to apply an if statement only to the last column/cell? How else can I achieve this?
Thank you very much in advance.
main.py looks like this:
from flask import Flask, render_template
from researchdashboard import combined_dictionaries
app = Flask(__name__)
headings = ("""list of headings""")
for x in combined_dictionaries:
data = combined_dictionaries.iloc
#app.route('/')
def index():
return render_template('index.html', headings=headings, data=data)
if name == "__main__"_
app.run(debug=True)
and the table section in the html looks like this:
<table class="""some specifics for the table design""">
<tr>
{% for header in headings %}
<th>{{ header }}</th>
{% endfor %}
</tr>
<tbody>
{% for row in data %}
<tr>
{% for cell in row %}
<td>{{ cell }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
Edit: So I ended up using the following solution:
<tr>
{% for header in headings %}
<th>{{ header }}</th>
{% endfor %}
</tr>
{% for row in range(num_rows) %}
<tr>
{% for cell in data[row] %}
<td>{{ cell }}</td>
{% endfor %}
<td><button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="{{ abstract_data[row] }}">Abstract</button></td>
</tr>
{% endfor %}
</table>
Where data contains the dataframe except for the column the contents of which I want to be hidden. abstract_data contains just said column and is thus called upon seperately. num_rows is generated from a len("""input measure that specifies the number of rows in the table""") function.
Thank you very much for any solutions that were suggested.
EDIT:
If you are fine just showing a popup window, you can check out the example I made in this fiddle
However, if you want to show a modal instead, please mind that there are many accessibility nuances that you'll have to face. It would probably be better to use a library to help with handling all those situations.
ORIGINAL:
in your situation I would use javascript to toggle a class on the table, and then hide the last column based on that class.
You can hide the last column of a row using css this way:
td:last-child {
display: none;
}
You can find a complete example of what I suggest in this fiddle
I need to display metafields based on the variants selected on the product page. I want them to change as the variants are clicked. I may need some jquery help but I am not that sure how to apply with liquid. Below is my code, any help is greatly appreciated!
{% for variant in product.variants %}
<div id="tab{{ forloop.index0 }}" class="zr-tabs-panel {% if forloop.first == true %}js-active{% endif %}">
<div class="table-responsive>">
<table class="table table-striped">
<tbody>
{% for field in current_variant.metafields.var_meta %}
<tr>
<td>{{ field | first }}</td>
<td>{{ field | last }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endfor %}
The short answer is that you will need to (a): Expose your meta fields to your site's javascript somehow, then (b): Update your variant-changing code to also update the section based on your meta fields.
In many themes, the variant-changing code is contained in a function named selectCallback (though this isn't the case in all themes - if you have trouble finding this code, you can try reaching out to your theme's developer for theme-specific advice).
Whenever you're using Liquid code to put values into Javascript code, I strongly recommend using the json filter - Liquid's magic filter that ensures your output will always be Javascript-legal. (Quotation marks and line breaks will be properly escaped, empty values will be printed as null, etc)
I'm displaying a mysql database using Django on a webpage. I'm rendering the database as obj from views.py and using it in index.html. I want to know is it possible to get the index of this object obj? i.e., In the same loop iteration I want the next row's value, for example in row 10th's iteration, with {{ b.col2 }} I get col2's value for the 10th row, how can get I 11th row's b.col2 value in the same loop iteration and store it in a temporary variable for comparison. Is there a way I could get index of the object?
<script>
var i = 1; </script>
{% for b in obj %}
<tr>
<td>{{ b.col1 }}</td>
<td><span class="wrapped"><span>{{ b.col2 }}</span></span> </td>
<td id='myTable'></td>
<td id='myTable'></td>
<td>{{ b.col5 }}</td>
<td>{{ b.col6 }}</td>
<td>{{ b.col7 }}</td>
</tr>
{% endfor %}
</table>
UPDATE:
views.py:
def display(request):
return render_to_response('index.html', {'obj': my_model.objects.order_by('col2')})
You can use a forloopcounter (docs) to help you know the index you're on, along with obj.index to help you get the value of next index. This is not recommended though, Django Template is specifically designed to handle simplicity, while you're recommended to do the rest in python.
Also read about slice, which can be used for lists (docs).
Edit for Full Answer:
In your app directory create a folder called templatetags
inside templatetags, create a file called __init__.py
inside templatetags, create another file called custom_tags.py
open custom_tags.py and add the following code:
from django import template
register = template.Library()
#register.filter
def next_object(value, arg):
try:
return value[int(arg)+1].col2
except:
return None
In your template add the following code:
{% load custom_tags %}
{% for b in obj %}
{% ifequal forloop.counter0 10 %} <!–– We are at index 10 -->
{% with obj|next_object:forloop.counter0 as next_object %}
{{ next_object }} <!–– Returns value of col2 from index 11 -->
{% endwith %}
{% endifequal %}
{% endfor %}
Hope it helps,
When you use a templated for-loop in Django, a few variables get set automatically for you. One such variable is forloop.counter which will be 1-indexed over your loop. That is, it's first value will be 1 and then on each iteration of the loop, it will increase by 1. You would use it like so:
{% for b in obj %}
{{ forloop.counter }} <!-- your logic here -->
{% endfor %}
I want to include table rows via hinclude.:
<tbody>
{% for bill in bills %}
{{ render_hinclude(controller('xxx:Admin:renderRow', {'bid': xxx.id}), {'Default': '<tr><td colspan="10"><img src="/img/ajax-loader.gif" /></td>'}) }}
{% endfor %}
</tbody>
It works, but the loaded comment will be displayed above the table. I know that's a javascript based problem. Is there a simple way to tell hinclude where the row should been shown?
Thanks!
reffering to my title above:
patientdetails.html
<form id="content" action="{% url patientdetails_view pk %}" method="post" >
{% csrf_token %}{{form.owner}}
------
<tbody><tr>
<td><input type="submit" value="Save" >
------
patientList.html
{% for patient in patienter %}
<tr class = {% cycle "row_even" "row_odd" %}>
<td>{{ patient.id }}</td>
<td> {{ patient.Personnummer }}</td>
<td class ="name"> {{ patient.first_name }} {{ patient.last_name }}</td>
{% endfor %}
here is my question
My program flow like this. I have to click to a list of names in patientList.html and edit some data in patientdetails.html and after i made the changes how do i get back to patientList.html after i have done some changes in patientdetails.html and save. i have to click twice to get back to the original page. the first click refreshing and save the data and the second click back to the original page.
why is it doing that. what did i missing here.
how do i do alert stated"Data are saved".
I'm very very new to django. I'm totally lost in here.
You can redirect to a url after completion of your form processing in the view that handles patient detail updates. You can use HttpResponseRedirect() to do this. This is very basic in django refer docs Using a form in a view
For #2, you can make use of django messages framework to pass messages. Through templates you can show a message wherever you feel appropriate.