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.

book

Article ID: KB0076737

calendar_today

Updated On:

Products Versions
Spotfire Analyst All Versions

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.
 

Issue/Introduction

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

Resolution

Consider the following sample HTML.

    <!-- Input -->
    <p><SpotfireControl id="23ed572641844696af84ed1e0721a2c7" /></p>
    <!-- Label -->
    <p><SpotfireControl id="c16bb15d571f4cba897c033ef44a5c5a" /></p>
    <!-- Dropdown -->
    <p><SpotfireControl id="c3dace8ed60e47b2a0b6d59cc6c5d021" /></p>
    <!-- ListBox -->
    <p><SpotfireControl id="202f94483ee142a6b604c25d452b221a" /></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"><SpotfireControl id="63370b89863146a2b2cde4a3e2db74ae" /> </div>
    <div id="labelWrapper"><SpotfireControl id="f9f5274f68d740c8a441075be38f70a5" /></div>
    <div id="dropDownWrapper"><SpotfireControl id="e2329c55dbc746b0b1c878cd591cafb2" /></div>


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 = $("#dropDownInput .ComboBoxTextDivContainer div").text()
    alert('Drop down >> ' + dropdownVal)

Additional Information

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