JavaScript is not getting retained on tab change

JavaScript is not getting retained on tab change

  

I have a JavaScript in my application which highlights a row and fetches its value for further navigation. It is implemented in all the dashboards (5 in total). Despite no difference in implementation it is not working in 2 of the tabs. On debugging the script in console i can see no difference either. Any ideas why the JavaScript shows such an ambiguous behavior? 

Hi Mishika,

Could you provide a few more details? The oml would be great.

Otherwise we are left wondering if you are implementing a mobile or a web app and what kind of javascript code are you doing that shows such an ambiguous behavior.

Cheers,

José

Hi 

I have the following JavaScript implemented in of my web application which disables two of the buttons and provides highlighting functionality. The script is written in the screen, which in turn has blocks for each tab. The tabs have LoadOnclick set to true and each block's preparations uses the RunJavaScript action to call the highlight_row function.


  
function highlight_row() {
$(document).ready(function(){
debugger;

    $('.TableRecords tbody').on( 'click', 'tr', function () 
    
    {
        if ( $(this).hasClass('highlight') ) {
            $(this).removeClass('highlight');
            var value = "";
            $("input[id*='Hiddentextbox']").val(value);
            $('.viewoppo').attr('disabled','disabled'); 
            $('.viewitem').attr('disabled','disabled'); 
        }
        else {
            $('.TableRecords tr.highlight').removeClass('highlight');
            $(this).addClass('highlight');
            var value = $(this).children('td:first').text();
            $("input[id*='Hiddentextbox']").val(value);
            $('.viewoppo').removeAttr('disabled');
            $('.viewitem').removeAttr('disabled');
        }
    } );
 })
 }
 

Hi Mishika,

I'm not sure exactly what "input[id*='...']") does, but keep in mind that Ids of Widgets aren't stable: they are partially randomly generated each time the screen refreshes.

Hi 

I have provided the id of the element in the extended properties. That remains constant, right? 

Hi Mishika,

You shouldn't change the id in the extended properties, as the Platform depends on the auto-generated ids in many circumstances (for example each duplicated Widget inside a Table Records row needs a unique id). What you should do, if at all possible, is to add the JavaScript as an unescaped Expression on the Web Screen, and use Widget.Id to refer to the element's id.

Mishika Bharadwaj wrote:

Hi 

I have the following JavaScript implemented in of my web application which disables two of the buttons and provides highlighting functionality. The script is written in the screen, which in turn has blocks for each tab. The tabs have LoadOnclick set to true and each block's preparations uses the RunJavaScript action to call the highlight_row function.


  
function highlight_row() {
$(document).ready(function(){
debugger;

    $('.TableRecords tbody').on( 'click', 'tr', function () 
    
    {
        if ( $(this).hasClass('highlight') ) {
            $(this).removeClass('highlight');
            var value = "";
            $("input[id*='Hiddentextbox']").val(value);
            $('.viewoppo').attr('disabled','disabled'); 
            $('.viewitem').attr('disabled','disabled'); 
        }
        else {
            $('.TableRecords tr.highlight').removeClass('highlight');
            $(this).addClass('highlight');
            var value = $(this).children('td:first').text();
            $("input[id*='Hiddentextbox']").val(value);
            $('.viewoppo').removeAttr('disabled');
            $('.viewitem').removeAttr('disabled');
        }
    } );
 })
 }
 

Hi Mishika,

Instead of id try with class or any other attribute because in Outsystems id's are generated at runtime.

for example in extended property define a name attribute with some name(Hiddentextbox) and replace js code like below.

input[name*='Hiddentextbox']

Regards,

Pankaj Pant