Skip to main content

Pre-Check Input Check Box List in a changing list?

Comments

5 comments

  • Martin Rees

    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 treat

    0
  • Glyn McKenna

    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
  • Johnny Stevens

    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,
    Johnny

    0
  • Glyn McKenna

    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
  • Glyn McKenna

    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.