OnChange event handler
Hi everyone,
I have a multi checkbox list with an onchange DHTML event which refreshes a chart. it works fine if i only select one item from the checkbox list but where i select multiple the onchange event fires multiple times... is it possible to have the onchange event only fire where a user closes the dropdown checkbox list?! So a user could tick multiple boxes and nothing happens... but then closes the dropdown and it refreshes the chart. I've tried other DHTML events to no avail.
Thanks!
-
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
var blocker = document.querySelector( '#inpColors' );
var el = 'divReport';
// Our mutation observer, which we attach to blocker later
var observer = new MutationObserver( function( mutations ){
 mutations.forEach( function( mutation ){
 // 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'?
 if( mutation.attributeName === 'style' && window.getComputedStyle( blocker ).getPropertyValue( 'display' ) == 'none'
 ){
 console.log('closed');
 rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&rdRefreshElementID='+ el +'&rdReport=@Request.rdReport~','false','',null,null,null,null,true);
 }
 } );
} );

// Attach the mutation observer to blocker, and only when attribute values change
observer.observe( blocker, { attributes: true } );

" />
</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 -
Thank you so much for this, it works really well and allows me to use it with cascading parameters also (refreshing multiple divs)
0 -
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.
Comments
3 comments