We Keep Coding

Get dynamic id attribute value from an element

I need to check if a text value is displayed into a dynamic field after expand the row.
I paste part of the code where the info is displayed. For the following code I have 10 rows in the screen with different IDs.
Post a screenshot with code, to not loose the code formatting.
Step by step of the text.
file name cypress.png
expand first row and check if the file name is displayed at attribute value for the dynamic field
If name not find in first row, expand next and check until find it.
New question:
How can I get the value attribute to compare it with the name of the file uploaded? I try to use invoke(attr, value) but it does not work.
<div class="bx--text-input__field-outer-wrapper">
<div class="bx--text-input__field-wrapper">
<input id="scenario-name-63add9a59b4cb45bc67d7bab"
type="text"
class="bx--text-input bx--form-item"
readonly=""
value="cypress1.png">
</div>
</div>
The issue is the id of the field that is dynamic.
I am able to list all the ids using the cypress code below.
//Expand all rows -** I know about multiple click but the idea is to use this block to do the loop**
cy.get('.bx--table-expand__svg')
.each(function($expand){
cy.wrap($expand).click()
})
**//Here I can list the id for each row, but I cant get the text for attribue value.**
cy.get('input[id*=scenario-]')
.each(function($scn,index,$scenarios){
cy.log($scn,index)
})
**//I try to use INVOKE, but it gets char by char e not the entire value.

//Here I can list the id for each row, but I cant get the text for attribue value.
There's a jQuery function that will do this
cy.get('input[id*=scenario-]')
.each(function($scn) {
const id = $scn.attr('id')
console.log('Exact id is: ', id)
})

Populate a div from TinyMCE content dynamically

I'm trying to get the contents from a TinyMCE textarea to populate a button/div as I type. This is to show the client how the button/div will look like when it goes live. Everything else works dynamically, such as the button/div colour, the title and dropdown.
The issue lies with dynamically retrieving the contents from TinyMCE. If I use a standard textarea box it works fine. I want the client to be able to use some of the basic features of TinyMCE.
Kind of how this form field is working. As I'm typing in this box, I can see my text updating below.
My JS is:
$(document).on('change', '#ParentID', function() {
var NTxt = $('#ParentID option:selected').text();
var NVal = document.getElementById("ParentID").value;
NTxt = NTxt.replace(/ # /g,"<br/>");
if(NVal != "0"){
if(NTxt.value != null || NTxt.value != "0" || NTxt.value != undefined){
$("#LTxt").html(NTxt);
}
}else{
$("#LTxt").html('External Link Text/Quote Text');
}
});
$(document).on('keyup', '#Opt2', function() {
$('#LTxt').text($(this).val());
});
Here are some screen grabs:
1. Normal State:
2. Populated title and dropdown "internal link" text:
3. Textarea, populating same place (WITHOUT TINYMCE):
Anyone know how I can do this with TinyMCE? I've tried...
tinymce.get('content id').getContent()
...but it didn't seem to populate dynamically.
This is the key question: How to pass anything typed into the TinyMCE textarea into the button, at the bottom, as the user is typing?
Many thanks in advance,
Glynn

You need to use a variety of events that TinyMCE triggers to know when its content has changed. You can then grab the content from the editor and do whatever you need with it.
Here is an example that shows the actual raw HTML in a neighboring DIV. It can easily be adapted to insert the HTML into an elements so its actually rendered to the page.
http://fiddle.tinymce.com/Gegaab/5
The list of available events is documented here: https://www.tinymce.com/docs/advanced/events/#editorevents
The example uses the keydown and change events in particular but there are many to choose from if those don't fit your needs.

How to check if selected text contains content control or not in word 2016 using word Javascript api

I have created a task pane for word 2016 which has two buttons such as 'addcontentcontrol' and 'retrievecontentcontrol' . Adding a content control in document works fine.When i select that content control's text and hit 'retrievecontentcontrol',it returns text. However, I want to check whether the selected text contains content control or plain text. Thanks a lot in advance.

I think you are asking about two things. If you are selecting a content control's text, and want to return the content control, then you'll want to do the following:
You'll want to check the range.parentContentControl property to check whether the selected text is within a content control. If the returned value is not null, then you may want to compare the text value of the content control and the text value of the selected range to make sure they are equivalent.
var contentControl = context.document.getSelection().parentContentControl;
But if you want to check whether some arbitrary text from a selection contains a content control, then you'll want to check the content control collection on the range.
var contentControlCollection = context.document.getSelection().contentControlCollection;

Maybe that happens because you are not loading the content control before calling context.sync()? ... try this code it must work (note that we get a GeneralException if there is no content control in the selection). Note that This sample assumes that if there is a content control it has a title on it :)
function insideOfContentControlCheck() {
Word.run(function (ctx) {
var myCC = ctx.document.getSelection().parentContentControl;
ctx.load(myCC); // I think this is the part you are missing!
return ctx.sync()
.then(function () {
console.log(myCC.title);// if there is a content control we'll show the title
});
}).catch(function (e) {
//there is no ContentControl.
console.log("Error", e.message);
});
}

jQuery not finding value in textarea

I am creating a forum but when you post a reply, jQuery keeps displaying the error that the textarea is empty when it's not.
if (post_body.val() == "") {
$("#formError").html('<font size="+2">Please type something</font>').show().fadeOut(3000);
}
Here's all the code on the page

The problem is that you have multiple tags with the attribute id="post_body".
An id needs to be unique, so remove it from all elements but your textarea.

Getting and passing parent info to hidden form

In a WordPress plugin (called postRatings) when a user presses a nested image he adds a "like" to the page. I want to pass that info to a hidden form.
So when user clicks the img (that's what triggers the plugin functionality), I want to get the serial number that is in the parent span of that image, and pass it as a value to my hidden form input.
Thing is the serial number is displayed at the end part of the parent span id name. I wrote it in the HTML code below as “XXXX”.
I am trying to get that number (only) and pass it to the value of my hidden input. I started writing the JavaScript code but don't know how to continue.
HTML:
<span id="post-ratings-XXXX" class="post-ratings">
<img class="post-ratings-image" src="1_on.gif">
</span>
<form>
<input type="hidden" id="supportedCheck" name="supportedCheck" value="#"
maxlength="19"/>
</form>
JavaScript
$('.post-ratings-image').click(function(){
$('#supportedCheck').val ......?
});

You can use the following
$('.post-ratings-image').click(function(){
$('#supportedCheck').val($(this).parent('span')[0].id.split('-')[2]);
});
Fiddle Demo

You could use following snippet:
$('.post-ratings-image').click(function () {
$('#supportedCheck').val($(this).closest('span[id]')[0].id.split('-').pop());
});

Instead of adding the serial number to the id tag, consider to add it as a data tag. This is JQuery's way of working with data through HTML tags (see docs). You can set it this way:
<span data-serial-number="XXXX" class="post-ratings">
And access it this way:
$('.post-ratings-image').click(function(){
var span = $(this).parent();
var serial = span.data('serial-number');
span.find('input:hidden').val(serial);
});