-1

I have a very simple html page where I put this script at the end:

<?php echo $this->Html->script(['studiomain.js']); ?>
</html>

The script contains an IIF in JS:

window.studiomain =  window.studiomain || (function ($) {
     let _dataTable = '';
     let _modalTemplates = {};
     let _webroot   = 'studioasq';
     function setDataTable (t, options={}) {
        _dataTable = $(t);
        if (typeof $(t).DataTable == 'function') {
           options.language = {
              "url": "/" + _webroot + "/js/datatable/i18n/Italian.json"
        }
        $(t).DataTable(options);
       }
    }
    function setModal(key='',template='') {
        _modalTemplates[key] = template;
    }
    function renderModal(key,data={}) {
       if (_modalTemplates[key] !== undefined) {
           let copy = _modalTemplates[key];
             Object.keys(data).forEach((key) => {                
               copy.replace(new RegExp("{{" + value + "}}","g"),data[key]);
        })
       }
       return $('#'+key);        
    }
  return {
    setDataTable,
    setModal,
    renderModal
}

})($);

But when the page finishes loading, I have no studiomain in window:

window.studiomain => undefined.

I think the problem is the renderModal function: If I delete it all is fine. What am I missing?

**** UPDATE ****

Following suggestions, I think the problem is in the order of loading scripts and passing the reference to JQuery.

I discovered also that passing (jQuery) and NOT ($) to the IIF works.

gdm
  • 7,647
  • 3
  • 41
  • 71
  • I'm not sure about the `php` part. but for `js` part, can you check if your function returns something? – apple apple Mar 11 '19 at 12:00
  • hi, the script is correctly loaded and it return 3 functions – gdm Mar 11 '19 at 12:01
  • have you try `window.studiomain` code call after studiomain.js .And call this function after window.load – prasanth Mar 11 '19 at 12:02
  • "What am I missing?" - A [mcve] – Quentin Mar 11 '19 at 12:04
  • I tryied to call it in the console of chrome – gdm Mar 11 '19 at 12:04
  • can you confirm the console does not contain any error. (i.e. the function finish it's execution correctly) – apple apple Mar 11 '19 at 12:05
  • 1
    https://jsbin.com/zapirabewa/1/edit?html,console — I can't reproduce the problem. – Quentin Mar 11 '19 at 12:06
  • Is it possible you are calling the function from a file that is added before the part with the function. So that it's called before it's been defined. I think, as others cannot produce the error, that this may be a likely cause. But it's just a guess. No way to know without more context. – ArtisticPhoenix Mar 11 '19 at 12:09
  • Re edit: I still can't reproduce the problem: https://jsbin.com/tiseqimila/1/edit?html,console – Quentin Mar 11 '19 at 12:25

1 Answers1

0

I guess you are trying to achieve modular pattern.

In your code, you'll need to return every thing inside a function, otherwise every code without return will be in private state.

Fix of your code, you need to return window.studiomain as a parameter, you code will work, $ is not defined therefore it's not storing inside window object

window.studiomain = window.studiomain || (function($) {
  let _dataTable = '';
  let _modalTemplates = {};
  let _webroot = 'studioasq';

  function setDataTable(t, options = {}) {
    _dataTable = $(t);
    if (typeof $(t).DataTable == 'function') {
      options.language = {
        "url": "/" + _webroot + "/js/datatable/i18n/Italian.json"
      }
      $(t).DataTable(options);
    }
  }

  function setModal(key = '', template = '') {
    _modalTemplates[key] = template;
  }

  function renderModal(key, data = {}) {
    if (_modalTemplates[key] !== undefined) {
      let copy = _modalTemplates[key];
      Object.keys(data).forEach((key) => {
        copy.replace(new RegExp("{{" + value + "}}", "g"), data[key]);
      })
    }
    return $('#' + key);
  }
  return {
    setDataTable,
    setModal,
    renderModal
  }

})(window.studiomain);

console.log(studiomain);
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68