Develop Reference

JQuery table not coming when using extends tag

I am making a jquery data table and extending an admin panel. The issue is thatwhen I use the extend tag to extend the admin panel into the jquery data table page, the jquery table doesnt come
below is only JQuery table
below is the image with the admin panel where the JQuery table doesnt come
below is the html code for the JQuery table using extends tag
{% extends 'polls/base.html' %}
{% block content %}
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8"
src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<table id="table_id">
<thead>
<tr>
<th>ID</th>
<th>Categories</th>
<th>Sub-Categories</th>
<th>Colors</th>
<th>Size</th>
<th>Title</th>
<th>Price</th>
<th>SKU Number</th>
<th>Product Details</th>
<th>Quantity</th>
</tr>
</thead>
{% for result in data %}
<tbody>
<tr>
<td><b>{{result.id}}</b></td>
<td><b>{{result.categories}}</b></td>
<td><b>{{result.sub_categories}}</b></td>
<td><b>{{result.color}}</b></td>
<td><b>{{result.size}}</b></td>
<td><b>{{result.title}}</b></td>
<td><b>{{result.price}}</b></td>
<td><b>{{result.sku_number}}</b></td>
<td><b>{{result.product_details}}</b></td>
<td><b>{{result.quantity}}</b></td>
<td>
<a href="/update/{{result.id}}/">
<button class="btn btn-primary">
Edit
</button>
</a>
</td>
<td>
<a href="/delete/{{result.id}}/" onclick="return confirm('Are You Sure you want to delete?')">
<button class="btn btn-danger">
Delete
</button>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(function () {
$("#table_id").dataTable();
});
</script>
{% endblock %}
Help is greatly appreciated thanks!

How to select different ModelForms based on select value for DJANGO model form

