Protect content with mams_protect problem with javascript

[babel]

I'm using cms 2.2.15 and MAMS 1.0. I have about five graphs and each graph is for a different person. That's why I want the graph only to show that person and hide the other four.
The code is:
<div class="grafiekWrap">

{mams_protect groups='groep_1'}
<div class="grafiek">
<h3>Naam 1</h3>
<canvas id="polarChart1"></canvas>
</div><!--grafiek-->
{/mams_protect}


{mams_protect groups='groep_2'}
<div class="grafiek">
<h3>Naam 2</h3>
<canvas id="polarChart2"></canvas>
</div><!--grafiek-->
{/mams_protect}

<div class="grafiek">
<h3>Naam 3</h3>
<canvas id="polarChart3"></canvas>
</div><!--grafiek-->
<div class="grafiek">
<h3>Naam 4</h3>
<canvas id="polarChart4"></canvas>
</div><!--grafiek-->
<div class="grafiek">
<h3>Naam 5</h3>
<canvas id="polarChart5"></canvas>
</div><!--grafiek-->

</div><!--grafiekWrap-->

I'm using Chart.js to proces the graph and using json to retrieve the data for the graph from an html-table. The problem is that if I protect each graph for a specific group, I get five empty canvas.
If I protect one graph with {mams_protect} alle graphs are shown. So there is no protection.
The {mams_protect} works if the whole <div class="grafiekWrap"> is protected. But as I try to explain, I'm looking for protection for each graph for a different person.
I would be nice if someone knows the solution.

[DIGI3]

I would probably add the javascript call to populate the div inside the mams_protect tags. It's easiest if you're using CMSMSExt (or CGExtensions if you haven't switched yet - code below is for CMSMSExt) and have the js rendering set up. You could do something like:

Code: Select all

{mams_protect groups='groep_1'}
  <div class="grafiek">
    <h3>Naam 1</h3>
    <canvas id="polarChart1"></canvas>
  </div><!--grafiek-->
  {xtjs_add}
    javascript to add chart to this div here
  {/xgjs_add}
{/mams_protect}

in your master page template you need to have {xtjs_render}, see the CMSMSExt documentation for more.

[babel]

Thanks DIGI3 for your answer. If I get it to work is at the moment a mystery for me.

[velden]

Would it be an idea to start with a simple test?

E,g,:
1. Just protect a div with some sample text with a single mams_protect tag
2. Protect two divs with two mams_protect tags, each for a different group

In that case you're keeping the complexity of canvas and JS out of the equation.

If those tests are successful add the canvases. Then add the js. Until stuff breaks. Then you know where things are going wrong and you can post both the working code (just before it breaks) and the non-working code.

[babel]

Thanks velden, I have followed the first two steps. I'll do the next.

[babel]

The problem is that if one canvas is protected all works well. But as soon I want to protect another canvas no graph show up. It seems it's not possible to protect each canvas for a different group. At least, I can't find the solution. If I follow DIGI3 I don't get what I want. It would be a pity if I had to give every graph it's own template. My hope is there is something to make it work.

[Jo Morg]

OK so I just tested MAMS {mams_protect} block plugin and it works as expected even with multiple uses on the same page for different user groups. This leads me to conclude there is an issue with the JS logic that is breaking your code. In addition to all the suggested tests I would do some more simple tests with the javascript and pure static HTML even outside the CMSMS environment: as {mams_protect} just hides HTML from specific groups, your javascript code would have to work without MAMS, just by selectively deleting the blocks you don't want to show. If that works statically it has to work dynamically inside the CMSMS/MAMS environment. My tests show that MAMS is working as advertised so there must be something else breaking.

[babel]

It works if I put the javacript between <__script__></__script> tags