Forum

Thread tagged as: Question, Problem

Traversing the DOM

On the edit page I created a divider. With jQuery I wanted to collapse the divider when the text contains 'collapse-'. Building on the solution in this thread

First add the class to the H2 element that will have a class='divider-collapsed' added. This works.

<script> 
$(document).ready(function() 
{  
    $metaDivider = $('.divider:contains("collapse-")');
    if ($metaDivider.length) 
    { 
        $metaDivider.addClass('divider-collapsed');
        /* next line not working because the next sibling is an <div class='field-wrap'> */
        /* instead of the expected <div class='divider-collapse-zone'> */
        $metaDivider.next().css('display','none');       
    }  
}); 
</script>

The "display:none" addition to the next sibling in the Dom (which inspect-elements says its 'divider-collapse-zone') is not being appended to <div class='divider-collapse-zone'> because according to jQuery it doesn't (yet) seem to be there. The surrounding 'divider-collapse-zone' elements are created in a javascript file which starts with an '8.'.

The addition of (document).ready also doesn't seem to help.

Questions: 1. Am I doing something wrong here? I thought my script already came last in row. 2. How can I step through the Dom after the Perch code has added its extra elements?

Thnks! René
René Banus

René Banus 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

Try:

$(window).on('Perch_Init_Editors', function(){
    yourCode();
});
René Banus

René Banus 0 points

3 years ago

I tried to make it work, but the on('Perch_Init_Editors', function(){}) never fires. I tried some other events I found in the code, but no joy. I also tried debugging, to see what process would start the code to insert the <div class='divider-collapse-zone'> but I couldn't find it. I have seen while debugging, that my code (in perch/addons/plugins/ui/_config.inc) is running before the insertion of the 'divider-collapse-zone' div.

Hope you can help me further along. Thx, René

These examples were not fired on my site when put between <script> tags in perch/addons/plugins/ui/_config.inc

    $(window).on('Perch_Init_Editors', function(){
        window.alert('It fires');
    });

and:

    $(window).on('Perch_Init_Editors_Post', function(){
        window.alert('It fires');
    });

and:

    $(window).on('Perch.FieldTypes.redraw', function(){
        window.alert('It fires');
    });

thx, René
René Banus

René Banus 0 points

3 years ago

I have spend a whole day on this, and can't get the script to react to the Perch_Init_Editors event. I would like to know why.

My solution is now to wait a bit before I execute my code. Awful I know, but the only way I good get it to work. Hopefully someone has a better solution.

<script> 

// TODO:
// Only hide empty field, not filled ones. So don't execute if values are present in the input boxes.   

$(document).ready(function(){
    // Finding the elements with an attribute divider-before staring with "collapse|"
    $metaDivider = $('.divider:contains("collapse|")');
    if ($metaDivider.length)
    { 
        // this timeout is awfull, but the only way I could force to do the edit after
        // the Perch_Init_Editors call.  
        // (I assume it is the Event which adds the div around the elements between dividers)
        setTimeout(
            function(){ 
                // Add the perch class which changes the arrow SVG -and-
                //  set the next() div to display:none, just like the standard behaviour
                // Without the setTimeout, the .next() will only select (and hide) 
                //  the first element inside the divider 
                $metaDivider.addClass('divider-collapsed').next().css('display', 'none');
                // Remove the keyword 'collapse|' from the text on screen
                var newHTML = $('div', $metaDivider).html().replace('collapse|', '');
                $('div', $metaDivider).html(newHTML)  ;          
            }, 100);  
    }  
});
</script>

thx, René