http://jsfiddle.net/yjxq7bae/1/
I am trying to select the checkbox prop in the input tag. The id and name of the input tag are reused, so I have to use the <nobr> text to scale the dom and get the value.
<tr>
<td nowrap="true" valign="top" width="190px" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr>Confirmation Sent</nobr>
</h3>
</td>
<td valign="top" class="ms-formbody">
<span dir="none">
<input id="ctl00_m_g_ed53ee23_de9d_4105_ba24_00e2a21cef5e_ctl00_ctl05_ctl50_ctl00_ctl00_ctl04_ctl00_ctl00_BooleanField" type="checkbox" name="ctl00$m$g_ed53ee23_de9d_4105_ba24_00e2a21cef5e$ctl00$ctl05$ctl50$ctl00$ctl00$ctl04$ctl00$ctl00$BooleanField" checked="checked" /><br />
</span>
</td>
</tr>
<div>Click Here</div>
I have tried every conceivable way. If you will notice .closest() fails once I go up one more from the <h3> element. The fiddle demonstrates this on load by first changing the css of h3, and then attempting to hide the td.
var mop = $('nobr').filter(function () {
return $(this).text() === 'Confirmation Sent'
}).closest("tr").find("input[type=checkbox]").prop('checked');
alert(typeof mop);
$('nobr:contains(Confirmation Sent)').closest("h3").css("background", "yellow");
$('nobr:contains(Confirmation Sent)').closest("h3").closest("td").hide();
$('div').on("click ", function (event) {
var toast = $('nobr').filter(function () {
return $(this).text() === 'Confirmation Sent'
}).closest("tr").find("input[type='checkbox']").prop('checked');
alert(typeof toast);
});
The problem is that you don't have correct syntax for a table. You're missing the <table> and </table> tags around your rows.
Since it's not a valid table, the browser throws away your <tr> and <td> tags:
If you wrap your HTML in a <table> your javascript works as intended.
Related
I'm trying to append all the text in the td elements to the a element as the subject of the mailto link, but I can only get the first closest elements text. How do I make it so it retrieves the text from all the elements? If possible I would rather have the a link inside the tbody element instead of the tr wrapper.
HTML:
<tbody>
<tr class="row-2" role="row">
<td class="column-1" tabindex="0" style="">2238221D2</td>
<td class="column-2">HPINC</td>
<td class="column-3">N7P47AA</td>
<td class="column-4">HP USB 3.0 to Gigabit LAN Adapter</td>
<td class="column-5" style="display: none;">#4.2</td>
<td class="column-6" style="display: none;">16</td>
<td class="column-7" style="display: none;">30</td>
<td class="column-8" style="display: none;">52</td>
<a class="mailme" href="mailto:test#test.com?subject=Product request&body=">mailtolink</a>
</tr>
</tbody>
Script:
$('a.mailme').each(function() {
$(this).attr('href', $(this).attr('href') +
$(this).closest('a.mailme').prev('td').text());
});
Your code is almost right, just select all td-tags, get the text and join the resulting array:
$('a.mailme').each(function() {
$(this).attr('href', $(this).attr('href') +
$(this).closest('.row-2').children('td').slice(0,-1).map(function() {return $(this).html()}).get().join(','));
});
Working fiddle: https://jsfiddle.net/21873jcz/
EDIT My Solution will work if you fix your html code. a tags are not permitted within tr-tags. Only td or th elements are allowed. So please fix your html and it will work
I found a few problems but here is what you want:
https://jsfiddle.net/uqswr2k3/
var subject = "";
$(".row-2 td").each (function() {
subject = subject + '-' + $(this).html();
});
$(".mailme").attr('href', 'mailto:test#test.com?subject=' + subject + '&body=');
<table>
<tbody>
<tr class="row-2" role="row">
<td class="column-1" tabindex="0" style="">2238221D2</td>
<td class="column-2">HPINC</td>
<td class="column-3">N7P47AA</td>
<td class="column-4">HP USB 3.0 to Gigabit LAN Adapter</td>
<td class="column-5" style="display: none;">#4.2</td>
<td class="column-6" style="display: none;">16</td>
<td class="column-7" style="display: none;">30</td>
<td class="column-8" style="display: none;">52</td>
<a class="mailme" href="">mailtolink</a>
</tr>
</tbody>
</table>
Make sure the tbody has an outside table or it can cause issues with jQuery. You were setting the value of the subject to the current iteration and not collecting them all. I put a variable named subject to add each td cells' HTML content. I separated each value in the subject with a dash - to make it cleaner.
I am traversing the divs on my page and looking up child elements using find and supplying a classname
select elements and input elements are located, but the 3 TDs I am trying to find are returning nothing
Here is the code snippet
$.each($(".ccypair"), function(index, element) {
var elements = {
selectElement : $(element).find('.selectstyle'),
inputElement : $(element).find('.inputstyle'),
tdElement1 : $(element).find('.decayTime'),
tdElement2 : $(element).find('.price.bidprice'),
tdElement3 : $(element).find('.price.offerprice')
};
});
Now the first two find() lines work fine, but the three tdElement ones below resolve to nothing. Anyone able to tell me where I am going wrong. I suspect for TD I need to have a different selector?
Apologies here is the html
<div class="ccypair" id="ccypairdiv_0">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
<div class="ccypair" id="ccypairdiv_1">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="top decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
Thanks
First check if your jQuery is loading with the $, the try this
//think about structure, it makes your code more legible
$(".ccypair").each(function(index) {
var element = $(this); //each .ccypair found
var elements = {
selectElement : element.find('.selectstyle'),
inputElement : element.find('.inputstyle'),
tdElement1 : element.find('.decayTime'),
tdElement2 : element.find('.price.bidprice'),
tdElement3 : element.find('.price.offerprice')
};
});
cheers
As always a back to basics approach worked. A simple typo was the root cause here. Apologies
On that note. Does jQuery provide a flag so that rather than failing to locate an element and failing silently it will print out an error message. This would be really helpful?
I have some tables separated by div tags. when some one click on a letter I want to view only the relevant div tag contents. I could do that using this jquery code.
$(".expand_button").on("click", function() {
$(this).next(".expander").addClass('view_expander');
});
but the thing is when the user clicks on another letter it also showing its contents keep showing previously clicked div contents. what I need is if the user clicks on another letter previous things must be hidden. I tried to do it by removing the class "view_expander" but itdidn't work.
$(".expand_button").on("click", function() {
$(this).next(".expander.view_expander").removeClass('view_expander');
});
.
<div class="expand_button">
<h1>A</h1>
</div>
<div id="a_section" class="expander">
<table>
<tr>
<td>
Ambalanthota
</td>
<td>
Isuru Morots
</td>
<td>
B. G. A. Gamini
</td>
<td>
0727610675 <br> 0472225200
</td>
<td>
</td>
<td>
195/1, D S Senanayake Mw, Ambalanthota
</td>
</tr>
</table>
</div>
<div class="expand_button">
<h1>B</h1>
</div>
<div id="b_section" class="expander">
<table>
<tr>
<td>
Bandarawela
</td>
<td>
GTS Holding(Pvt)Ltd
</td>
<td>
CK Bopitiya
</td>
<td>
0773529044 <br> 0572231231
</td>
<td>
</td>
<td>
No.38Badulla Road,Bandarwela.
</td>
</tr>
</table>
</div>
Try this, it collapse other content which you click on any expand button.
$(".expand_button").on("click", function() {
$(".expander").removeClass("view_expander");
$(this).next(".expander").toggleClass('view_expander');
});
Try this, you need to remove the class from all others before setting the new one. To be able to still toggle them you need to track if click its the same item again.
var selected = null;
$(".expand_button").on("click", function() {
if (this !== selected) {
$(".view_expander").removeClass("view_expander");
}
$(this).next(".expander").toggleClass('view_expander');
selected = this;
});
JSFiddle http://jsfiddle.net/zTN6U/1/
You can use toggle class or on every click search if there is an element with the class and remove it.
Example:
$(".expand_button").on("click", function() {
var expender = $('.view_expender');
If (expender.length > 0) {
$(expender).removeClass('view_expander');
}
$(this).next(".expander").toggleClass('view_expander');
});
I'm trying to return the value of the next/closet span with a certain class ID. I am super close but I am confused how to use next() and closest() any help would be awesome
HTML:
<table width="80%" cellspacing="0" cellpadding="0" >
<th scope="col">Data</th>
<tr>
<td width="20%">Show Data
<span class="data">1 </span>
</td>
</tr>
<tr>
<td width="20%">Show Data
<span class="data">2 </span>
</td>
</tr>
<tr>
<td width="20%">Show Data
<span class="data">3 </span>
</td>
</tr>
</table>
JAVASCRIPT
$('.show_data_link').bind('click', function(){
//returns the first class
alert($('.data').html());
//returns null
//alert($('.data').next().html());
//returns null
// alert($('.data').closest().html());
return false;
});
If I use $('.data').html() i can get the value of the first span just not sure how to get the value of the span that is the closet so the link clicked
JSFiddle
you can use alert($(this).next().html()); like this
when you're using $('.data') it gets all the elements with class="data" no matter witch one you've clicked
I have a problem that i want to access the normaltagCmt elements value:
<div id="random no">
<div id="normaltagdialog">
<table style="width:100%; height:100%" border="2px">
<tr style="width:100%; height:13%" align="left">
<td>
<label> {$LANG.TEXT}</label>
</td>
</tr>
<tr style="width:100%; height:59%; vertical-align:middle" align="center" >
<td>
<textarea id="normaltagCmt" style="width:90%; height:90%" ></textarea>
</td>
</tr>
<tr style="width:100%; height:13%">
<td>
<label> {$LANG.COLOR}</label>
</td>
</tr>
<tr style="width:100%; height:15%; ">
<td>
<table style="width:100%;height:100%" cellpadding="2" cellspacing="2">
<tr id="colorPad" align="center">
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
The script i have written above is a jquery dialog and this dialog opens many times.
i want to get the value of normaltagCmt for a particular div with a specific random id.
How can i get that in javascript?
Try $('#random_no #normaltagCmt').val().
i hope by "random no" you mean random number, you cant have a space in a ID and ill use ID14 instead of "random no".
$("#ID14 #normaltagdialog table tr td #normaltagCmt").val()
There can only be one of any ID in javascript, so you could just do $('#normaltagCmt') and it will always only return the one element.
However, if you want to check to make sure that it is a child of an element with a random id (a number that you do not know), then it will get a little trickier.
$("#normaltagCmt").filter(function() {
var valid_parent = false;
var numeric_re = /^\d+$/g;
for( var parent in $(this).parents("div") ) {
if( re.test(this.id) ) {
valid_parent = true;
break;
}
}
return valid_parent;
}
This bit of jQuery will test to make sure that the element with the specified id has a parent div with a numeric id. If it does not, then you will be left with an empty jQuery object.