Migx memory issue

Support
1

Hi all - hope you’re surviving lockdown OK!

I have a site, which uses Migx to collate a bunch of people within different departments.
It works fine for me, but some users are getting an error on Mobile Safari saying:
“a problem repeatedly occurred on www.mysite.com”

The template on this page uses quite a few Migx calls to filter all the employees into categories. If I remove a few calls, it works fine - so I’m assuming the code is not efficient and causing the error.

This is how I’m calling them:

<h3 id="businessManagement">Business Management:</h3>
<ul class="teamList cards">
  [[getImageList? 
    &tvname=`teamMembers`
    &where=`{"team:=":"Management"}`
    &tpl=`teamBioTpl`]]
</ul>
 <h3 id="businessDevelopment">Business Development:</h3>
<ul class="teamList cards">
  [[getImageList? 
    &tvname=`teamMembers`
    &where=`{"team:=":"Business Development"}`
    &tpl=`teamBioTpl`]]
</ul>
<h3 id="enforcement">Enforcement</h3>
<ul class="teamList cards">
  [[getImageList? 
    &tvname=`teamMembers`
    &where=`{"team:=":"Enforcement"}`
    &tpl=`teamBioTpl`]]
</ul>
<h3 id="finance">Finance</h3>
<ul class="teamList cards">
  [[getImageList? 
    &tvname=`teamMembers`
    &where=`{"team:=":"Finance"}`
    &tpl=`teamBioTpl`]]
</ul>
<h3 id="hr">Human Resources &amp; Compliance</h3>
<ul class="teamList cards">
 [[getImageList? 
    &tvname=`teamMembers`
    &where=`{"team:=":"Human Resources and Compliance"}`
    &tpl=`teamBioTpl`]]
</ul>
<h3 id="litigation">Litigation &amp; Dispute Resolution</h3>
<ul class="teamList cards">
  [[getImageList? 
    &tvname=`teamMembers`
    &where=`{"team:=":"Litigation and Dispute Resolution"}`
    &tpl=`teamBioTpl`]]
</ul>
<h3 id="nonContentious">Non-contentious</h3>
<ul class="teamList cards">
  [[getImageList? 
    &tvname=`teamMembers`
    &where=`{"team:=":"Non-contentious"}`
    &tpl=`teamBioTpl`]]
</ul>
<h3 id="support">Support</h3>
<ul class="teamList cards">
  [[getImageList? 
    &tvname=`teamMembers`
    &where=`{"team:=":"Support"}`
    &tpl=`teamBioTpl`]]
</ul>

and my tpl is this:

<li>
    <img class="cardImage" src="[[+photo:pthumb=`w=300&h=420&zc=1`:default=`assets/images/team/defaultAvatar.png`]]" title="[[+firstName]] [[+lastName]]" alt="[[+firstName]] [[+lastName]]" />
    <div>
        <h4 style="margin-bottom:0;">[[+firstName]] [[+lastName]]</h4>
        <p>[[+jobTitle]]</p>
        <p class="bioTrigger">Read [[+firstName]]'s bio</p>    
    </div>
    <div class="bio">
        <img class="" src="[[+photo:pthumb=`w=300&h=420&zc=1`:default=`assets/images/team/defaultAvatar.png`]]" width="320" height="420" title="[[+firstName]] [[+lastName]]" alt="[[+firstName]] [[+lastName]]" />
        <div>
            <h4>[[+firstName]] [[+lastName]]</h4>
            <p>[[+jobTitle]]</p>
            <p><span  class="hasIcon"><i class="fas fa-phone"></i> Call: [[+telephone:default=`[[++mainTel]]`]]</span>
            [[+mob:notempty=` <span class="hasIcon"><i class="fas fa-mobile"></i> Mob: [[+mob]]</span>`]]
            <span class="hasIcon"><i class="fas fa-envelope"></i> <a href="mailto:[[+email]]">Email [[+firstName]]</a></span></p>
            [[+text]]
        </div>
    <span class="close">close</span>
    </div>
</li>

Any ideas on how to make this more efficient/less memory intensive?
Would it be better to have multiple Migx TVs in the backend (one for each category), rather than one which is filtered on each call?

Thanks in advance!!
Andy

2

I think maybe the ‘&where’ is creating too much work for some browsers to handle?
Strangely, it’s on newer iPhones that are struggling to view the page!

3

may I ask, how many items you have all in all?
I think, this is not a server-side issue and since you have every calls cached, it shouldn’t make any difference, how you have stored all of that (only at first request after the cache was cleared)

4

the where is handled server-side, so doesn’t have anything todo with the browsers

5

Hi Bruno - thanks for your message.

There are 33 items being called.
I just tried calling them all in a single call without a ‘&where’ like this:


    [[getImageList?
    &tvname=teamMembers
    &tpl=teamBioTpl]]

But it’s still not working. so it’s nothing to do with the individual &where clauses.

6

must be something with the html - markup ore some javascript.
Try to copy the generated source-code and put it into a html - file.
And visit that html-file directly with your browsers.

7

Aha - good idea. hadn’t thought of that.
Will do that now.

Thanks for the steer!

Will report back
Andy

8

Just done that - and the issue remains, so as you said, it must be an issue in the html somewhere - and not a modx issue.

I’ll scour the code for anomolies!

Thanks!
Andy

9

HI there - so, I played around deleting content, until the error stopped.
When I unlinked the css file - the error stopped. so I went through the CSS file commenting out all of it, and then adding sections back in until i could replicate the issue - I managed to get it down to a single css selector in a class - and it’s the most bizarre thing ever…

It was { background:#333; }

I couldn’t believe my eyes, so I tried adding it back in - the error reoccured.
I tried adding the style as an inline style - it still occurred!
removed it - the problem went away.

As a work around I added the style to a pseudo element - not ideal, but it worked - no more errors.

Have you EVER come across a background colour of a div causing a page to crash??

Andy