How to access Text Area Document Property control values using Java Script/JQuery.

How to access Text Area Document Property control values using Java Script/JQuery.

Description: It is often required to be able to access Document property Control values (Input/drop-down/List-box, etc.) that are part of the Text Area from the JavaScript/JQuery associated with any given HTML Text Area. Since the JavaScript that has been added to the HTML Text Area is a client-side programming language, it does not have access to the Spotfire Document model framework. Use the approach described in the following example to fetch the values.

Resolution: Consider the following sample HTML.

<!-- Input -->

<!-- Label -->
<p><!-- Dropdown -->
<p><!-- ListBox -->
<p>The following is how to access the values from each of the controls.

//For an input:

var inputVal = $("#23ed572641844696af84ed1e0721a2c7")[0].value

//alert('Input >> ' + inputVal)

//For Label

var labelVal = $("#c16bb15d571f4cba897c033ef44a5c5a").text()

//alert('Label >> ' + labelVal)

//For Drop down

var dropdownVal = $("#c3dace8ed60e47b2a0b6d59cc6c5d021 :selected").text()

alert('Drop down >> ' + dropdownVal)

//For List Box

var listBoxVal = $("#202f94483ee142a6b604c25d452b221a :selected").text()

alert('List Box >> ' + listBoxVal)

It is recommended to wrap your property controls with an element, e.g., a div with id='inputWrapper' . You can then get its value. This is because your property control ID may change (mostly in Web Player).

Sample HTML with div wrapper:

<div id="inputWrapper"> <div id="labelWrapper"><div id="dropDownWrapper">Accessing the values from controls with the wrapper id:

//For an input:

var inputVal = $("#inputWrapper > input").first().val()

//alert('Input >> ' + inputVal)

//For Label:

var labelVal = $("#labelWrapper").text()

//alert('Label >> ' + labelVal)

//Drop down

var dropdownVal = $("#dropDownWrapper >> option:selected").text()

alert('Drop down >> ' + dropdownVal)

Reference: https://api.jquery.com/category/selectors/

Keywords: Document Property in JavaScript, JQuery