Toggle show/hide element where default on refresh is hide - javascript

My script successfully shows and hides a column in the table, I would like by default for it to be hidden and the script to reveal it.
Thanks for your help.
<a onclick="myFunction()" style="float:right;">Hide/Show</a>
<table>
<tr>
<th>TO Date</th>
<th id="myDIV">LDG Date</th>
<th>TO Time</th>
<th>LDG Time</th>
<th>Dep. air.</th>
<th>Arr. air.</th>
<th></th>
</tr>
{% for l in logbook %}
<tr>
<td>{{ l.TO_Date }}</td>
<td id="myDIV">{{ l.LDG_Date }}</td>
<td>{{ l.TO_time }}</td>
<td>{{ l.LDG_time }}</td>
<td>{{ l.dep_airport }}</td>
<td>{{ l.arr_airport }}</td>
<td ><a style="color:red;" href="{{ url_for('logbookdelete',id_del=l.id ) }}">Delete</a></td>
</tr>
{% endfor %}
</table>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

Just add style="display: none;" to your cells:
<th class="myDIV" style="display: none;">
Notice I've changed id to class as you are not supposed to have two equal id's on the same page.
But I'd do that this way:
<style>
.ldg-date-hidden .myDIV { display: none; }
</style>
<a onclick="myFunction()" style="float:right;">Hide/Show</a>
<table id="myTable" class="ldg-date-hidden">
<tr>
<th>TO Date</th>
<th class="myDIV">LDG Date</th>
<th>TO Time</th>
<th>LDG Time</th>
<th>Dep. air.</th>
<th>Arr. air.</th>
<th></th>
</tr>
{% for l in logbook %}
<tr>
<td>{{ l.TO_Date }}</td>
<td class="myDIV">{{ l.LDG_Date }}</td>
<td>{{ l.TO_time }}</td>
<td>{{ l.LDG_time }}</td>
<td>{{ l.dep_airport }}</td>
<td>{{ l.arr_airport }}</td>
<td ><a style="color:red;" href="{{ url_for('logbookdelete',id_del=l.id ) }}">Delete</a></td>
</tr>
{% endfor %}
</table>
<script>
function myFunction() {
document.getElementById("myTable").classList.toggle("ldg-date-hidden");
}
</script>

