SharePoint online require.js

[Eike Ahmels]

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

• This topic was modified 6 years, 9 months ago by Eike Ahmels.

[Alexander Bautz]

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

[Eike Ahmels]

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

[Eike Ahmels]

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

[Eike Ahmels]

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

[Eike Ahmels]

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

[Alexander Bautz]

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

[Eike Ahmels]

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

[Alexander Bautz]

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

[Kasey]

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’);

[Alexander Bautz]

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

[Eike Ahmels]

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

[Alexander Bautz]

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

[Eike Ahmels]

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

[Alexander Bautz]

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

[Eike Ahmels]

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

[Ivan Wilson]

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?

[Alexander Bautz]

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

[Ivan Wilson]

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

[Alexander Bautz]

I’m glad you figured it out.

Alexander

[Author]

Posts