Question T8056
Visible to All Users

Implementing/Calling different Vuejs components using Surveryjs library onCompletion method

created 4 years ago

I'm having trouble making a Vue app where I'm trying to use SurveyJS functions:

  • I have one .vue page(Questionnaire.vue) where I have a survey function asking Pre-Assessment questions. On completions I want it to save to a JSON file.
  • I have another .vue page(contactInfo.vue) where I have a survey function where s user can input their contact info (First Name, Last Name, Phone Number, and Email. At the end of the page I would like for it to have the ability to upload files and I have a method implementing that. Do I need a better Axios?

What my problem is I'm:

  1. Having trouble on completing the first Survey(Questionnaire) letting the Vue app transition into the second .vue page (ContactInfo). Should it be in one vue page or am I implementing and calling it wrong?
  2. I'm having trouble POST-ing to my MongoDB database. I want to have the ability to send all the information in a JSON file to the database, but I'm having trouble with connection or something.

The sample code will not include my database URL connection but the code is showing everything else.

PreScreen.vue

JavaScript
<template> <survey :survey="survey"/> </template> <script> import * as Survey from "survey-vue"; import "survey-vue/survey.css"; import "./index.css"; Survey.StylesManager.applyTheme("default"); export default { name: 'PreScreen', data() { var json = { showQuestionNumbers: "off", pages: [ { questions: [ { type: "radiogroup", name: "q1", title: "Do you know the safety specs of commercial buildings code?", isRequired: true, choices: [ "Yes", "No" ], colCount: 0 }, { type: "radiogroup", name: "q2", title: "Question 2", visibleIf: "{q1}='Yes'", isRequired: true, choices: ["Yes", "No"] }, { type: "radiogroup", name: "q3", title: "Question 3:", visibleIf: "{q1}='Yes' and {q2} ='Yes'", isRequired: true, choices: ["Yes", "No"] }, { type: "radiogroup", name: "q4", title: "Question 4:", visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No']", isRequired: true, choices: ["Yes", "No"] }, { }, { type: "radiogroup", name: "q5", title: "Question 5:", visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No']", isRequired: true, choices: ["Yes", "No"] }, { type: "radiogroup", name: "q6", title: "Question 6:", visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No']", isRequired: true, choices: ["Yes", "No"] }, ], } ] }; const survey = new Survey.Model(json); function sendDataToServer(sender) { var resultAsString = JSON.stringify(sender.data); alert(resultAsString); } survey .onComplete.add(sendDataToServer); return {survey: survey}; } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

And this is my Upload.vue

JavaScript
<template> <survey :survey="survey"/> </template> <script> import * as Survey from "survey-vue"; import "survey-vue/survey.css"; import "./index.css"; Survey.StylesManager.applyTheme("default"); export default { name: 'Upload', data() { Survey.StylesManager.applyTheme("modern"); var json = { questions: [ { type: "file", title: "Please upload your files", name: "files", storeDataAsText: false, allowMultiple: true, maxSize: 102400 },{ name: "first_Name", type: "text", title: "Please enter your First Name:", placeHolder: "Jon", visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']", isRequired: true, autoComplete: "name" }, { name: "last_Name", type: "text", title: "Please enter your Last Name:", placeHolder: "Snow", visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']", isRequired: true, autoComplete: "name" }, { name: "email", type: "text", title: "Please enter your Email:", placeHolder: "jonsnow@gmail.com", inputMask: "email", visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']", isRequired: true, autoComplete: "name" }, { type: "file", title: "Please upload your files", name: "files", visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']" , storeDataAsText: false, allowMultiple: true, maxSize: 902400 } ] }; const survey = new Survey.Model(json); survey.onComplete.add(function (sender) { document .querySelector('#surveyResult') .textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3); }); survey.onClearFiles.add(function (survey, options) { // Code to remove files stored on your service // SurveyJS Service doesn't allow to remove files options.callback("success"); }); survey .onUploadFiles .add((survey, options) => { var formData = new FormData(); options .files .forEach(function (file) { formData.append(file.name, file); }); var xhr = new XMLHttpRequest(); xhr.responseType = "json"; xhr.open("POST", "mongodb+srv://''CONNECTION_WAS_HERE''"); xhr.onload = function () { var data = xhr.response; options.callback("success", options.files.map(file => { return { file: file, content: data[file.name] }; })); }; xhr.send(formData); }); survey .onDownloadFile .add((survey, options) => { var xhr = new XMLHttpRequest(); xhr.responseType = "blob"; xhr.open("GET", "mongodb+srv://'CONNECTION_WAS_HERE'" + options.content); xhr.onload = function () { var reader = new FileReader(); reader.onload = function (e) { options.callback("success", e.target.result); }; reader.readAsDataURL(new File([xhr.response], options.fileValue.name, {type: options.fileValue.type})); }; xhr.send(); }); }} </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

And this is my App.vue

JavaScript
<template> <div id="app"> <Home/> <div id="surveyElement"> <PreScreen/> <Upload></Upload> </div> </div> </template> <script> import Home from './components/Home.vue' import PreScreen from './components/PreScreen.vue' import Upload from './components/Upload.vue' export default { name: 'App', components: { Home, PreScreen, Upload } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

Answers approved by surveyjs Support

created 4 years ago

Hello,

Unfortunately your questions are rather related to common VueJS/JS programming tasks then to SurveyJS products:

  1. Having trouble on completing the first Survey(Questionnaire) letting the Vue app transition into the second .vue page (ContactInfo). Should it be in one vue page or am I implementing and calling it wrong?

You can subscribe to the https://surveyjs.io/Documentation/Library?id=surveymodel#onComplete event. At this point you will get notified the survey has been completed. After that you can send survey result JSON or any other information and navigate to another page of your application.

  1. I'm having trouble POST-ing to my MongoDB database. I want to have the ability to send all the information in a JSON file to the database, but I'm having trouble with connection or something.

Probably you can debug this request at start point (before send), on your server side and after receiving request results. Thus you will be able to find whats wrong.

Thanks, Serge
SurveyJS Team