I'm trying to find a way to alert the contents of a p tag without a class, name or an id. It is a child of a tag named 'question' so I thought I could just next into it. There are 2 p tags under the parent tag, the one Im looking for is 2nd. When I run this it returns null. I can't figure out why because I'm new to JQuery, thanks for the help.
alert($('#question').find('p').first().next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
Your javascript is fine. The problem is with your HTML. You probably forgot to wrap it inside a table and a tr:
alert($('#question').find('p').first().next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
</tr>
</table>
Your code from the question doesn't work since when <td> is without <table> and <tr> then it gets rendered like there was not <td>:
<p>First</p>
<p>This is the one I want</p>
see here
The problem is that markup is invalid. You can't have td element by itself without table and tr elements. So what happens, is that browser fixes broken markup by removing orphan td tag.
It will work if you make HTML valid:
alert($('#question').find('p').first().next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
</tr>
</table>
When you check the code in the inspector you can see that as table and tr tags are not present then your td tag is not present either and the $('#question') returns null. Just add them.
alert($('#question').find('p').first().next().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
</tr>
</table>
Related
Could someone please explain to me why
$(".transaction_history_tab").hide();
will not hide both
// Container
<tbody class="transaction_history_tab">
</tbody>
// In example this is inside the transaction_history_tab container
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
After hiding transaction_history_tab the "NO DATA TO SHOW" still appears.
$(".transaction_history_tab").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// Without table tags around
<tbody class="transaction_history_tab">
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
</tbody>
Working with the answer from Rory
$(".transaction_history_tab").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// With table tags around
<table>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody class="transaction_history_tab">
<tr>
<td>
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
</td>
</tr>
</tbody>
</table>
The issue is solely caused by invalid HTML. The tbody element must be contained within a table. As yours is not, it isn't rendered. You can see this if you check the DOM in the inspector. The tbody can only contain tr elements too. The child div is therefore also a problem, it should be wrapped in a tr and then a td.
As the tbody element is not rendered, and the .transaction_history_tab doesn't exist, hence there's nothing to hide.
To fix the issue correct your HTML. Either add a table around the tbody, including a tr and td around the div, or remove the tbody completely.
$(".transaction_history_tab").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>This will be shown...</td>
</tr>
</thead>
<tbody class="transaction_history_tab">
<tr>
<td>
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
</td>
</tr>
</tbody>
</table>
Maybe because structure tbody>div without a table/rows/cells is not a valid HTML structure.
Try either using a table>tbody>tr>td>div structure as in this JSFiddle https://jsfiddle.net/u58460ot
or use just the div without tbody as parent
<table>
<tbody class="transaction_history_tab">
<tr>
<td>
<div class="data-info-box">
<span>NO DATA TO SHOW</span>
</div>
</td>
</tr>
</tbody>
</table>
try like above it will work...
You haven't included your css here, but it is possible that your css includes something like this:
.data-info-box {
visibility: visible;
}
which would need changing to:
.data-info-box {
visibility: inherit;
}
This is because a child element set to 'visible' will still show up, even if their parent is 'hidden'. Setting the visibility to 'inherit' means that the child will take on whatever visibility attribute the parent has.
'Inherit' is the default setting for visibility, so if this is the problem you would have had to manually set it to 'visible' in your css (or dynamically in your js).
I have found multiple ways to link an entire table row to another page with jQuery. But every solution I've tried for this does not work with anchors which point to a div that triggers a fancybox.
I have the following HTML
<tbody class="result" data-href="#details1">
<tr>
<td rowspan="2" class="resultlogo">
<img class="resultlogoimg" src="images/logos/logo-orshop.png">
</td>
<td class="resulthead">
<h1><a class="detaillink" href="#details1">Orshop</a></h1>
</td>
<td rowspan="2" class="resultprice">
<h1>€ 69.00</h1></td><td rowspan="2" class="resultrating">
<span class="markbg"><h1>8,3</h1></span>
</td>
</tr>
<tr>
<td class="resultpc"><h2>3074ES, Rotterdam</h2></td>
</tr>
</tbody>
With the following jQuery to trigger the click event:
$(".result").click(function() {
window.document.location = $(this).data("href");
});
The <tbody> tag wraps 2 table rows because of the way a result row is layed out. I want to show div contents in a fancybox based on the user clicking a row (or tbody tag).
Is it not possible to use data-href with anchors?
If you are going to wrap the 2 table rows, set you data attributes in the <table> tag, and not in the <tbody> tag.
Then you only need a simple fancybox initialization script like:
$(".result").fancybox();
And use the fancybox's special data attributes to set the href and the type of content like
<table class="result" data-fancybox-type="inline" data-fancybox-href="#details1">...</table>
See JSFIDDLE
I have a collection of elements of different types. I want to iterate them using ng-repeat, and conditionally draw the right tr per each type.
I can't use ng-repeat-start since I want to use virtual scrolling and none of the libraries I found supports the start/end concept.
Here is a jsfiddle: http://jsfiddle.net/mx6v8j98/1/, which doesn't work. here is the HTML part:
<div ng-app ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat="item in itemsList" ng-switch="$even" ng-class-even="'even'" ng-class-odd="'odd'">
<div ng-switch-when="true">
<td>{{item}} is even</td>
<td>even content</td>
</div>
<div ng-switch-default>
<td>{{item}} is odd</td>
<td>odd content</td>
</div>
</tr>
</tbody>
</table>
</div>
In my real world case, I have many td with complex content, so I don't want to use ng-if/ng-switch-when on each
Update: I can put the ng-repeat on the <tbody> tag, but that looks ugly and I'm not sure what the consequences are regarding styling
Update II: In my case, the 'tr' tag itself is rendered differently according to a condition
As stated in another answer, <div> is not allowed as a child element of <tr>.
You are clearly trying to use <div> as a logical container for ng-switch-when, but since ng-switch-when (and ng-switch-default) supports multi-element, you don't need this container:
<tr ng-repeat="item in items" ng-switch="$even">
<td ng-switch-when-start="true">{{item}} is even</td>
<td>even content 1</td>
<td>even content 2</td>
<td ng-switch-when-end>even content last</td>
<td ng-switch-default-start>{{item}} is odd</td>
<td>odd content 1</td>
<td>odd content 2</td>
<td ng-switch-default-end>odd content last</td>
</tr>
It seems you cannot put <DIV> within <TR> but before <TD>.
Solution 1: Put conditional expression in every <TD>.
<!-- TDs for even row -->
<td ng-if="$even">{{item}} is even</td>
<td ng-if="$even">even content</td>
<!-- TDs for odd row -->
<td ng-if="!$even">{{item}} is odd</td>
<td ng-if="!$even">odd content</td>
Solution 2: For fairly complex table structure, you'd consider create your own directive to represent row cells.
I have the following code:
<table id="first">
<tr class="my-field my-field-color-picker" data-name="background_colour" data-type="color_picker">
<td class="my-input">
<input type="text" class="wp-color-picker">
</td>
</tr>
<tr class="my-field my-field-wysiwyg" data-name="text_block" data-type="wysiwyg">
<td class="my-input">
<iframe>
<html>
<body id="tinymce" class="mce-content-body">
some text
</body>
</html>
</iframe>
</td>
</tr>
</table>
<table id="second">
<tr class="my-field my-field-color-picker" data-name="background_colour" data-type="color_picker">
<td class="my-input">
<input type="text" class="wp-color-picker">
</td>
</tr>
<tr class="my-field my-field-wysiwyg" data-name="text_block" data-type="wysiwyg">
<td class="my-input">
<iframe>
<html>
<body id="tinymce" class="mce-content-body">
some text
</body>
</html>
</iframe>
</td>
</tr>
</table>
On load, I would like to change the background-color to all body elements (which is inside an iframe) to be the value of whatever is in the text input that is in the same tr level as the parent tr of the body.
So I need to get all body elements inside tr['data-type="wysiwyg"] iframe and then set that body elements css background to the value of the closest tr['data-name"background_colour"] siblings input.wp-color-picker.
Hope this makes sense. iframe is in the same domain.
UPDATE: I am able to target the correct body but now I need to figure out how to get the text input value that's in another tr but the same level as the parent tr of body and use that as the body's background-color.
Demo: https://jsfiddle.net/pgr8wzqb/9/
This will only work if the iframes are on the same domain but you can try:
// change the selector to match your iframes
$("iframe").each(function() {
// you seem to need to load the iframe first otherwise the change will revert to any style sheet
$(this).load(function () {
// get the body tag inside the iframe and set the css
$(this).contents().find('body').css('background-color', 'red');
});
});
You will also need to fix your html, tr can only be a child of a table, thead or tbody tag, not a div
Having seen your fiddle, it is the invalid html that is spoiling your selector:
$('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css('background-color', 'red');
will work if you change your wrapper div tags to table tags - with the invalid html, jQuery won't pick up on any $('tr[data-type="wysiwyg"]') and as you don't have a source for the iframe, you don't need to wait until it is loaded
Fixed fiddle
As stated, the document.domains need to be the same and I'm not sure why you have <tr>s in a div, nor what the point of using an iframe is in your case, but:
$('.wp-color-picker').on('change', function () {
var color = GetValueFromColorPicker();
var iframe = $(this).parent().parent().find('iframe');
$(iframe).contents().find('body').css('background-color', color);
});
Is it possible to make content of TD tag editable with CKEditor inline?
I wrote code:
<div contenteditable="true">
this content IS editable
</div>
<table>
<tr>
<td contenteditable="true"> not IS NOT editable </td>
<td contenteditable="true"> not IS NOT editable </td>
</tr>
</table>
Test: http://jsfiddle.net/martinba/JBFmd/1/
I cant find if it is a bug or a feature.
Check my answer for Enable CKEditor4 inline on span and other inline tags. This is the same case - CKEditor does not support initializing it on td. You can try to hack editor just like BenO did in this answer Enable CKEditor4 inline on span and other inline tags but the result is unpredictable.