I have a list of values. Within the list of values is a status which has a hyperlink to a particular model form.
I want to dynamically change the hyperlink based on the select value to direct the user to different forms based on the select value.
So, for example, when the Model value is pending, I want the hyperlink to go to the pending form. When the status is invoice sent and the use clicks the hyperlink I want the user to to go to the payment form.
The code is below
<table id="example1" class="table table-bordered table-striped" data-order='[[ 0, "desc" ]]' data-page-length='25'><button onClick="refreshPage()" class="btn btn-secondary float-right" title="Refresh"><i class="fa fa-sync"></i></button>
<thead>
<tr>
<th>Script No.</th>
<th>Entered on</th>
<th>Script Type</th>
<th>Patient</th>
<th>Address</th>
<th>Email</th>
<th>Contact No</th>
<th>Product</th>
<th>Form</th>
<th>Units</th>
<th>Dispensing Price</th>
<th>Status</th>
<th>Dispatch Date</th>
<th>Worksheet ID</th>
<th></th>
</tr>
</thead>
<tbody>
{% for script in scripts %}
<tr>
<td>{{script.pk}}</td>
<td>{{script.entered_on}}</td>
<td>{{script.get_script_type_display}}
<td>{{script.patient}}</td>
<td>{{script.patient.address}} {{script.patient.city}} {{script.patient.AU_states}} {{script.patient.postal_code}}</td>
<td>{{script.patient.email}}</td>
<td>{{script.patient.mobile_number}}</td>
<td>{{script.product}}</td>
<td>{{script.product.form.description}}</td>
<td>{{script.quantity}}</td>
<td>$ {{ script.dispensing_price }}</td>
{% if script.dispatch_date is not none %}
<td>{{script.get_script_status_display}}</td>
{% else %}
<td> <a class="edit" href="#" data-url="{% url "script:script_update_status" script.pk %}">{{script.get_script_status_display}}</a></td>
{% endif %}
{% if script.dispatch_date is none %}
<td>Not Sent</td>
{% else %}
<td>{{script.dispatch_date}}</td>
{% endif %}
{% if script.document_id is none %}
<td>Not Made</td>
{% else %}
<style></style>
<td>{{script.document_id}}</td>
{% endif %}
<td><small>View | Edit | Lab Label | <a href="{% url 'label:dispense_label' script.pk %}">Dispense Label
</a> | Shipping Label | Repeat<!--0 {% if script.patient.target_species == 'A' %}| Counselling Email{% endif %}--></td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
document.querySelectorAll('#example1 a.edit').forEach(function(a) {
a.addEventListener('click', function(e) {
e.preventDefault();
const url = this.dataset.url;
window.open(url, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=250");
});
});
</script>
</div>```
Thanks in advance for any help.
Kind Regards,
AC

How to send data from index.html to views.py in django

I have a table contains a list of fifty companies(items) on a side there is a button. I want to send the name of the company from the table in which user is clicked.
Code of index.html :
<table class="table table-striped table-dark" cellspacing="0">
<thead class="bg-info">
<tr>
<th>Company's Symbol</th>
<th>Current Price</th>
<th>View Current chart</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for a,b in stocks %}
<tr>
<th scope="row" class="comp_name">{{ a }}</th>
<td>{{ b }}</td>
<td>
<input type="submit" class="btn graph-btn" name="_graph" value="View Graph">
</td>
<td>
<input type="submit" class="btn predict-btn" name="_predict" value="Predict Closing Price">
</td>
</tr>
{% endfor %}
</tbody>
</table>
There are two buttons for different URL. Like when user liked on .graph-btn it will go to a different URL.
Help.

If you want to go to another path (Route) that needs variables
in your template you can use the url function as shown below :
.....
if you want to get the same result from your python code user reverse method
return HttpResponseRedirect(reverse('url_path', args(var1)))
for more check django's documentation here

select child element jQuery

I have a table structured like this:
<table>
<tbody>
for loop here
<tr>
<td>Item X Attribute 1</td>
<td>Item X Attribute 2</td>
<td><button name="test" onclick="display_variants()">Hide my kids</button></td>
</tr>
<tr>
<tbody class="variants_info">
<tr>
<td>Item X Variant 1</td>
<td>Item X Variant 2</td>
</tr>
</tbody>
</tr>
endfor loop
</tbody>
</table>
So that structure repeats Y amount of times.
I'm trying to make a script that hides the tbody.variants of the row selected.
What I have so far is this:
<script>
function display_variant(){
if($('.variants_info').is(":visible")){
$('.variants_info').hide();
}
else{
$('.variants_info').show();
}
}
</script>
but this hides the variants from ALL the rows.
Is there a way to select the childs of the specific row? Also how can I start with the tbody.variants hidden? (Start as in when I visit the page).
Edit: At the moment is looking closely to this:
Update:
I've managed to change the structure to this:
<table>
for loop
<tbody>
<tr>
<td>image for el 1</td>
<td>attr for el 1</td>
<td><button type='button' name='test'>Click Me</button></td>
</tr>
for loop
<tr class='variants_info'>
<td>variant1 for el 1</td>
<td>variant2 for el 1</td>
</tr>
endfor
</tbody>
endfor
</table>
Update 2: The actual code is this one:
<table class="pure-table pure-table-bordered">
<tbody>
{% for product in collection.products %}
{% if product.available %}
<tr class="{% cycle 'pure-table-odd', '' %}">
<td>
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" alt="{{ product.featured_image.alt | escape }}" />
</td>
<td>{{ product.title }}</td>
<td style="text-align:right">
<button type="button" name="click_me">Click Me</button>
</td>
</tr>
{% for variant in product.variants %}
<tr>
<td>{{variant.title}}</td>
<td>{{variant.price | money }}</td>
</tr>
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>
<script>
$("td button").click(function(){
$(this).closest('tr').next().toggle();
})
</script>
I still can't get the JS to work.. =/ Current one is only hiding the first variant( Instead of all the variants for the clicked button )

I would suggest to mark the rows that contain the products with a class name, e.g. "product", like this:
<tr class="product {% cycle 'pure-table-odd', '' %}">
<td>
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}"
alt="{{ product.featured_image.alt | escape }}" />
</td>
<td>{{ product.title }}</td>
<td style="text-align:right">
<button type="button" name="click_me">Click Me</button>
</td>
</tr>
You would not add that class to the rows that have the variants.
Then in your JavaScript use the nextUntil method to match all next variant rows (which do not have the "product" class) until, but excluding, the next product row, and apply the toggle() method to all these:
$("td button").click(function(){
$(this).closest('tr').nextUntil('.product').toggle();
});
Alternative structure 1
Instead of a single table, you could create nested tables, one for each product, containing the variants. It would look somewhat like this:
<table class="pure-table pure-table-bordered">
<tbody>
{% for product in collection.products %}
{% if product.available %}
<tr class="{% cycle 'pure-table-odd', '' %}">
<td>
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}"
alt="{{ product.featured_image.alt | escape }}" />
</td>
<td>{{ product.title }}</td>
<td style="text-align:right">
<button type="button" name="click_me">Click Me</button>
</td>
</tr>
<tr>
<table class="some other class specific for variants">
<tbody>
{% for variant in product.variants %}
<tr>
<td>{{variant.title}}</td>
<td>{{variant.price | money }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
This has advantages and disadvantages. The main disadvantage is that the columns of these sub-tables are not aligned with the columns in the main table. But it depends on what you want...
The JavaScript code would then have to be like you had it originally:
$("td button").click(function(){
$(this).closest('tr').next().toggle();
});
Alternative structure 2
You could also wrap each "section" (consisting of one product row and the variant rows that belong to it) with a tbody tag. Although not commonly done, this is allowed as stated on MDN:
Note that unlike the <thead>, <tfoot>, and <caption> elements however, multiple <tbody> elements are permitted (if consecutive), allowing the data-rows in long tables to be divided into different sections, each separately formatted as needed.
This is different from your original HTML, where you had tbody elements as children of tr elements, which is invalid HTML.
It would look like this:
<table class="pure-table pure-table-bordered">
{% for product in collection.products %}
{% if product.available %}
<tbody>
<tr class="{% cycle 'pure-table-odd', '' %}">
<td>
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}"
alt="{{ product.featured_image.alt | escape }}" />
</td>
<td>{{ product.title }}</td>
<td style="text-align:right">
<button type="button" name="click_me">Click Me</button>
</td>
</tr>
{% for variant in product.variants %}
<tr>
<td>{{variant.title}}</td>
<td>{{variant.price | money }}</td>
</tr>
{% endfor %}
</tbody>
{% endif %}
{% endfor %}
</table>
You can then use the nextAll() method to hide the variant rows, because they are delimited by the tbody wrapper from the next product row:
$("td button").click(function(){
$(this).closest('tr').nextAll().toggle();
});
Initially hiding the variant rows
If you want the variants all to be hidden at first, then add the following attribute to those rows in the HTML code:
<tr style="display:hidden">
You would of course not do this for the product rows. Also, you might want to define a CSS class for this (e.g. tr.hidden { display:hidden; } instead of using style.
The jQuery toggle() method will override this style when showing, and restore it again when hiding.

Your HTML is not valid so you can change that and then use this DEMO
$("td button").click(function() {
$(this).closest('tr').next().toggle();
})

try this one :-
$("td button").click(function() {
$(this).closest('tr').nextUntil("tbody").toggle();
});
the jsfiddle demo link is :- https://jsfiddle.net/Lg0wyt9u/776/

window.open is having issue with firefox

I am using window.open method to open a new webpage in myhtml. but when I am running it in Firefox it is reloading the same page. But it is working in Chrome and Safari. Here is my html and javascript snippet.I am using Python Flask framework with Jinja template. I also tried using location.replace instead of window.open
</div>
<form name="items">
<script type="text/javascript" language="javascript">
function getdetails(name){
window.open("/details?name="+name,"_self")
}
</script>
<table id="main" align="center" class="table table-striped table-bordered" >
<thead>
<tr>
<th> <strong> SNo </strong></th>
<th> <strong> name </strong></th>
<th> <strong> item </strong></th>
<th> <strong> Total numbers </strong></th>
<th> <strong> size </strong></th>
</tr>
</thead>
{% set count = 1 %}
<tbody id="tablebody">
{% for i in rows %}
{% for name,values in i.iteritems() %}
<tr>
<td style="text-align: center"> {{ count }}</td>
<td> {{ name }} </td>
{% for j in values %}
<td> {{ j }} </td>
{% endfor %}
</tr>
{% endfor %}
{% set count = count + 1 %}
{% endfor %}
</tbody>
</table>
</form>
</div>

Try using window.location.href instead of window.open, location.href is a property and not a method so you'd have to call it differently, but it does work like a page redirect, although i'd try to figure out whats going wrong with window.open - it is the more 'correct' way.
window.location.href = 'http://www.google.com';
Since your questions was a bit unclear, if you're trying to make the page open in a new tab, change _self to _blank in the window.open method.
window.open("/details?name="+name,"_blank");