SharePoint online require.js

Forums Dynamic Forms for SharePoint SharePoint online require.js

This topic contains 19 replies, has 4 voices, and was last updated by  Alexander Bautz 1 month, 3 weeks ago.

  • 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

    • This topic was modified 1 year, 5 months ago by  Eike Ahmels.
  • #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

You must be logged in to reply to this topic.