You can hide the column by setting display:none by default and then you can do the below:
function myFunction() {
var x = document.getElementsByClassName("myDIV");
for(var i=0;i<x.length;i++)
{
if (x[i].style.display === "block") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
}

You can force the initial state by putting the inline style (display:none) on the tag, its not the best way but that should work.
I recommend you to make the styles on a css file separated of the html file to avoid hierarchy issues.
const x = document.getElementById('myDIV');
function toggleVisibility() {
if (x.classList.contains('hidden')) {
x.classList.remove('hidden');
} else {
x.classList.add('hidden');
}
}
CSS file
.hidden: {
display: none;
}

Related

how to update html value without unique id in JavaScript?

Currently, I am developing a site that guides coin market arbitrage information.
I wonder if the way below is possible in JavaScript.(not React)
backend - django
def index(request):
data = [{"name": "BTC", "binance": "price1", "gecko": "price2", "ftx": "price3"},
{"name": "ETH", "binance": "price1", "gecko": "price2", "ftx": "price3"}]
return render(request, 'index.html', context={'data': data})
html -
<table class="table table-striped mb-0 fixed">
<thead>
<tr>
<th>name</th>
<th>binance</th>
<th>gecko</th>
<th>ftx</th>
</tr>
</thead>
<tbody>
{% for d in data %}
<tr>
<td>{{ d.name }}</td>
<td>{{ d.binance }}</td>
<td>{{ d.ftx }}</td>
<td>{{ d.okx }}</td>
</tr>
{% endfor %}
</tbody>
</table>
JS -
var socket = new WebSocket(
'ws://' + window.location.host +
'/ws?session_key=${sessionKey}')
socket.onmessage = function (e) {
let positions_data = JSON.parse(e.data)
//if positions_data {"site": "binance", "price": "27000", "name": "BTC"}
//update data ->
data = [{"name": "BTC", "binance": "27000", "gecko": "price2", "ftx": "price3"},
{"name": "ETH", "binance": "price1", "gecko": "price2", "ftx": "price3"}]
//do something?
//then change html value
}
Is it possible to change the html value just by changing the variable in JS
Or is it possible to take additional code? Or is there another way?
Change your HTML so that the rows have a unique ID based on the coin name, and the columns have classes that indicate their roles.
<table class="table table-striped mb-0 fixed">
<thead>
<tr>
<th>name</th>
<th>binance</th>
<th>gecko</th>
<th>ftx</th>
</tr>
</thead>
<tbody>
{% for d in data %}
<tr id="row-{{d.name}}">
<td class="name">{{ d.name }}</td>
<td class="binance">{{ d.binance }}</td>
<td class="ftx">{{ d.ftx }}</td>
<td class="okx">{{ d.okx }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Then you can find the row that corresponds to positions_data and update it:
let row = document.querySelector(`#row-${positions_data.name}`);
let site = positions_data.site;
row.querySelector(`.${site}`).innerText = positions_data.price;

Filter by class in a Vue table, generated with v-for

I'm in Vue2 and I have a table, created by a v-for, with the rows that have a class of "included" or "allResults", based on a condition.
I need to show/hide only the table rows with a class of "included" when I trigger a switch (dataShow) that has a value of all or selected.
I've written a simple method for that but I would like to implement this function directly in the vue template, checking if every table row has a class of selected and hide it.
thanks in advance for help
<input v-model="dataShow" true-value="selected" false-value="all" type="checkbox" name="Show all or selected" />
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" :class="watchedProperty.map(el => el.idorg).includes(comparable.idorg) ? 'included' : 'allResults'">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
How about using v-if or v-show to toggle the rows?
If dataShow is false, show all rows
or, if dataShow is true, show only the rows listed in watchedProperty
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
If you'd like to use class to toggle the visibility, you need to set css. Something like this...
<table :class="{'showAll': !dataShow}">
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
</table>
<style scoped lang="scss">
table.showAll td:not(.included) {
display: none;
}
</style>

hide table heading if all values in table are null

I have a model form that I am displaying in a table. The form has about 40 fields broken down into 6 different tables. I have setup an if statements to not display the table elements if the field is empty in the db. This works as expected the only issue is that if all the elements are hidden the table header is still displayed. How could I hide the table header if all if the elements in that particular table are hidden.
<table class="post-table">
<tr>
<th class="table-header" colspan="2">
<h3>Pool Details</h3>
</th>
</tr>
<tbody>
{% if post.pool_size != '' %}
<tr>
<td>pool size:</td>
<td>{{ post.pool_size }}</td>
</tr>
{% endif %}
{% if post.pool_style != '' %}
<tr>
<td>Pool Style:</td>
<td>{{ post.pool_style }}</td>
</tr>
{% endif %}
</tbody>
</table>
Update:
<table class="post-table">
<tr>
<th class="table-header" COLSPAN="1" id="tab_header">
<H3>ADDITIONAL INFO</H3>
</th>
</tr>
<tbody id="tab_body">
{% if post.additional_info != '' %}
<tr>
<td>{{ post.additional_info }}</td>
</tr>
{% endif %}
</tbody>
</table>
<br>
<script>
let tbody = document.getElementById("tab_body").innerHTML;
if (tbody === '') {
tab_header = document.getElementById("tab_header").innerHTML = " ";
} else {
// Nothing to do i guess
}
</script>
You can use JavaScript to hide the header if the <tbody> is empty :
Suppose that we have <th id="tab_header">Tab header</th> <tbody id="tab_body">Some content here</tbody>
Then
let tbody = document.getElementById("tab_body").innerHTML;
# Check if it contains something
if (tbody === '') {
tab_header = document.getElementById("tab_header").innerHTML = "";
} else {
// Nothing to do i guess
}
NB Be aware about checking the content of may be it is not empty string but sme other thing else.
<table class="post-table" id="table-example">
<tr>
<th class="table-header" COLSPAN="1" id="tab_header">
<H3>ADDITIONAL INFO</H3>
</th>
</tr>
<tbody id="tab_body">
{% if post.additional_info != '' %}
<tr>
<td id="test">{{ post.additional_info }}</td>
</tr>
{% endif %}
</tbody>
</table>
<script>
var tbl = document.getElementById('table-example');
if (tbl.rows.length == 1) {
console.log('IT WORKED')
tab_header = document.getElementById("tab_header").innerHTML = "";
}
console.log(tbl.rows.length)
</script>

How to sort table data from client side according to a specific table data using javascript

Here is my Table data coded in laravel. I just want to sort data as per Issue date. I have to do it from client end and can not do it from controller for some reason. I would like to have some suggestion or demo code of javascript. Thanks in advance.
<table class="table">
<thead>
<tr>
<th>No</th>
<th>PR ID</th>
<th>PR Type</th>
<th>Issue Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<?php
$j=1;
$checker = 1;
$checker2 = 0;
if($current > 1){
$checker = $current*2;
$checker2 = ($current*2)+50;
}else if( $quot_count = 1 && $current = 1){
$checker2 = 2;
}else if( $quot_count = 2 && $current = 1){
$checker2 = 50;
}else{
$checker2 = ($current*2)+2;
}?>
#for($i= $checker; $i < $checker+50; $i++ )
#if(isset($quotations->$i->qr_details->pr_id))
<tr>
<td>{{ $j++ }}</td>
<td class="prId" id=""><a style="cursor: pointer;" class="pr-modal" rel="{{$i}}" data-toggle="modal" data-target="#myModal{{$i}}">{{ $quotations->$i->qr_details->pr_id }}</a></td>
<td>{{ $quotations->$i->qr_details->pr_type }}</td>
<td>{{ $quotations->$i->qr_dates->start_date }}</td>
<td>{{ $quotations->$i->qr_dates->end_date }}</td>
</tr>
#endif
#endfor
</tbody>
</table>

Send jquery array to controller for processing in Symfony2

I'm trying to send an array of row id's to a controller in order to do a batch update, I think I already did the array part (i'm not good at jQuery, still learning) but I have no idea how to send to the controller the array that contains the ids of the rows to update.
Here's my twig:
{% block javascripts %}
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$('#selectall').click(function () {
$('.selectedId').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll(id) {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".selectedId").length == $(".selectedId:checked").length) {
$("#selectall").attr("checked", "checked");
var ids = [];
ids.concat(id);
} else {
$("#selectall").removeAttr("checked");
removeItem = id;
ids = jQuery.grep(arr, function(value) {
return value != removeItem;
});
}
if ($(".selectedId:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
</script>
{% endblock %}
{% block body %}
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall"></th>
<th>{{ 'general.date'|trans }}</th>
<th>{{ 'general.order_number'|trans }}</th>
<th>{{ 'general.description'|trans }}</th>
<th>{{ 'general.company_name'|trans }}</th>
<th>{{ 'general.name'|trans }}</th>
<th>{{ 'form.status'|trans }}</th>
<th>WinPoints</th>
</tr>
</thead>
{% for details in details %}
<tbody>
<tr>
<td><div align="center"><input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll({{details.id}});" /></div></td>
<td>{{ details.date | date("m/d/Y") }}</td>
<td>{{ details.order_number }}</td>
<td>{{ details.description }}</td>
<td>{{ details.company }}</td>
<td>{{ details.name }}</td>
<td>{{ details.status }}</td>
<td>{{ details.winpoints }}</td>
</tr>
</tbody>
{% endfor %}
</table>
<form action="{{ path('advd_group_batch_p_r_status') }}" method="post" {{ form_enctype(formBase) }}>
{{ form_widget(form) }}
<input class="input_button" type="submit" value="Procesar" />
</form>
{% endblock %}
Any ideas? Plus, if you see any mistakes on the jquery code, please let me know what i'm doing wrong, i haven't been able to test it because I don't know how to send the array to the controller.
Thank you for any help you may offer me.
{% block javascripts %}
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$('#selectall').click(function () {
$('.selectedId').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll(id) {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".selectedId").length == $(".selectedId:checked").length) {
$("#selectall").attr("checked", "checked");
var ids = [];
ids.concat(id);
} else {
$("#selectall").removeAttr("checked");
removeItem = id;
ids = jQuery.grep(arr, function(value) {
return value != removeItem;
});
}
if ($(".selectedId:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
$(function(){
$('.input_button').click(function(){
$.ajax({
url:"advd_group_batch_p_r_status",
dataType:'json',
type:'post',
data:$("#formC").serialize()
});
});
});
</script>
{% endblock %}
{% block body %}
<form action="{{ path('advd_group_batch_p_r_status') }}" method="post" {{ form_enctype(formBase) }} id="formC">
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall"></th>
<th>{{ 'general.date'|trans }}</th>
<th>{{ 'general.order_number'|trans }}</th>
<th>{{ 'general.description'|trans }}</th>
<th>{{ 'general.company_name'|trans }}</th>
<th>{{ 'general.name'|trans }}</th>
<th>{{ 'form.status'|trans }}</th>
<th>WinPoints</th>
</tr>
</thead>
{% for details in details %}
<tbody>
<tr>
<td><div align="center"><input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll({{details.id}});" /></div></td>
<td>{{ details.date | date("m/d/Y") }}</td>
<td>{{ details.order_number }}</td>
<td>{{ details.description }}</td>
<td>{{ details.company }}</td>
<td>{{ details.name }}</td>
<td>{{ details.status }}</td>
<td>{{ details.winpoints }}</td>
</tr>
</tbody>
{% endfor %}
</table>
{{ form_widget(form) }}
<input class="input_button" type="submit" value="Procesar" />
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
I have a Newsletter form in my application that is posted with the following javascript:
<script type="text/javascript">
function subscribeButtonPressed() {
$.post('{{path('mailchimp_subscribe')}}',
{
EMAIL: $("#mce-EMAIL").val(),
listid: $("#listid").val()
},
function (response) {
ga('send', 'pageview', '{{ path('mailchimp_subscribe') }}');
console.log(response);
if (response.code == 100 && response.success) {//dummy check
var alert = '<div class="span12 padding20" id="formContainer">\n\
<h1>Great!</h1>\n\
</div>';
$('#formContainer').fadeOut('slow', function () {
$('#thanksContainer').append(alert).hide().fadeIn('slow');
});
}
}, 'JSON');
}
$(document).ready(function () {
$('#mc-embedded-subscribe')
.click(function (event) {
var btn = $(this);
if ($("#mce-EMAIL").val() != "") {
event.preventDefault();
btn.button('loading');
subscribeButtonPressed();
}
});
});
</script>
I also log the event via google analytics and show some response html. But I guess you get the idea, just use $.post with the path where you want to send it to. And I pick the single values of my form, but you could also just send the whole form.

Categories