We need to create example of using surveyjs with requirejs.
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?
Most helpful comment
Ok, here are the relevant pieces of my code that I got to work.
In the view:
In the
/js/rjs_app.js(which is my config for RequireJs):In my
/js/backPainSurvey: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.