I have the following code:
<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>
I am able to get the text input with class="wp-color-picker" thanks to another thread using $('tr[data-name="background_colour"] input.wp-color-picker')
When this text input has a change of value. I want to change the background color of <body>
<body> is inside an iframe inside a tr element with data-type="wysiwyg" which is on the same level as tr with data-name="background_colour"
It's a bit of a mess so I hope this makes sense.
jsFiddle: https://jsfiddle.net/rk3fcjkb/19/
You can do something like this
$(document).ready(function(){
$('tr[data-name="background_colour"] input.wp-color-picker').on('keyup', function(){
$(this).closest('tr').siblings('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css({
background: $(this).val()
});
});
});
Demo
PS: Accessing stuff inside iframe can get very nasty.
You need to get the iframe first and then from there go to the body tag:
$( ".wp-color-picker" ).keyup(function() {
$('tr[data-type="wysiwyg"] td iframe').contents().find("body").css("background-color","blue");
});
Fiddle Example
Note: For change to trigger you need to un-focus the input element, if you want it to do it right away change it on keyup instead.
Related
I am implementing the view behavior using jQuery. I can input directly to the table td. I want to give an event when inputting to this td.
But the event is not recognized, what should I do?
Here is the code:
<div class="a">
<table class="tb">
<tr>
<td></td>
</tr>
</table>
</div>
<script type="text/javascript">
$(".a table tr td").on('keypress', function(event){
console.log(event);
});
</script>
It is an event required only on the page, so it is difficult to modify the common jQuery code that draws and enters the table.
Based on this:
A keypress event handler can be attached to any element, but the event
is only sent to the element that has the focus
So you need to have focusable element, see this to know what are the focusable element: Which HTML elements can receive focus?
If I have textbox in td everything going to be fine:
$(".a table tr td").on('keypress', function (event) {
console.log(event.key);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="a">
<table class="tb">
<tr>
<td><input /></td>
</tr>
</table>
</div>
The below code works, so if it doesn't work in your case, that probably means that the <input> field is not yet added by your other "common" code, at the time you add the keypress listener.
So the solution should be to first add the <input> fields, and after that you execute your key handler code.
<div class="a">
<table class="tb">
<tr>
<td><input type="text"></td>
</tr>
</table>
</div>
Execute this AFTER the input fields have been added
$(".a table tr td").on("keypress", function (event) {
console.log(event.key);
});
Working example here: https://jsfiddle.net/081cL2xu/
I'm trying to get the headers value from the object when I click on its link.
For the example I'm trying to get the value "2014_BUDGET" when I click on the link.
I've tried all sorts of variations.
Tried getting .prop() instead of .attr.
Tried searching .closest('td')
Tried getting the parent attr.
All end with an alert with 'undefined'.
Here is my code
<td headers="2014_BUDGET" class="MYCLASS">1</td>
<td headers="2014_BUDGET" class="MYCLASS">1</td>
In href this points to the global window object.
Use onclick instead.
<td headers="2014_BUDGET" class="MYCLASS"><a href="#"
onclick="alert(this.parentNode.getAttribute('headers')); return false">1</a></td>
$(document).ready(function(){
$("a.anchor").on("click", function(e) {
e.preventDefault();
alert($(this).closest("td").attr("headers"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td headers="2014_BUDGET" class="MYCLASS">1</td>
<td headers="2015_BUDGET" class="MYCLASS">2</td>
</tr>
</table>
Try this;
<td headers="2014_BUDGET" class="MYCLASS">1</td>
It's essentially the same answer as Gurvinder372, however, that answer targets the A tag, rather than the TD tag.
1
Edit
Never mind, he has updated his answer. Ignore this one.
Trying to copy content of table into a div, and can't make it work...
Here is sample code of the table and div
<table><tr>
<td class="movr">See this content</td>
</tr></table>
<div class="sample"></div>
and here is jquery code
$(document).ready(function(){
var move = $(".movr").html;
$(".sample").html(move);
});
Can't find the mistake..
html is method and not property. Use .html() instead of .html:
var move = $(".movr").html();
$(".movr") returns an array NOT an object, mate.
I have some tags (tagbutton) in a table, each tag has its own id, what I want to achieve is when the user clicks on the tag, a hidden input is created in the form with the value of the div (or tag) that has been clicked on. I also want the clicked div to be copied in the tagselected div.
I have no idea how to do that on jquery. Thank you very much in advance for your help.
<table> <tr>
<td> <div class="tagbutton" id="jazz"> Jazz </div> </td>
<td> <div class="tagbutton" id="classical"> Classical </div> </td>
<td> <div class="tagbutton" id="R&B"> R&B </div> </td>
</tr> </table>
<div id="tagselected"> </div>
<form> <input type="text"> <button ="submit"> Submit </button> </form>
Here is the javascript function that I have to copy the div, however when I clicked on it the entire table is copied
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});
This code is wrong:
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});
The problem with this code is that you are retrieving all the items with class tagbutton on the whole page. If your click function is on the item you want then you should be able to just use this to access the clicked item.
so something like :
$(this).clone().insertAfter("#tagselected");
This code is not tested and is just the simple change of the initial jQuery selector.
I assume the problem you have with the hidden fields is the same - that you were selcting all tags instead of just the one you clicked so hopefully this will solve that problem too.
I'm trying to get a variable in JS code to be displayed within a DIV within a table. I've cut the code down for simplicity just trying to get this working properly.
Firebug is reporting:
document.getElementById("valuelabel") is null
Here is the code:
<table>
<tbody>
<tr>
<td>
Value:
</td>
<td>
<div id="valuelabel"></div>
</td>
</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript">
var mktValue = "12000";
document.getElementById("valuelabel").value = mktValue;
</script>
The mktValue will be a dynamically assigned numeric value; a textbox entry from another form. I just put "12000" in for testing purposes.
Within Firebug, it's shows the following for the dynamically assigned value.
var mktValue = '120700';
Thanks..
Divs don't have a "value", they do however have "innerHTML"
document.getElementById("valuelabel").innerHTML = mktValue;
div elements don't have a value (only form fields do). You can set the div's content via textContent (just text) or via innerHTML (HTML):
document.getElementById("target1").textContent = "This is normal text, <and> aren't special here.";
document.getElementById("target2").innerHTML = "This is HTML text, so <strong>tags</strong> are rendered as elements.";
<div id="target1"></div>
<div id="target2"></div>
you can use jquery to insert value into the specific id by using
$("#valuelabel").html(mktValue)