SPFx - JavaScript function not firing

Question

I have a slide component assembled on my render() method in my web part, it is displayed fine but the Javascript action "ShowSlide()" necessary to activate the slide is not being fired inside the $().ready()

I've placed the call inside the

public render(): void {  
  this.domElement.innerHTML = `
      <!-- build the slide here -->
      <div>
         <ul>
            .....
            ..... shortened for brevity 
            .....
         </ul>
      </div>
      <!-- CALL THE SLIDE using $().ready() - it doesn't work -->
      <script type="text/javascript">
        $(document).ready( function() 
            ShowSlide();
        });
      </script>
  `;
}

I've ran out of ideas, I don't know what is preventing the function to be fired, I've added a little button to call this function manually and it works when it is called from pressing the button but not on the expected $().ready()

public render(): void {  
  this.domElement.innerHTML = `
      <!-- manual call for ShowSlide() -- it works when clicked! -->
      <input type="button" value="Start Slide" onClick="ShowSlide()"  />
      <!-- build the slide here -->
      <div>
         <ul>
            .....
            ..... shortened for brevity 
            .....
         </ul>
      </div>
      <!-- CALL THE SLIDE using $().ready() - it doesn't work -->
      <script type="text/javascript">
        $(document).ready( function()
            ShowSlide();
        });
      </script>
  `;
}

You're setting the element's `innerHTML`; while this does put the script in the DOM, it doesn't actually run it. — , Jun 20 '18 at 11:05
oh! i c what you are saying... it is the only place i'm familiar with for creating the HTML contents to assemble the slide (this works)... but getting to your point, where should I go with my function/slide to work? — Mr. Dr. Sushi, Jun 20 '18 at 11:09
I don't know how SPFx works at all, but I guess you can simply move the script to wherever you have `ShowSlide` defined? — , Jun 20 '18 at 11:11
hey Chris, the function I'm calling inside the SPFx is from my script externally sitting in the project 'jquery.slide.js' - I'm dealing with the firing of the function, I can call the function from the — Mr. Dr. Sushi, Jun 20 '18 at 11:14
yes I do have jQuery, it is loaded along with the other jQuery.Slide.js and Modernizr.JS - all show up fine, it is just finding on the TypeScript/SPFx how to get this thing in the right place to fire — Mr. Dr. Sushi, Jun 20 '18 at 11:18

Mr. Dr. Sushi · Accepted Answer · 2018-06-21T05:52:54.203

I found the solution for my problem! I learned about adding the script by creating the element inside HEAD, so all I had to do was the following:

  public render(): void {

    this.domElement.innerHTML = this.htmlContents;

    let head: any = document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";

    try {
        script.appendChild(document.createTextNode(this.htmlScript));
    } 
    catch (e) {
        script.text = this.htmlScript;
    }

    head.insertBefore(script, head.firstChild);
    head.removeChild(script);               
  }

I hope this helps anybody out there facing the same problem, took me 4 straight days researching, googling, reading everything I could, till I found an article on a blog about calling Azure functions inside SPFx, from there I could get the inspiration to connect the points and solve my problem!

Works like a charm! VERY helpful! – Aaronster Oct 14 '21 at 21:03 — Aaronster, Oct 14 '21 at 21:03

SPFx - JavaScript function not firing

1 Answers1