HTML:
{% for item in result %}
<tr id="row">
<td><input name="item" type="checkbox" value="{{ item.number }}"></td>
<td contenteditable id="col1">{{ item.foo }}</td>
<td contenteditable id="col4">{{ item.bar }}</td>
</tr>
{% endfor %}
I am using facebox . Where I want to show the single row in the facebox which ever i checked ( checked the checkbox, which is in first <td> ). Jquery is:
$(document).ready(function() {
$('#edit').click(function() {
jQuery.facebox({ div: '#row' })
return false;
});
});
This jquery is giving me the first row only.
You cannot use the same "id" value for more than one element in a page.
You can change that from "id" to "class" and it (might) work. It's hard to tell what exactly you're doing.
<tr class='row'>
<!-- ... -->
</tr>
then
// ...
jQuery.facebox({div: '.row'});
Of course you could just find the <tr> elements directly:
jQuery.facebox({div: 'tr'});
Related
I'm using Django framework. I have a table that contains some columns. I need to change the background of the aht column based on the agent_target column so if the value lower than or equal the target the background should be green, else it should be red.
{% for item in data %}
<tr>
<td class="text-center align-middle">{{ item.loginid }}</td>
<td class="text-center align-middle">{{ item.agentname }}</td>
<td class="text-center align-middle">{{ item.team }}</td>
<td class="text-center align-middle">{{ item.queue_name }}</td>
<td class="text-center align-middle">{{ item.sumduration}}</td>
<td class="text-center align-middle">{{ item.countduration}}</td>
<td class="text-center align-middle aht">{{ item.aht}}</td>
<td class="text-center align-middle target">{{ item.agent_target}}</td>
</tr>
{% endfor %}
When I try to access the value of the AHT column using the below js it returns undefined value
console.log(document.getElementById("aht").value)
Non javascript
You can actually do this without javascript
in your css
.over_target{
background-color:"red" /* or use #ff0000 style */
}
.on_target {
background-color: "green"
}
then replace your current td aht line with
<td class="text-center align-middle
{% if item.aht > item.agent_target %}
over_target
{% else %}
under_target
{% endif %}
">{{ item.aht}}</td>
javascript
If you really want to use javascript, it gets a bit more complicated.
You have added 'aht' as a class. You want to uniquely identify each cell, so you will need an id instead. To use 'aht' as an ID you would use;
<td class="text-center align-middle" id="aht">{{ item.aht}}</td>
However, you're using a forloop to loop through a list, each of which you will want to have a unique id, because otherwise other rows will have a cell with the same id. To get around that we can grab a number from the django {{forloop.counter}}
<td class="text-center align-middle" id="aht{{forloop.counter}}">{{ item.aht}}</td>
Use the same format for the target column
Then, to set the colour for the target column you can use something like this (after the table code):
<script>
function getColour(aht, target) {
if (aht > target) {
return "red"}
return "green"
}
{% for item in data %}
aht = document.getElementById('aht{{forloop.counter}}).innerText
target= document.getElementById('target{{forloop.counter}}).innerText
targetColour = getColour(aht, target)
document.getElementById('aht{{forloop.counter}}').style.backgroundColor = targetColour
{%endfor%}
</script>
Your selector is trying to find a tag with id equal to "aht", not class "aht".
value is not a property to find text for table value, because this is a td element, not input element, you have to use innerText property. You can try innerText or textContent
console.log(document.querySelector('.aht').innerText)
Please bear in mind this is only trying to get the text value of the first td element.
What you are trying to do can be accomplished by ternary operator in Django template. This is like an if, but shorter.
<style>
.bg-green {
background-color: green;
}
.bg-red {
background-color: red;
}
</style>
{% for item in data %}
<tr>
<td class="text-center align-middle">{{ item.loginid }}</td>
<td class="text-center align-middle">{{ item.agentname }}</td>
<td class="text-center align-middle">{{ item.team }}</td>
<td class="text-center align-middle">{{ item.queue_name }}</td>
<td class="text-center align-middle">{{ item.sumduration}}</td>
<td class="text-center align-middle">{{ item.countduration}}</td>
<td class='text-center align-middle aht {{ item.aht <= item.agent_target |yesno:"bg-green,bg-red,bg-none" }}'
>{{ item.aht}}</td>
<td class="text-center align-middle target">{{ item.agent_target}}</td>
</tr>
{% endfor %}
Please try the code and let me know if it worked!
*If you think my solution answered your question please Accept this answer, thanks very much! *
References:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
https://docs.djangoproject.com/en/4.1/ref/templates/builtins/#yesno
I am loading API data into a table using Flask and once the elements are placed in their cells, I have jQuery to add bootstrap class to the td elements. When I add bootstrap classes "btn" and "btn-secondary", the two td elements are sticking side by side where as I want them in their respective columns.
<table>
<tbody id="myTable">
{% for row in values %}
<tr class="item">
<td class="link">Link</td>
{% for element in row['values'] %}
<td>{{ element }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
The for loops are jinja templating to substitute the values into the table
$(".item td:nth-child(7)").addClass("requestedStatus btn btn-secondary");
$(".item td:nth-child(7)").on('click', function() {
$(this).text($(this).text() == 'IN' ? 'OUT' : 'IN');
})
// Add button feature and Toggle text between True and False for usageFlag column
$(".item td:nth-child(8)").addClass("usageFlag btn");
$(".item td:nth-child(8)").on('click', function() {
$(this).text($(this).text() == 'True' ? 'False' : 'True');
})
Please assist me on this.
I have this table in html, and I load it with Php Laravel
<div class="form-row col-md-12">
<table id="contacts" class="table table-striped">
<tbody>
<tr>
<th>Id</th>
<th>Cel</th>
<th>Tel</th>
<th>Email</th>
<th>Actions</th>
</tr>
#if(isset($contacts) && count($contacts)>0)
#foreach($contacts $c)
<tr>
<td class="inf" data-id="{{ $c->id }}"> {{ $c->id }} </td>
<td class="inf" data-cel="{{ $c->cel}}"> {{ $c->cel}} </td>
<td class="inf" data-tel="{{ $c->tel}}"> {{ $c->tel}}</td>
<td class="inf" data-email="{{ $c->email }}"> {{ $c->email }} </td>
<td>
<button class='btn btn-primary btnAlterarContato' type="button">Alterar</button>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
You can see that each row has its data attribute for creating data. I made a method that I can retrieve the data from the TD and alter them, however I can not change the data of the data. how do I change how information that is without data attribute?
$('.btnAlterarContato').click(function(){
var Row= $(this).closest('tr');
var Posicao = 1;
// Switch: 1 = Id, 2 = Cel, 3 = Tel, 4 = Email
Row.find('td').each(function(){
switch(Posicao)
{
case 2: $(this).text('new value '); $(this).attr('data-cel', 'Hi');
$(this).data('data-cel','Hi') ;break;
}
Posicao++;
});
});
I have a repeat loop to walk on every table td, and in case position 2 is the value of cel, I would like to change your display item and your cell-date when I do $ (this) .text ('new value ') this works, but I can not change the mobile date, how do I do this?
For changing data attribute use .data() like below:-
$(this).data('cel', 'Hi');
Note:- Once clear your browser cache and check
Is there a way to read through an HTML page and return the value of the dynamic checkboxes which are clicked?
Now, I know how to get values from static check boxes even without using JS but since I am generating the below check boxes using data from Database I am not sure how to pin point each one and know which one the user checked,
When I went through developer tools in chrome I can see that the value of the generated check boxes changes but when I refer to them it still does not work.
<!DOCTYPE html>
<html lang="en">
<form action="/test" method="post">
<button type="submit" id="exporst-btn" class="btn btn-primary">Import Test Data <span class="glyphicon glyphicon-import"></span></button>
<br>
<br>
<div id="table">
<table class="table table-condensed">
<thead>
<tr>
<th>Selection</th>
<th>Slno</th>
<th>Region</th>
</tr>
</thead>
<tbody>
{% for obj in TD %}
<tr>
<td>
<input type="checkbox" name="chb[]" > {{obj.OEHR_Mtest_Slno}}
</td>
<td>
{{obj.OEHR_Mtest_Slno}}
</td>
<td>
{{obj.OEHR_Mtest_SF_Part_Number}}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!--<p id="export" name="test"></p>-->
<input type="hidden" id="exp" name="test">
<button type="submit" id="export-btn" class="btn btn-success">Execute <span class="glyphicon glyphicon-play"></span></button>
</form>
</body>
<script type="text/javascript"><!--
$('#export-btn').click(function () {
alert($('#mytable').find('input[type="checkbox"]:checked').length + ' checked');
});
</script>
</html>
I can use the above JS to know how many checkboxes have been checked, I want to know the value of the ones checked and I am not able to get that.
If I'm not mistaken,
var foo = $('#mytable').find('input[type="checkbox"]:checked')
will return an array of html elements which are checkboxes, and are checked. You can then do:
var bar = [];
foo.each(function (index) {
var baz = this.parentNode.textContent || this.parentNode.innerText;
if (baz && baz.length > 0)
bar.push(baz);
});
console.log(bar);
That will make bar an array of the values which were checked. It gets the checkboxes which were checked, finds their parents (<td> tags), and gets the text inside (which skips the <input> tags). This will do it client-side.
Because you're dynamically generating the checkboxes, it's helpful to also dynamically generate the values for the checkboxes. That way, when you POST the request via the submit button, Flask can determine which checkboxes were checked by reading the values. I would change your HTML to:
{% for obj in TD %}
<tr>
<td>
{# Assuming obj.OEHR_Mtest_Slno is a unique value #}
<input type="checkbox" name="chkbox" value="{{obj.OEHR_Mtest_Slno}}"> {{obj.OEHR_Mtest_Slno}}
</td>
<td>
{{obj.OEHR_Mtest_Slno}}
</td>
<td>
{{obj.OEHR_Mtest_SF_Part_Number}}
</td>
</tr>
{% endfor %}
Then in your backend, you can access the values via:
# Use .getlist if you are using HTML form elements with the same name
chkbox_values = request.form.getlist('chkbox') # returns a list of values that were checked
I'm trying to do a simple DOM transverse in an each loop. The issue is that jquery is selecting multiple instances of the specified class instead of the one I'm trying to select using $(this). This is my markup:
#foreach ($details as $i)
<tr>
<div class="ajax-tracking-check">
<input type="hidden" name="trans_id" value="{{ $i->transaction_id }}"/>
<input type="hidden" name="tracking" value="{{ $i->tracking_number }}"/>
<input type="hidden" name="carrier" value="{{ $i->shipping_carrier }}"/>
</div>
<td class="td-image">{{ HTML::image($i->image_url, 'item-image', array('class' => 'sir')) }}</td>
<td>{{ $i->item }}</td>
<td>${{ $i->price }}</td>
<td>{{ date('M d, Y',strtotime(Transaction::where('transaction_id', $i->transaction_id)->pluck('created_at'))) }}</td>
<td class="breh">
{{ $i->tracking_number }}
<!-- </br> -->
{{ $i->shipping_carrier }}
</td>
<td class="status"><h2>{{ $i->status }}</h2></td>
</tr>
#endforeach
I'm trying to select the class ".breh" with this line in my js:
var field = $(this).parent().find('td.breh');
This is the entire function:
$('.ajax-tracking-check').each(function() {
var number = $(this).find('input[name="tracking"]').val();
var trans_id = $(this).find('input[name="trans_id"]').val();
var carrier = $(this).find('input[name="carrier"]').val();
var field = $(this).parent().find('td.breh');
$.post(
'purchased/ajax/tracking/check',
{
trans_id: trans_id,
number: number,
carrier: carrier
},
function(data) {
if (number !== "1")
{
// field.text(data['city']+', '+data['state']);
field.addClass('red');
}
}
);
});
The first instance table row's var number is equal to 1 BUT the second row is equal to a random string. With my if statement, I'm trying to add the class "red" but it's added to both instances of "field".
The HTML is not valid.
Your ".ajax-tracking-check" DIV is not contained by a TD inside the table and because of that on the statement
var field = $(this).parent().find('td.breh');
The parent() is returning the BODY element and after that the find() returns all of the .breh element ocurrences.
You should wrap that DIV on a TD element (you can hide it with a display:none) and then the statement would be
var field = $(this).parents('tr').find('td.breh');
Note the plural of "parents()", this will go up in the parents chain until it finds the element TR not just one level as with the singular "parent()"