Survey-library: Requirejs problem

Created on 26 Jan 2017  路  3Comments  路  Source: surveyjs/survey-library

We need to create example of using surveyjs with requirejs.

a demo is required

Most helpful comment

Ok, here are the relevant pieces of my code that I got to work.

In the view:

<script src="/js/rjs_app.js" type="text/javascript"></script><!--See http://stackoverflow.com/a/17343608/470749-->
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js" type="text/javascript"></script>
<script type="text/javascript">
    require(["backPainSurvey"]);
</script>

In the /js/rjs_app.js (which is my config for RequireJs):

var require = {
    config: function (c) {
        require = c;
    }
};//see https://github.com/requirejs/requirejs/wiki/Patterns-for-separating-config-from-the-main-module and http://stackoverflow.com/a/17343608/470749
require.config({
    "baseUrl": "/",    
    "paths": {
        "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",        
        "Survey": "/js/vendor/survey.jquery.min",        
        "backPainSurvey": "/js/backPainSurvey",
    },
    shim: {        
        "Survey": {
            deps: [
                "jquery",
            ],
            exports: 'Survey'
        },      
        "backPainSurvey": {
            deps: [
                "Survey",
            ],
            exports: 'backPainSurvey'
        },
});

In my /js/backPainSurvey:

'use strict';
define(function (require) {
    var $ = require('jquery');
    require(["Survey"], function (Survey) {
        Survey.Survey.cssType = "bootstrap";        
        var survey = {        };//Get from http://surveyjs.org/builder/
        var surveyModel = new Survey.Model(survey);       
        $(document).ready(function () {
            $("#surveyElement").Survey({model: surveyModel});            
        });
    });   
});

I think maybe the trick is using the word Survey (with uppercase S), since I think that is the name of the main variable that SurveyJs outputs.

All 3 comments

Ok, here are the relevant pieces of my code that I got to work.

In the view:

<script src="/js/rjs_app.js" type="text/javascript"></script><!--See http://stackoverflow.com/a/17343608/470749-->
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js" type="text/javascript"></script>
<script type="text/javascript">
    require(["backPainSurvey"]);
</script>

In the /js/rjs_app.js (which is my config for RequireJs):

var require = {
    config: function (c) {
        require = c;
    }
};//see https://github.com/requirejs/requirejs/wiki/Patterns-for-separating-config-from-the-main-module and http://stackoverflow.com/a/17343608/470749
require.config({
    "baseUrl": "/",    
    "paths": {
        "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",        
        "Survey": "/js/vendor/survey.jquery.min",        
        "backPainSurvey": "/js/backPainSurvey",
    },
    shim: {        
        "Survey": {
            deps: [
                "jquery",
            ],
            exports: 'Survey'
        },      
        "backPainSurvey": {
            deps: [
                "Survey",
            ],
            exports: 'backPainSurvey'
        },
});

In my /js/backPainSurvey:

'use strict';
define(function (require) {
    var $ = require('jquery');
    require(["Survey"], function (Survey) {
        Survey.Survey.cssType = "bootstrap";        
        var survey = {        };//Get from http://surveyjs.org/builder/
        var surveyModel = new Survey.Model(survey);       
        $(document).ready(function () {
            $("#surveyElement").Survey({model: surveyModel});            
        });
    });   
});

I think maybe the trick is using the word Survey (with uppercase S), since I think that is the name of the main variable that SurveyJs outputs.

@ryancwalsh, thank you for sharing your code!

I was having problems using this, until I used the word Survey (with uppercase S) everywhere, exactly as @ryancwalsh mentioned.

I wasn't aware of any case-sensitivity issues like this existed in RequireJS; the following did not work for me:

require.config({
    "baseUrl": "/",    
    "paths": {
        "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",        
        "survey": "/js/vendor/survey.jquery.min"
    },
    shim: {        
        "survey": {
            deps: [
                "jquery",
            ],
            exports: 'Survey'
        }
});

require(['survey'], function(Survey) { /* Survey is undefined */ });

Perhaps this is caused by a particular method of building the AMD wrapper?

Was this page helpful?
0 / 5 - 0 ratings