Javascript在Spotfire Webplayer中的行为有所不同

Question

I implemented some functionality where the user can filter the data using input fields and a dropdown menu.

So a user can select an item form this list (eg Last ... Days or Select Date Range) and then input the numbers/dates in input fields. The script is then used to show the corresponding input field and hide the rest. EDIT: Last week I got updated to Spotfire 7.5 from 7.0. Now this script does not work on the desktop client either....

This is what I get in the webplayer:

Any idea as to why this happens? This is my HTML:

Select Period:<span id="PeriodSelector"><SpotfireControl id="306fdd699c4346dbb7265c1d101fa6cf" /></span >
<span id="SelectBeginDate" style ="padding-left:1em;" > Select Begin Date:<SpotfireControl id="16b0eab3d5e3497bb2ecea3b051d2b62" /></span >
<span id="SelectEndDate" style = "padding-left:1em;">   Select End Date:<SpotfireControl id="46ac3d97e3b04af182b8b9d2462a7d27" /></span >
<span id="SelectDate"style = "padding-left:1em;">   Select Date:<SpotfireControl id="6838924384aa4567bc3bcf9da5a74c32" /></span >
<span id="LastXDays" style = "padding-left:1em;">   Number of Days:<SpotfireControl id="218b27e83771401dbbd75613acfd619b" /></span >

And this is my script:

$("#306fdd699c4346dbb7265c1d101fa6cf").change(function() {
    var valueText = $("#306fdd699c4346dbb7265c1d101fa6cf option:selected").text();
    if(valueText ==="Select Date"){
        $("#SelectDate").css('display','inline');
        $("#SelectBeginDate").css('display','none');
        $("#SelectEndDate").css('display','none');
        $("#LastXDays").css('display','none');
    } else if (valueText ==="Select Date Range"){
        $("#SelectDate").hide();
        $("#SelectBeginDate").css('display','inline');
        $("#SelectEndDate").css('display','inline');
        $("#LastXDays").css('display','none');
    } else if (valueText ==="Select  Last … Days"){
        $("#SelectDate").css('display','none');
        $("#SelectBeginDate").css('display','none');
        $("#SelectEndDate").css('display','none');
        $("#LastXDays").css('display','inline');
    } else {
        $("#SelectDate").css('display','none');
        $("#SelectBeginDate").css('display','none');
        $("#SelectEndDate").css('display','none');
        $("#LastXDays").css('display','none');
    }
});

It seems that the webplayer does not retrieve the value of the dropdown box, but I have no clue as to why it doesn't.

Any help is deeply appreciated.

Answer 1

So after contact with Tibco Support it seems that indeed the .change() function is not supported.

In Spotfire 7.5 the property controls are no longer implemented using the standard JavaScript input types like the select tag for instance. In 7.5 the controls are now implemented using a series of div tags instead and they do not have any "change" event to trigger on.

Manipulating controls or adding events using JavaScript/JQuery is not supported since they are subject to change. It is adviced to use JavaSript for only manipulating HTML. If a workaround is needed it is possible to create input controls and poplulate them using JS.

That being said, I did find a workaround using setInterVal(). The code is identical as my original post - except I use a hidden Calculated Value in the textfield to write the value in the document property to.

......

setInterval(
function(){
    ...........
    var valueText= document.getElementById("Hidden").textContent;
    ...........
}, 1000);

where Hidden is a span/div containing the Calculated Value. Hope this helps

Answer 2

I don't know enough about javascript to tell you WHY, but based on my testing and using this link as an example, this code may work for you:

$("#306fdd699c4346dbb7265c1d101fa6cf").change(function() {
     $("option:selected",this).text()=="Select Date"?
      $("#SelectDate).fadeIn() & $("#SelectBeginDate").fadeOut() & $("#SelectEndDate").fadeOut() & $("#LastXDays").fadeOut():
      $("option:selected",this).text()=="Select Date Range"?
       $("#SelectDate).fadeOut() & $("#SelectBeginDate").fadeIn() & $("#SelectEndDate").fadeIn() & $("#LastXDays").fadeOut():
       $("option:selected",this).text()=="Select  Last … Days"?
        $("#SelectDate).fadeOut() & $("#SelectBeginDate").fadeOut() & $("#SelectEndDate").fadeOut() & $("#LastXDays").fadeIn():
        $("#SelectDate).fadeOut() & $("#SelectBeginDate").fadeOut() & $("#SelectEndDate").fadeOut() & $("#LastXDays").fadeOut()

})