Javascript in Modal View

[ru...@plann3r.com]

Hello,

I'm using the sdk.Widgets.showModalView functionality of InboxSDK. As 'el' parameter I pass an html form.

I'm having trouble getting my javascript/jquery working for the passed form (I need to toggle input fields on radiobutton changes, etc...)

What's the best practice for this scenario?

I tried passing a script tag in the el parameter, but that's not working.

Thanks,

Ruben

[Chris Cowan]

Inline javascript (<div onclick="...">) won't work because of the Content Security Policy that Gmail sets on its pages (for a large fraction of users), so we don't recommend that. After you inject some elements into the page, you can get references to them and programmatically add event listeners to them:

function showModal() {

  const el = document.createElement('div');

  el.innerHTML = `

    <div>

      some description text

    </div>

    <div>

      <button class="foo" type="button">foo button</button>

    </div>

  `;

  const button = el.querySelector('button.foo');

  button.addEventListener('click', event => {

    alert('foo button was clicked');

  });

  const modal = sdk.Widgets.showModalView({

    el: el,

    chrome: true,

    buttons: [ /* ... */ ]

  });

}

If you have many elements that you want to add event listeners to or otherwise modify, this style does get really verbose. React is a library which works nicely with the InboxSDK and does well in alleviating some pain. Here's a small example of it being used with the InboxSDK:

function showModal() {

  const el = document.createElement('div');

  ReactDOM.render(

    <div>

      <div>

        some description text

      </div>

      <div>

        <button

          className="foo"

          type="button"

          onClick={() => {

            alert('foo button clicked');

          }}

        >

          foo button

        </button>

      </div>

    </div>,

    el

  );

  const modal = sdk.Widgets.showModalView({

    el: el,

    chrome: true,

    buttons: [ /* ... */ ]

  });

  modal.on('destroy', () => {

    ReactDOM.unmountComponentAtNode(el);

  });

}