SharePoint online require.js

Forums Dynamic Forms for SharePoint SharePoint online require.js

Viewing 19 reply threads
  • Author
    Posts
    • #17010
      Eike Ahmels
      Participant

      Hello,

      we tested it on 2 machines, we cant load custom js into the forms (no form works). We try to load magnific.min.js and jquery-ui.min.js.
      There are a cuple of errors occuring:

      VM7418:162 Uncaught TypeError: $(...).magnificPopup is not a function...
      Uncaught Error: Script error for "jquery", needed by: odsp-next/dataSources/item/odb/ListViewDataPrefetch
      require-951f856e.js:5 Uncaught Error: Mismatched anonymous define() module: function (a){...

      i think it has something to do with require.js and the way jquery is loaded etc. because i cant event load any js with $.getScript or pure javascript (append it to head), or add the javascriptfiles direct into sharepoint. If require.js gets loaded and dffs is loading its jquery, it brakes.

      Regards
      Eike Ahmels

      edit:
      if i go onto a simple page, where jquery is already loaded and i try $.getScript it works, its getting registered

    • #17018
      Alexander Bautz
      Keymaster

      Which version of DFFS are you using? – I added jQuery.noConflict() to the latest version of DFFS – released yesterday (it was introduced in the BETA on March 12). This will let other jQuery versions be loaded side-by-side without causing problems.

      In previous versions the default functionality would be to NOT load jQuery if it was already loaded in the master page. Try bringing up the developer console and type in this:

      jQuery.fn.jquery

      What is the output?

      Alexander

    • #17027
      Eike Ahmels
      Participant

      Hello Alexander,

      we are using the latest DFFS build (not beta).

      jQuery.fn.jquery = "1.12.4"

      I removed the jQuery.noConflict() part to test if this changes anything, but it doesnt. Same error as before, the custom js files are loaded (i can see the script tags in the DOM), but the objects arent present.

      Regards
      Eike

    • #17031
      Eike Ahmels
      Participant

      Hello Alexander,

      i have a update, i discovered, that i have the same issue with DFFS 4.4.1 on a page which worked 100% before. I guess SharePoint Online changed/updated something. On premise it works so far.

      I have no clue why and my investigations came out with nothing so far.

      Pretty strange, because the issue just came up on two different sites, where one worked 100% before.

      If you need more info, just ask, i guess i can give you some sort of access to the site, so you can see the error your self.

      Regards
      Eike

    • #17033
      Eike Ahmels
      Participant

      Me again πŸ™‚

      I coded a little into the DFFS loader to let it use require.js a little. I hardcoded the plugins we need here into it and it loads and no more errors.

      So i guess if its SharePoint Online, you should code around or with require.js.
      The problem is, when DFFS_loader.html is called, require.js is not finished loading.

      If you need more info, let me know.

      Regards
      Eike

    • #17035
      Eike Ahmels
      Participant

      Again πŸ˜€

      I changed the DFFS_frontend_min.js and DFFS_loader.html, so that it works with SharePoint Online. Its a realy quick and dirty fix i would say, but i would give you the changes, so you can look into it to make it work properly with require.js

      Regards
      Eike

    • #17049
      Alexander Bautz
      Keymaster

      Hi,
      I must admit I hadn’t actually tried loading jQuery UI in Custom JS recently. It turns out that now that require.js is included in SharePoint Online it doesn’t work anymore.

      The solution however is to use require.js to load jQuery UI like this (I tested this in my SharePoint Online developer site):

      SP.SOD.executeFunc("require.js", null, function () {
          // Use existing jQuery version
          define('jquery', [], function() {
              return jQuery;
          });
          require.config({
              paths: {
                  "jquery-ui": "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min"
              }
          });
          require(['jquery','jquery-ui'], function(jQuery) {
              // Run your code here
              // Apply the datepicker to all single line text fields just for fun...
              jQuery('input:text').datepicker();
          });
      });

      Let me know how this works out.
      Alexander

    • #17060
      Eike Ahmels
      Participant

      Hello Alexander,

      yes this works, the main problem is, that it doesnt stop with jquery-ui, no custom js files will load properly, in most cases, 0 customjs files is loaded.
      I found out, that the problem is, that when DFFS_loader.html loads its libs, require.js is not loaded. But when DFFS_frontend is loading, requirejs is present and everything fails.
      I coded a block, where it checks if its SharePoint Online or not, if it is, the whole customjs files loading procedure is done through requirejs, if not, the main codechain is executed. This works great, but i dont know how far.

      Regards
      Eike

    • #17075
      Alexander Bautz
      Keymaster

      Hi,
      Which custom js files are you loading? – I tested with a plain js file with a few functions and this worked, but as you found out more complex files like jQuery UI did not.

      Alexander

    • #17082
      Kasey
      Participant

      I’m not using SharePoint online and am having the same problem. Below is an example of one of my functions that is failing. How would I remedy this in the custom js section?

      $(“#dffs_IntakeDate”).find(“input”).datepicker({
      onSelect: function(updatePreIntake){spjs.dffs.triggerRule([“IntakeDateTargetChange”]);},
      constrainInput: true,
      maxDate: ‘+60d’, //sets the maximum selectable date.. in this case 60 days from today
      minDate: ‘+1d’, //sets the minimum selectable date.. in this case tomorrow
      beforeShowDay: //determines which days are selectable.. in this case Thursday only
      function (date) {
      var day = date.getDay();

      var SponsorGroup = getFieldValue(“Business_x0020_Objectives”)
      //CONSUMER VEHICLE LENDING
      if(SponsorGroup == “Consumer Vehicle Lending”){
      var strDay = 3;
      }
      else{
      var strDay = 4;
      }
      return [(day == strDay), ”];
      }
      }).attr(‘readonly’, ‘readonly’);

    • #17086
      Alexander Bautz
      Keymaster

      IF require.js is the reason it fails, you should be able to fix it like this (change the path to jQuery UI if you have it locally):

      SP.SOD.executeFunc("require.js", null, function () {
          // Use existing jQuery version
          define('jquery', [], function() {
              return jQuery;
          });
          require.config({
              paths: {
                  "jquery-ui": "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min"
              }
          });
          require(['jquery','jquery-ui'], function(jQuery) {
              // Run your code here
              $("#dffs_IntakeDate").find("input").datepicker({
      			onSelect: function(updatePreIntake){spjs.dffs.triggerRule(["IntakeDateTargetChange"]);},
      			constrainInput: true,
      			maxDate: '+60d', //sets the maximum selectable date.. in this case 60 days from today
      			minDate: '+1d', //sets the minimum selectable date.. in this case tomorrow
      			beforeShowDay: //determines which days are selectable.. in this case Thursday only
      			function (date) {
      			var day = date.getDay();
      
      			var SponsorGroup = getFieldValue("Business_x0020_Objectives")
      			//CONSUMER VEHICLE LENDING
      			if(SponsorGroup == "Consumer Vehicle Lending"){
      			var strDay = 3;
      			}
      			else{
      			var strDay = 4;
      			}
      				return [(day == strDay), "];
      			}
      		}).attr('readonly', 'readonly');
          });
      });

      Alexander

    • #17108
      Eike Ahmels
      Participant

      Hello Alexander,

      every js file that loads a little longer has problems. This must be, because require.js isnt loaded right away, so it has some delay. When larger libs are loaded, require.js ist loaded before those libs. Smaller libs can be loaded before require.js, i guess thats why.

      Regards
      Eike

    • #17154
      Alexander Bautz
      Keymaster

      Sorry for the delay. I’ll have to look into it and see if I can make use of require.js when loading files in SPO.

      Do you get the same problems with your own files with “plain” JavaScript or is it jQuery plugins and other more “complex” files that fail to load?

      Could you possible email me the code snippet you use to load with require js in SPO? so I can have a look at it?

      Best regards,
      Alexander

    • #17199
      Eike Ahmels
      Participant

      Hello Alexander,

      its every file that so big, that the loading time of that file is long enough, that require.js is loaded meanwhile.

      Yes sure i will send it to you via mail.

      Regards
      Eike

    • #17201
      Alexander Bautz
      Keymaster

      I have looked at this during the weekend and think I have cracked it – basically using require.js to load the custom files in SPO – and in on prem or SP 2007 / 2010 loading require.js first and then using it to load these custom files. I’ll try to get it out later tonight.

      Best regards,
      Alexander

    • #17273
      Eike Ahmels
      Participant

      Nice to hear that πŸ™‚ good work!
      I will look into it, when its ready, feel free to let me test a beta version in our environment.

      Regards
      Eike

    • #22134
      Ivan Wilson
      Participant

      I’m experiencing an issue along these lines with jquery-ui.js and third party code in SharePoint Online. I’m including files at the top of the Custom JS tab. Most of the time, everything works, but every now and then the DFFS form throws the error:

      TypeError: jQuery(…) addres is not a function

      Any idea how I can work around this?

    • #22144
      Alexander Bautz
      Keymaster

      Which version of DFFS are you running?

      If you load an AMD enabled module, you must click the “Important information about loading AMD enabled modules” link above the Custom JS textarea and use the code like described:

      // AMD module code wrapper - change module_name with the name of the module you are loading
      require(["module_name"], function(module_name){
          // add the code using "module_name" here
      });

      Alexander

    • #22571
      Ivan Wilson
      Participant

      Thanks Alexander,

      I ended up using SP.SOD.executeOrDelayUntilScriptLoaded and SP.SOD.executeFunc to handle the loading of the custom JS file at runtime. I believe this similar to the require.js functionality

      Ivan

    • #22573
      Alexander Bautz
      Keymaster

      I’m glad you figured it out.

      Alexander

Viewing 19 reply threads
  • You must be logged in to reply to this topic.