I am having an issue accessing a paragraph inside a table td using jquery.
What I want to do is to hide the paragraph inside table td if the value is X for example.
This is my code. The value is being select but the hiding is not working.
var Privileges = jQuery('.woocommerce-checkout #customer_details
.woocommerce-billing-fields #billing_country');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'RO') {
$( "#wc-local-pickup-plus-toggle-default-handling" ).show();
}
else $('#wc-local-pickup-plus-toggle-default-handling').hide();
});
Here is the inspected element image. I have no idea why its not working.
Thank You.
$("table td").children().find('p').hide();
If you added the element dynamically use the following:
Privileges.on('change', function(){
// your code here
});
Its looking like the problem in your code is here:
if ($(this).val() == 'RO')
try changing this to
if ($(this).find(':selected').val() == 'RO')
To summarize, the listener is added to the select box, so in the listener, 'this' refers to the select element. Which doesn't have a value.
$(this).find(':selected') finds any sub element that has the "selected" property, which in this cas we know will be an option, which should have a value.
Related
I am trying to retrieve the .html() .val() or something else within a html element, this is my html code (generated dynamically):
<div class="presupuesto"><h2 class="precio" id="precio" value="1202">1.202,00 €</h2>
I need the .val() attribute!
With JQuery and JavaScript I want to show, what option from a select has been selected and then show the information about h2 tag (price). This is my JS code:
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
alert(valueSelected);
alert(("#precio").val());
});
The first alert(valueSelected) works well, but the second one triggers a TypeError
Thanks in advance!
As you said that you have dynamically generated elements. Then You need to use event-delegation:-
$(document).on('change','select',function(){
alert($(this).val()); // to get select value
alert($('#precio').attr('value')); // try to use data-attribute which is standered way
});
Note:- Since <h1>,<h2>..,<div>,<ul><li><p>.... these elements don't have value attribute (In standered way). So use data-attribute option for them like below:-
<h2 class="precio" id="precio" data-value="1202">1.202,00 €</h2>
And then change jQuery code just a bit like below:-
alert($('#precio').data('value'));
I currently have a table and in 1 column a Delete link, if the user clicks this link it fires an onClick which basically flags that item to be deleted and hide the TR.
It works fine, but I am just wondering if there is a better way .....
$(document).on('click', '.deleteCell', function (e) {
//Belt and braces - only do this for <td> elements
var target = $(e.target);
if (!target.is('td')) {return;}
var h = this.innerHTML;
var newH = h.replace("CsUpdated", "CsDeleted");
newH = newH.replace("CsAdded", "CsDeleted");
this.innerHTML = newH;
//We clicked on a TD so get the row TR.
var theRow = $(this).closest('tr');
theRow.hide();
});
I just think there must be a better way than the string manipulation I am doing with the replace? Is there?
I've tried these but with no luck...
$(this).attr('value', 'CsDeleted');
$(target).attr('value', 'CsDeleted');
$(this).val('CsDeleted');
$(target).val('CsDeleted');
Thanks
td has no value use .text() or .html()
td doesnt have a value attribute.
Use
$("td").html() // to fetch html
$("td").html("<span> Hello World </span>") // to set html
$("td").text() // to fetch plain text
$("td").text("Hello World") // to set plain text
You could use any of the following to set the cell contents
.html() or .text() or .prependor .append and more
However .val() only works on inputs that have the value="...." attribute. If you want to prop the Cell with some data use .data("key","value") which can be accessed at any point by calling .data("key");
Try this one,
$(function(){
$('.delete').click(function(){
$(this).closest('tr').remove();
});
});
You may use custom data-- attributes on any html element ( see this MDN article and the reference ). These are accessible through jquery's attr method and have no influence on rendering.
Code PoC:
$(document).on('click', 'td.deleteCell', function (e) {
//Belt and braces - only do this for <td> elements
$(this)
.removeAttr('data-CsUpdated')
.removeAttr('data-CsAdded')
.attr('CsDeleted', '1')
;
//We clicked on a TD so get the row TR.
$(this).closest('tr').hide();
});
In case the values given in your code are mutually exclusive, this simplifies to
$(document).on('click', 'td.deleteCell', function (e) {
//Belt and braces - only do this for <td> elements
$(this).attr('Cs', 'Deleted');
// attr 'Cs' contained 'Added' or 'Updated'
// This scheme requires modifications at other places in your original code !
;
//We clicked on a TD so get the row TR.
$(this).closest('tr').hide();
});
Update
As the OP actually wants to modify the value of a child input element, the handler reduces to:
$(document).on('click', 'td.deleteCell', function (e) {
$('input', $(this)).val('CsDeleted');
// more specific selector may be needed depending on possible cell contents
$(this).closest('tr').hide();
});
I have a basic HTML table with a button in each row.
By click on the button I want to alert the text from the second TD in the same TR.
For some reason the below does not work and either returns nothing or null (depending on whether I try .text() or .html() ). parent instead of closest failed as well.
Can someone tell me what I am doing wrong here ?
(My table has the ID "myTable" and all TRs are in a TBODY, if needed.)
Example TR:
<tr><td style="width:30%"><strong>Row 1:</strong></td><td id="fldRow1" style="width:60%">test text</td><td><button type="button" id="copyRow1" onclick="copyOutput()">Copy</button></td></tr>
JS function:
function copyOutput() {
var output = $(this).closest('tr').find('td:eq(1)').text();
alert(output);
}
Many thanks for any help with this, Tim.
thisin you code not refer to the current element it refers to the window object.
HTML
Change
onclick="copyOutput()"
to
onclick="copyOutput(this)" //pass refer of the current element
js
function copyOutput(el) { //el get current element clicked
var output = $(el).closest('tr').find('td:eq(1)').text();
alert(output);
}
I have a menu consisting of sort criteria. The options per criteria are listed as check boxes in a div wioth class '.collapse_box'.
I need to check each of these div's to see if any of the checkboxes it contains are checked. If there are any checkedboxes I need to set the DIV display to block.
I was thinking along these lines:
$('.collapse_box')each(function()
if( $(this).(input:checked).length() > 0{ //here lies my problem
$(this).show();
}
});
Seeing that I am very new to javascript and jquery I don't know how to return the checked boxes for $(this). Or better said: the correct method to check if any checkboxes in $(this) are checked.
Your selector is wrong, element are always given as string or object:
if( $(this).find('input:checked').length > 0){
Also, length isnt a function, but a property. And you forgot the .find()
Made you a jsFiddle with demo
Alright, assuming that the inputs are children, something like this will work:
$('.collapse_box').each(function(){
if($(this).find('input').prop('checked')){
$(this).show();
}
});
The .prop('checked') piece returns a boolean value of whether the input is checked or not.
EDIT Martijn makes a good point, you can switch it to vanilla JS with a mod to the selector.
$('.collapse_box').find('input').each(function(){
var self = this;
if(self.checked){
self.style.display = 'block';
}
});
I've got a checkbox inside a table, and when you click on it, it'll change the background colour accordingly like so...
$("#table tr td :checkbox").bind("click change", function() {
$this = $(this); // cache the jquery object
if($this.is(':checked')) { $this.closest('tr').css('background-color', 'lightyellow'); }
else { $this.closest('tr').css('background-color', '#fff'); }
});
That works just fine, however, I figured I'd like to go one better, so anywhere on the table row you click, it'll check the box and highlight the row.
I tried using this code, but it doesn't work unfortunately:
$("table tr").bind("click", function() {
$(this).parents("tr").find(":checkbox").attr('checked');
});
And here's the HTML code (removed excessive stuff to improve readability...
<td>Name</td>
<td>Description</td>
<td><input type="checkbox"></td>
Any help would be very much appreciated, thank you!
The event your handling is the tr click.
The parent is the table so that will not help. All you need to do is use find() from the this context.
I would use .live to avoid multiple event handlers when one will do.
Assuming you only have one checkbox in the row then use the following.
(note it uses tr's inside tbody to avoid running this on thead rows)
$("table>tbody>tr").live("click", function() {
$(this).find(":checkbox").attr('checked', 'checked');
});
UPDATE
If you want to toggle it try something like
$("table>tbody>tr").live("click", function(ev) {
var $checkbox = $(this).find(":checkbox");
//check to see we have not just clicked the actual checkbox
if ( !$(ev.target).is(':checkbox') ){
$checkbox.is(':checked') ? $checkbox.removeAttr('checked')
: $checkbox.attr('checked', 'checked')
}
});
You want to change this:
$(this).parents("tr").find(":checkbox").attr('checked');
to this:
$(this).parents("tr").find(":checkbox").attr('checked', 'checked');
Otherwise all you're doing is reading the checked attribute, not setting it.
I think you are just forgetting to set the value of the attribute.
$("table tr").bind("click", function() {
$(this).find(":checkbox").attr('checked', 'checked');
});
The jQuery Docs on Attributes might be of some assistance.
Credit to redsquare for noticing that the .parent("tr") is not needed.