Output of regions problem

[psy]

I've configured my PW site to use regions and mostly it's fabulous. However I encountered a strange problem when appending scripts to the body tag of a template. The body tag id is "bodyTag" (duh!).

There are 3 scripts - two external and one inline. My first attempt was to append each script individually thinking they'd appear in the same order on the output:

<script id="googlemapskey" type="text/javascript" src="https://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXX" pw-append="bodyTag"></script>
<script id="localMapsJS" type="text/javascript" src="<?=$bootstrap?>js/jquery.gmap.js" pw-append="bodyTag"></script>

<script type="text/javascript" pw-append="bodyTag">
     jQuery(document).ready(function($){
         ...
     });
 </script>

Not so! Got lots of js errors and discovered the output had placed the scripts in the incorrect order, ie:

<script type="text/javascript" pw-append="bodyTag">
     jQuery(document).ready(function($){
         ...
     });
 </script>
<script id="localMapsJS" type="text/javascript" src="/site/assets/mytheme/js/jquery.gmap.js"></script>
<script id="googlemapskey" type="text/javascript" src="https://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXX"></script>

In other places I've appended multiple HTML regions to the same tag and it's worked fine. It only happens with scripts.

After trying a few things, I discovered a workaround which was to wrap all the scripts into one div which is then appended to the body tag. This is OK but not ideal. I think (?), the partial is rendered in its entirety before being appended to the body tag:

<div pw-append="bodyTag">
    <script id="googlemapskey" type="text/javascript" src="https://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXX"></script>
    <script id="localMapsJS" type="text/javascript" src="<?=$bootstrap?>js/jquery.gmap.js"></script>

    <script type="text/javascript" pw-append="bodyTag">
         jQuery(document).ready(function($){
             ...
         });
     </script>
</div>

Curious to know where I went wrong in the first example with each script appended individually or is this behaviour with scripts an undocumented feature of regions?

Using PW 3.0.61 with both Chrome and Firefox

[Robin S]

6 hours ago, psy said:

Not so! Got lots of js errors and discovered the output had placed the scripts in the incorrect order

I tested this with your scripts and body ID and the correct order was maintained, so not sure why that's not the case for you.

If you prepend a series of elements then the order will be reversed (because they will each be added as the first child element of the parent, one by one in order from top to bottom). But appending elements should maintain the order.

My preference is to use <region> (or <pw-region>) tags for scripts and stylesheets. The idea being you place empty <region></region> elements in your _main.php at the place where you may want to add extra scripts or stylesheets from your templates. Then you can add multiple scripts in a single replacement without an unneeded container div appearing in your final markup.

[psy]

21 minutes ago, Robin S said:

My preference is to use <region> (or <pw-region>) tags for scripts and stylesheets.

Thanks Robin, forgot about the <region> tag. Good call!

[psy]

Strangely, the odd order of the pw-append method was definitely repeatable for me. Even with the scripts in the correct order I was still having issues with js errors.

The <region> tag works ONLY if I have ProCache turned on to combine & minify scripts. Guessing the same would apply to All-In-One-Minify or similar modules. At least in my case, inline scripts execute too quickly unless the preceding scripts are forced to be loaded beforehand.

Lesson learned and all good