Pre-Check Input Check Box List in a changing list?
Good afternoon,
I have an input list checkbox which is populated from a RestAPI. The values displayed will change depending on what option has been selected in a preceding select list.
Ideally I would like to have ALL options checked when first loaded. I've tried adding a default values element with a data source which is the same as the data source for the input list. This works on the first load of the page, however when the parent select list is changed, the check list updates as expected, but the items aren't set as checked. Debugger suggests that the default values datalayer does not get refreshed as part its parent?
Is there anyway I can get a dynamically populated check list to have all items checked (maybe some automatic triggering of the "Check All" function?)
TIA
Martin
-
Ah - I think i've got it. I added a bit of JS to the Post Refresh JS attribute of the Refresh Element:
document.getElementById("inpMyCheckList_check_all").click();
Seems to work a treat0 -
Hi Martin, great to hear you found the solution to the problem. I'd just like to add some context to why that works, in case anyone else comes along and wonders why it's the case.
We often add event listeners or inline JavaScript to affect a page's DOM somehow on the client-side. So for example if we have a window.load event listener and run some JavaScript when the load event fires, that piece of JavaScript will make the update tasks it's been written to perform and will not run again until the page is reloaded.
When we perform an Action.Refresh, we're actually performing an Ajax refresh. This destroys only the element that we targeted and goes back to the server, where it runs some server-side code and rebuilds that specific piece of the DOM. Because the DOM is a tree structure, only the branch that you destroy and all of its child branches are replaced. Therefore if there's any JavaScript that is normally called higher up in the tree structure, or on a different sibling branch, it will not be re-run, because there is nothing to call it again and the newly built piece of DOM structure sent back from the server is unaffected.
What we do to resolve this is to create event listeners or callback functions that allow us to run additional JavaScript code when the Ajax request is finished. This is essentially what our Post Refresh JS is doing for us allowing us to run that piece of JavaScript that normally only runs on our page load.
For reference we can also setup an Action.Refresh listener which could, for example, allow us to setup a global listener on page load that will trigger for all Action.Refresh calls on the page once they have completed:
Y.on('domready', function() {
if ( LogiXML.Ajax.AjaxTarget ) {
LogiXML.Ajax.AjaxTarget().on( 'reinitialize', function() {
//GM - Add conditional functions here
console.log('Ajax refresh completed - running page initialisation code');
init();
});
}
});0 -
Hey Glyn,
I have another use case for this 'listener' but I can't get it working. We are using a FancyTree.js implementation of a hierarchical data structure, with lazy loading (so that branches don't have to load until the user clicks a UI element to expand the branch). The values load into span elements with a default class of .fancytree-title.
I've been asked to apply additional styling for specific branch nodes (ultimately, if the text in the span contains "Inactive", but I'm testing with "01" since it is easy for me to find and test right now.
My IncludeScript works for the initial page load as follows:
$(document).ready(function(){
$('span.fancytree-title:contains("01")').addClass('fancytree-title-inactive')});My initial values are:
* 01 Arteriography
* 02 Arterial Int
etc...And if I expand * 02... I see
* 02.01 PTA General Artery
* 02.02 Atherectomy
etc...So 01 Arteriography has its class modified on page load, but 02.01 does not.
Additionally, when a user selects 01 Arteriography, it is moved into a tag/pill list and loses its class modifications.I need to be able to 'listen' to the page for lazy load and other changes to spans with and re-apply the addClass for each refresh. How do I accomplish this in a listener like you have indicated above?
Regards,
Johnny0 -
Hi Johnny,
You would add the listener just beneath or above the existing page load scripts you're running.
It would look something like this:
$(document).ready(function(){
$('span.fancytree-title:contains("01")').addClass('fancytree-title-inactive');
Y.on('domready', function() {
if ( LogiXML.Ajax.AjaxTarget ) {
LogiXML.Ajax.AjaxTarget().on( 'reinitialize', function() {
//GM - Add conditional functions here
$('span.fancytree-title:contains("01")').addClass('fancytree-title-inactive');
});
}
});
}
);0 -
Hi Johnny,
As the FancyTree lazy load is not performing a refresh when a branch is expanded, I think we can just add the fancytreeexpand event to your document ready calls e.g.
$(document).ready(function(){
$('span.fancytree-title:contains("01")').addClass('fancytree-title-inactive');
$("#tree").on("fancytreeexpand", function(event, data){
$('span.fancytree-title:contains("01")').addClass('fancytree-title-inactive');
});
});0
Please sign in to leave a comment.
Comments
5 comments