Embedded surveyJS Issue

Question

I'm following the guidance (https://surveyjs.io/Survey/Builder/) to embed a survey in my page.

On the site mentioned above> embed survey >

Use jQuery
For bootstrap framework
Show Survey on the page.

I have a Laravel app, and the page renders this source code:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>The Survey Page </title>

        <!-- Your platform (jquery) scripts. -->
        <link href="https://surveyjs.azureedge.net/1.0.28/survey.css" type="text/css" rel="stylesheet" />
        <script src="https://surveyjs.azureedge.net/1.0.28/survey.jquery.min.js"></script>

    </head>

    <body>
        <div id="surveyContainer"></div>
        <script> alert("This is the survey blade right here right now"); </script>
        <script>
            var surveyJSON = {pages:[{name:"page1",elements:[{type:"paneldynamic",name:"question2",templateElements:[{type:"radiogroup",name:"question3",choices:["item1","item2","item3"]},{type:"text",name:"question4"}]},{type:"paneldynamic",name:"question1"}]}]}

            function sendDataToServer(survey) {
                //send Ajax request to your web server later. Meantime...
                alert("The results are:" + JSON.stringify(survey.data));
            }

            var survey = new Survey.Model(surveyJSON);
            $("#surveyContainer").Survey({
                model: survey,
                onComplete: sendDataToServer
            });
        </script>


    </body>
</html>

So, I get the alert and a blank page.
the external script references are correctly formatted
the script is the last thing on the page (sequence wise)

In the console, I get this:

survey.jquery.min.js:11 Uncaught TypeError: Cannot read property 'fn' of undefined
    at Object.<anonymous> (survey.jquery.min.js:11)
    at t (survey.jquery.min.js:6)
    at survey.jquery.min.js:6
    at survey.jquery.min.js:6
    at survey.jquery.min.js:6
    at survey.jquery.min.js:6
(anonymous) @ survey.jquery.min.js:11
t @ survey.jquery.min.js:6
(anonymous) @ survey.jquery.min.js:6
(anonymous) @ survey.jquery.min.js:6
(anonymous) @ survey.jquery.min.js:6
(anonymous) @ survey.jquery.min.js:6

showSurvey:23 Uncaught ReferenceError: Survey is not defined
    at showSurvey:23

showSurvey is my controller method.

public function showSurvey()
    {
        return view ('surveys.survey');   //the laravel blade.. although it's just HTML as per the tutorial example
    }

What am I doing wrong?

Have you first of all checked the browser console for errors? — CBroe, Jun 25 '18 at 08:44
Where's the facepalm? I thought `` was the jquery. Thanks.. Much appreciated.Make it an answer that I can accept? — Maxcot, Jun 25 '18 at 09:03
Yeah, that’s only meant to signify that this is the version of the script supposed to be used _with_ jQuery … according to the github readme, _“it has versions for angular2+, jQuery, knockout, react and vue”_ - so those will likely all just be named accordingly. — CBroe, Jun 25 '18 at 09:05

score 1 · Answer 1 · answered Jun 25 '18 at 09:21

1

Plese replace the following line:

  <!-- Your platform (jquery) scripts. -->

with

  <script src="https://unpkg.com/jquery"></script>

answered Jun 25 '18 at 09:21

Andrew Telnov

161
1
3

Why that one in particular? I've added `` and it works just fine. – Maxcot Jun 25 '18 at 09:50
The version 2.1.3 is fine as well. We do not set the exact version, because developers may use different versions and we do not have any specific requirements. – Andrew Telnov Jun 25 '18 at 11:43

Embedded surveyJS Issue

1 Answers1