Skip to main content

OnChange event handler

Comments

3 comments

  • VISUI

    You could perform a mutation observer on the InputCheckboxList's dropdown to see when the style changes back to "display: none", then perform the Ajax Refresh.

    This example utilizes and onload event on a transparent image "ApplicationCommon.images.blank.png" so that if the div-inpColors is refreshed, the mutation is again applied to the inpColors input.  This example will not work until you change the reference for the image to one that exists in your application.

    <Report ID="LogiForum.InputCheckboxList">
      <IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js" />
      <Body>
        <Division ID="div-inpColors">
          <InputCheckboxList ID="inpColors" OptionCaptionColumn="Name" OptionValueColumn="Value" DefaultValue="@Request.inpColors~" CheckboxListDropdown="True">
            <DataLayer Type="Static">
              <StaticDataRow Name="Red" Value="1" />
              <StaticDataRow Name="Orange" Value="2" />
              <StaticDataRow Name="Yellow" Value="3" />
              <StaticDataRow Name="Green" Value="4" />
              <StaticDataRow Name="Blue" Value="5" />
            </DataLayer>
          </InputCheckboxList>
          <Image Caption="ApplicationCommon.images.blank.png">
            <EventHandler DhtmlEvent="onload">
              <Action Type="Javascript" Javascript="// Blocker is the element that has a changing display value&#xD;&#xA;var blocker  = document.querySelector( '#inpColors' );&#xD;&#xA;var el = 'divReport';&#xD;&#xA;// Our mutation observer, which we attach to blocker later&#xD;&#xA;var observer = new MutationObserver( function( mutations ){&#xD;&#xA;    mutations.forEach( function( mutation ){&#xD;&#xA;        // Was it the style attribute that changed? (Maybe a classname or other attribute change could do this too? You might want to remove the attribute condition) Is display set to 'none'?&#xD;&#xA;        if( mutation.attributeName === 'style' &amp;&amp; window.getComputedStyle( blocker ).getPropertyValue( 'display' ) == 'none'&#xD;&#xA;          ){&#xD;&#xA;            console.log('closed');&#xD;&#xA;            rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&amp;rdRefreshElementID='+ el +'&amp;rdReport=@Request.rdReport~','false','',null,null,null,null,true);&#xD;&#xA;        }&#xD;&#xA;    } );&#xD;&#xA;} );&#xD;&#xA;&#xD;&#xA;// Attach the mutation observer to blocker, and only when attribute values change&#xD;&#xA;observer.observe( blocker, { attributes: true } );&#xD;&#xA;&#xD;&#xA;" />
            </EventHandler>
          </Image>
        </Division>
        <LineBreak LineCount="20" />
        <Division ID="divReport" HtmlDiv="True">
          <Label Caption="Time:  @Function.DateTime~" />
          <LineBreak LineCount="2" />
          <Label Caption="inpColors:  @Request.inpColors~" />
        </Division>
      </Body>
      <ideTestParams inpColors="" />
    </Report>
    1
  • Andrew Gray

    Thank you so much for this, it works really well and allows me to use it with cascading parameters also (refreshing multiple divs)

    0
  • VISUI

    This is really something that Logi should have built in with the InputCheckboxList.  

    Glad the solution works.  Mutation Observers are extremely helpful.

    1

Please sign in to leave a comment.