Body: <p>I have a page that works correctly when loaded directly, but fails when loaded as a tab.</p>
  
  <p>The page includes:</p>
  
  <pre><code>CRM_Core_Resources::singleton()
    -&gt;addScriptUrl('https://d3js.org/d3.v5.min.js', 10)
    -&gt;addScriptFile('myext', 'js/chart.js', 20)
    -&gt;addVars('myext', ['data' =&gt; $data]);
  </code></pre>
  
  <p>It loads d3 and the extension's chart.js and draws a chart.  That all works.</p>
  
  <p>But when I try to add it as a tab on contact summary it fails.  Using the browser's Developer Tools, shows both the calls to load d3 and chart.js both succeeding with status 200 but the console produces 'd3 is not defined'. It looks like chart.js is trying to run before d3 has loaded. I've tried changing the weights and regions in the <code>addScriptUrl()</code> and <code>addScriptFile()</code> but without success.  </p>
  
  <p>How can I get this to work correctly when loaded as a tab?</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-04T08:42:11.583Z
Comments.Text: did you try adding d3 js in header and chart js in footer?
Comments.UserDisplayName: Pradeep Nayak
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-04T09:32:12.913Z
Comments.Text: Thanks for the suggestion - just tried that but no success.
Comments.UserDisplayName: Aidan
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-05T15:37:41.757Z
Comments.Text: The default region is `page-footer` which usually works for me. Just re-read, I suspect chart.js finishes loading before d3 (because d3 is on an external URL). So you need some way to control the loading and starting, maybe a wrapper js?
Comments.UserDisplayName: Matthew Wire
Tags: <javascript>
Title: How can I load javascript dependencies in a tab?
ThreadText: # How can I load javascript dependencies in a tab?
  
  (Asked by: username_0 on 2020-06-03)
  
  I have a page that works correctly when loaded directly, but fails when loaded as a tab.
  
  The page includes:
  
  ```
  CRM_Core_Resources::singleton()
    ->addScriptUrl('https://d3js.org/d3.v5.min.js', 10)
    ->addScriptFile('myext', 'js/chart.js', 20)
    ->addVars('myext', ['data' => $data]);
  
  ```
  
  It loads d3 and the extension's chart.js and draws a chart. That all works.
  
  But when I try to add it as a tab on contact summary it fails. Using the browser's Developer Tools, shows both the calls to load d3 and chart.js both succeeding with status 200 but the console produces 'd3 is not defined'. It looks like chart.js is trying to run before d3 has loaded. I've tried changing the weights and regions in the `addScriptUrl()` and `addScriptFile()` but without success.
  
  How can I get this to work correctly when loaded as a tab?
  
  **Tags:** javascript
  
  > **Comments:**
  > **username_1**: did you try adding d3 js in header and chart js in footer?  
  > **username_0**: Thanks for the suggestion - just tried that but no success.  
  > **username_2**: The default region is `page-footer` which usually works for me. Just re-read, I suspect chart.js finishes loading before d3 (because d3 is on an external URL). So you need some way to control the loading and starting, maybe a wrapper js?  
  
  ---
  
  ## 0 answers
  
  