I'm working on a Business Catalyst site (Adobe). I need to insert a placeholder div after each row of items which another script later appends info to. This is working fine on most browsers but does nothing on IE 11.

The script looks for the last item in a row to insertAfter, ie. rows contain 4 items but if the last row only has 1 or 2 it inserts it after the last one.

I was using Jquery 1.1 but just switched to 1.7 and it seems to make no difference.

My markup:

<div class="roller col-md-3" id="roller001">
<div class="roller-type">
<div class="roller-image">
{tag_small image_nolink}
</div>
<a class="roller-btn" onclick="appendRoller{tag_itemid}('{tag_itemid}')" href="javascript:void(0);">{tag_name_nolink}</a>
</div>
</div>

<div class="roller col-md-3" id="roller002">
<div class="roller-type">
<div class="roller-image">
{tag_small image_nolink}
</div>
<a class="roller-btn" onclick="appendRoller{tag_itemid}('{tag_itemid}')" href="javascript:void(0);">{tag_name_nolink}</a>
</div>
</div>

Script:

<script type="text/javascript">
$(document).ready(function(){
var rollerItems = document.getElementsByClassName('roller');

    for (n=0; n<rollerItems.length; n++) {
        if(n%4 == 0) {
            var rowEnd = rollerItems[n];            
            if(document.contains(rollerItems[n+1])) { rowEnd = rollerItems[n+1]; }
            if(document.contains(rollerItems[n+2])) { rowEnd = rollerItems[n+2]; }
            if(document.contains(rollerItems[n+3])) { rowEnd = rollerItems[n+3]; }
            $('<div class="popup-row"></div>').insertAfter(rowEnd);
            }
        }

});
</script>

I'm working on a Business Catalyst site (Adobe). I need to insert a placeholder div after each row of items which another script later appends info to. This is working fine on most browsers but does nothing on IE 11.

The script looks for the last item in a row to insertAfter, ie. rows contain 4 items but if the last row only has 1 or 2 it inserts it after the last one.

I was using Jquery 1.1 but just switched to 1.7 and it seems to make no difference.

My markup:

<div class="roller col-md-3" id="roller001">
<div class="roller-type">
<div class="roller-image">
{tag_small image_nolink}
</div>
<a class="roller-btn" onclick="appendRoller{tag_itemid}('{tag_itemid}')" href="javascript:void(0);">{tag_name_nolink}</a>
</div>
</div>

<div class="roller col-md-3" id="roller002">
<div class="roller-type">
<div class="roller-image">
{tag_small image_nolink}
</div>
<a class="roller-btn" onclick="appendRoller{tag_itemid}('{tag_itemid}')" href="javascript:void(0);">{tag_name_nolink}</a>
</div>
</div>

Script:

<script type="text/javascript">
$(document).ready(function(){
var rollerItems = document.getElementsByClassName('roller');

    for (n=0; n<rollerItems.length; n++) {
        if(n%4 == 0) {
            var rowEnd = rollerItems[n];            
            if(document.contains(rollerItems[n+1])) { rowEnd = rollerItems[n+1]; }
            if(document.contains(rollerItems[n+2])) { rowEnd = rollerItems[n+2]; }
            if(document.contains(rollerItems[n+3])) { rowEnd = rollerItems[n+3]; }
            $('<div class="popup-row"></div>').insertAfter(rowEnd);
            }
        }

});
</script>

• javascript
• jquery

• Since rollerItems are retrieved from the document, why would you need to check document.contains? Wouldn't that be tautology? You can simply check if n+1 >= rollerItems.length – slebetman Commented Aug 3, 2016 at 2:36
• Good point. My thinking was I need the first item on a row to trigger the insertAfter but then need to check if more items exist in that row before it inserts the div but yes I think your way is better. – A.Fellows WVC Commented Aug 3, 2016 at 2:52
• I'm considering leaving this solution anyway since I couldn't find anything on the document.contains problem with IE on stack overflow... – A.Fellows WVC Commented Aug 3, 2016 at 3:00

1 Answer 1

I've realised the problem was not with the 'insertAfter' mand at all but with 'document.contains'. Apparently IE does not regard 'document' as a node and I needed to use 'document.body.contains' to determine items at the end of the row.

Eg.

if(document.body.contains(rollerItems[n+1])) { rowEnd = rollerItems[n+1]; }

Went through everything line by line but glossed over that! Not sure if this is the best solution but it works now at least.