Question 174700 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React loading third party script and calling a function from that script after

Trying to load in a form from a third party service

They want us to load the script for their service then another script to populate the form with html/data

//load the marketo script if it doesn't exist already
const loadMarketoScript = (callback) => {
  const existingScript = document.getElementById('mktoForms');
  
  if (!existingScript) {
    const script = document.createElement('script');
    s.id = "mktoForms";
    s.type = "text/javascript";
    s.async = true;
    s.src = "//app-ab11.marketo.com/js/forms2/js/forms2.min.js";

    document.getElementsByTagName("head")[0].appendChild(script);
    script.onload = () => { 
      if (callback) callback();
    };
  }
  if (existingScript && callback) callback();
};

export default loadMarketoScript;

//page calling the function to load the script
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    loadMarketoScript(() => {
      setLoaded(true);
    });
  });

  useEffect(() => {
    MktoForms2.loadForm("//748-KKO-677.mktoweb.com", "748-KKO-677", 1169);
  }, [loaded]);

However MktoForms2 shows as undefined. Unsure what to do here.

Tags:

2

Answers


  1. 0

    It seems like the issue is that the script for MktoForms2 is not loaded properly. Here’s what you can do to fix it:

    Double-check if the script URL for MktoForms2 is correct. Make sure that it is the correct URL and that it is accessible.
    2 Make sure that the script is loaded before trying to use the MktoForms2 object. You can do this by either adding the defer attribute to the script tag or by waiting for the load event to fire before using the object.

    If the above steps do not work, try using a different method to load the script, such as using the fetch API or a library like jQuery.
    Here’s an updated version of the code that implements these changes:

    const loadMarketoScript = (callback) => {
  const existingScript = document.getElementById('mktoForms');
  
  if (!existingScript) {
    const script = document.createElement('script');
    script.id = "mktoForms";
    script.type = "text/javascript";
    script.async = true;
    script.src = "//app-ab11.marketo.com/js/forms2/js/forms2.min.js";
    script.onload = () => { 
      if (callback) callback();
    };

    document.getElementsByTagName("head")[0].appendChild(script);
  }
  else {
    if (callback) callback();
  }
};

export default loadMarketoScript;

const [loaded, setLoaded] = useState(false);

useEffect(() => {
  loadMarketoScript(() => {
    setLoaded(true);
  });
}, []);

useEffect(() => {
  if (loaded) {
    const form = MktoForms2.getForm("//748-KKO-677.mktoweb.com", 1169);
    form.onSuccess(() => {
      // do something success
    });
    form.onSubmit(() => {
      // do something on submit
    });
  }
}, [loaded]);

    Note that in this updated code, we are using getForm instead of loadForm to retrieve the form object. We are also adding onSuccess and onSubmit event handlers to the form object. You can modify these event handlers to suit your needs.

    Login or Signup to reply.
  2. 0

    It seems the second useEffect hook doesn’t wait for anything to actually be loaded prior to calling MktoForms2.loadForm(....);. The useEffect hook is guaranteed to be called on the initial render, and then again anytime a dependency updated.

    The first useEffect hook is also missing its dependency array, so anytime the component renders the callback will be called and loadMarketoScript will be called. An empty dependency array should be added if you only want to attempt to load the market script when the component mounts.

    // page calling the function to load the script
const [loaded, setLoaded] = useState(false);

useEffect(() => {
  loadMarketoScript(() => {
    setLoaded(true);
  });
}, []); // <-- add missing dependency array

useEffect(() => {
  if (loaded) { // <-- only load form if script is loaded
    MktoForms2.loadForm("//748-KKO-677.mktoweb.com", "748-KKO-677", 1169);
  }
}, [loaded]);

    Alternatively you could call MktoForms2.loadForm(....); in the loadMarketoScript callback that is only ever called after the script is loaded.

    // page calling the function to load the script
const [loaded, setLoaded] = useState(false);

useEffect(() => {
  loadMarketoScript(() => {
    setLoaded(true);
    MktoForms2.loadForm("//748-KKO-677.mktoweb.com", "748-KKO-677", 1169);
  });
}, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search