0

I use the Modern Script Web Part to inject JavaScript into my site. I want to modify div elements by className with JavaScript. The script is running on my local PC but when I try to run it in SharePoint it doesn't work.

I want to disappear all div where a "#" is inside. But in SharePoint I don't get any element. But I can see the div elements in the source code of the page.

<script language="JavaScript">
window.onload = function() {
var myElements = document.getElementsByClassName('pnp-persona');
alert(myElements.length);
for(var i=0; i<myElements.length; i++){
    if (myElements[i].innerHTML.indexOf("#")!==-1) {
    document.getElementsByClassName('pnp-persona')[i].style.display='none';
    }
}
}

This is like something I have in a Web Part as HTML structure:

<div class="pnpRefinersTemplatePersona_9c35c9d6">
  <div>
    <div class="ms-Persona ms-Persona--size40 pnp-persona root-245">
      <div class="ms-Persona-coin ms-Persona--size40 coin-252">
        <div class="ms-Persona-imageArea imageArea-254">
          <div class="ms-Persona-initials initials-257" aria-hidden="true">
            <span>T</span>
          </div>
        </div>
      </div>
      <div class="ms-Persona-details details-246">
        <div dir="auto" class="ms-Persona-primaryText primaryText-247">
          <div class="ms-TooltipHost root-260">;#Test;# (1)</div>
        </div>
        <div
          dir="auto"
          class="ms-Persona-secondaryText secondaryText-248"
        ></div>
        <div dir="auto" class="ms-Persona-tertiaryText tertiaryText-249"></div>
        <div dir="auto" class="ms-Persona-optionalText optionalText-250"></div>
      </div>
    </div>
    <div class="ms-Persona ms-Persona--size40 pnp-persona root-245">
      <div class="ms-Persona-coin ms-Persona--size40 coin-252">
        <div class="ms-Persona-imageArea imageArea-254">
          <div class="ms-Persona-initials initials-270" aria-hidden="true">
            <span>E</span>
          </div>
        </div>
      </div>
      <div class="ms-Persona-details details-246">
        <div dir="auto" class="ms-Persona-primaryText primaryText-247">
          <div class="ms-TooltipHost root-260">Test</div>
        </div>
        <div
          dir="auto"
          class="ms-Persona-secondaryText secondaryText-248"
        ></div>
        <div dir="auto" class="ms-Persona-tertiaryText tertiaryText-249"></div>
        <div dir="auto" class="ms-Persona-optionalText optionalText-250"></div>
      </div>
    </div>
    <div class="ms-Persona ms-Persona--size40 pnp-persona root-245">
      <div class="ms-Persona-coin ms-Persona--size40 coin-252">
        <div class="ms-Persona-imageArea imageArea-254">
          <div class="ms-Persona-initials initials-271" aria-hidden="true">
            <span>CI</span>
          </div>
        </div>
      </div>
      <div class="ms-Persona-details details-246">
        <div dir="auto" class="ms-Persona-primaryText primaryText-247">
          <div class="ms-TooltipHost root-260">Test</div>
        </div>
        <div
          dir="auto"
          class="ms-Persona-secondaryText secondaryText-248"
        ></div>
        <div dir="auto" class="ms-Persona-tertiaryText tertiaryText-249"></div>
        <div dir="auto" class="ms-Persona-optionalText optionalText-250"></div>
      </div>
    </div>
  </div>
</div>

2 Answers 2

0

I tried your script it's working fine. I see only ending script tag is missing in the above code. Not sure if you have missed it in SharePoint site page. did you try in different browser and see.

If this is not the case, share sample div blocks how they look from view source.

<h1>hello world!</h1>
<div class="pnp-persona">hello ## world</div>
<script language="JavaScript">
window.onload = function() {
var myElements = document.getElementsByClassName('pnp-persona');
alert(myElements.length);
for(var i=0; i<myElements.length; i++){
    if (myElements[i].innerHTML.indexOf("#")!==-1) {
    document.getElementsByClassName('pnp-persona')[i].style.display='none';
    }
}
}</script>

I tried with jQuery, you can give a try.

<script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".pnp-persona").each(function(){
            if($(this).text().match('#')) {
                $(this).hide();
            };
           });

});
</script>
5
  • I added a HTML code snippert to see how it is structured
    – Christoph
    Sep 3, 2021 at 10:47
  • I replaced html code blocks into my script. It's working fine, hiding that div tags correctly. for testing, I removed window.open and is doing fine(you might need it if want to load all the stuff on the page). I see code block is working fine. Sep 3, 2021 at 11:29
  • If I try it with exactly this script on my local PC it is working fine, but not in SharePoint. I had a look in the whole source code of my SharePoint site and I find the html structure above as well as my JavaScript. But it isn't working :-(
    – Christoph
    Sep 3, 2021 at 12:37
  • Try with jQuery, while you try to get fix for that. I have updated my answer with jQuery snippet. Sep 3, 2021 at 13:39
  • It is not working as well. I think SharePoint do not accept this kind of code or the the div "pnp-persona" are not really available.
    – Christoph
    Sep 9, 2021 at 11:10
0

I found out that SharePoint Online use TypeScript strictly. It must be defined each variable before with a type like this:

var myElements: any;
var countElements: any;
var myElement: any;
var i: number;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.