Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SurveyVue.Model doesn't update "completedHTML" #16

Open
dnlsgv opened this issue Apr 21, 2020 · 7 comments
Open

SurveyVue.Model doesn't update "completedHTML" #16

dnlsgv opened this issue Apr 21, 2020 · 7 comments
Labels

Comments

@dnlsgv
Copy link

dnlsgv commented Apr 21, 2020

Hi, I have an issue when I try to change the model of a survey using a click event (on a button).
The component's data:

  data() {
    var json1 = {
   "completedHtml": "completedHTML json1",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json1"
      }
     ]
    }
   ]
  };
      var json2 = {
   "completedHtml": "completedHTML json2",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json2"
      }
     ]
    }
   ]
  };   
    var model = new SurveyVue.Model(json1);
    return {
      survey: model,
      json1,
      json2
    };
  }

And I also have a button that change the survey model

<button v-on:click="changeSurveyJson22">Change survey json22</button>
  methods: {
    changeSurveyJson22() {
      this.survey = new SurveyVue.Model(this.json2);
    }

The bug occurs when I complete the survey and then click to "Change survey json22" button, the question changes but the completedHTML continues with the previous value "completedHTML json1" that should be "completedHTML json2".

Is it ok to use this.survey = new SurveyVue.Model(this.json2) to change the model of a survey?

Full source code:

Summary
<template>
  <div class="container">
    <!-- If you want to hide survey, comment the lines below -->
    <div>
      <button @click="changeSurveyJson11">Change survey json11</button>
      <button @click="changeSurveyJson22">Change survey json22</button>
    </div>
    <h2>SurveyJS Library - a sample survey below</h2>
    <survey :survey="survey"></survey>
  </div>
</template>

<script>
import * as SurveyVue from "survey-vue";
import "bootstrap/dist/css/bootstrap.css";
var Survey = SurveyVue.Survey;
Survey.cssType = "bootstrap";

import * as widgets from "surveyjs-widgets";
import "inputmask/dist/inputmask/phone-codes/phone.js";

import { init as customWidget } from "../components/customwidget";

widgets.icheck(SurveyVue);
widgets.select2(SurveyVue);
widgets.inputmask(SurveyVue);
widgets.jquerybarrating(SurveyVue);
widgets.jqueryuidatepicker(SurveyVue);
widgets.nouislider(SurveyVue);
widgets.select2tagbox(SurveyVue);
widgets.sortablejs(SurveyVue);
widgets.ckeditor(SurveyVue);
widgets.autocomplete(SurveyVue);
widgets.bootstrapslider(SurveyVue);
customWidget(SurveyVue);

SurveyVue.Serializer.addProperty("question", "tag:number");

export default {
  components: {
    Survey
  },
  data() {
    var json1 = {
   "completedHtml": "completedHTML json1",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json1"
      }
     ]
    }
   ]
  };
      var json2 = {
   "completedHtml": "completedHTML json2",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json2"
      }
     ]
    }
   ]
  };   
    var model = new SurveyVue.Model(json1);
    return {
      survey: model,
      json1,
      json2
    };
  },
  methods: {
    changeSurveyJson11() {
      this.survey = new SurveyVue.Model(this.json1);
    },
    changeSurveyJson22() {
      this.survey = new SurveyVue.Model(this.json2);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

@tsv2013
Copy link
Member

tsv2013 commented Apr 21, 2020

You needn't to re-create new model to change it properties. You can do it via API:

    var survey = new Survey.Model(json);
    survey.completedHtml = "Changed completedHtml";

Here is the working sample - https://plnkr.co/edit/clzdtZYmrP8QETC7

Another point is that you want to change complete message after survey has been completed. At this moment the completedHtml property can be changed before survey completed.

@dnlsgv
Copy link
Author

dnlsgv commented Apr 21, 2020

Another point is that you want to change complete message after survey has been completed. At this moment the completedHtml property can be changed before survey completed.

Thanks for the answer!
So, Isn't there a way to re-create a survey model (with a new completedHtml) after answering the survey?

@tsv2013
Copy link
Member

tsv2013 commented Apr 21, 2020

If you want to show the same survey, you can use the

survey.clear(true, true);

code.

If you want to create completely new survey, then yes

survey = new Survey.Model(newJson);

@dnlsgv
Copy link
Author

dnlsgv commented Apr 21, 2020

But using this:

survey = new Survey.Model(newJson);

This doesn't create a completely new json model, because the completedHtml doesn't update.
Here is a example https://plnkr.co/edit/hno6NtmHouGKq5ln
steps:

  1. Answer the current survey.
  2. The completedHtml when the survey is answered is: "Thanks" (this is ok)
  3. Click "completely new json" button
  4. Complete the survey
  5. The final message is "Thanks" (the previous completedHtml value), why? that should be "completedHtml": "final message"

@tsv2013
Copy link
Member

tsv2013 commented Apr 21, 2020

Completed survey has finished it's lifecycle. You can either re-run it using the clear method either create a new model as you do and render a new survey again from the 1st page, but not from the complete page.

@tsv2013
Copy link
Member

tsv2013 commented Apr 21, 2020

Any changes in a complete page should be done before survey completed.

Can you share your business case - what do you want to achieve?

@dnlsgv
Copy link
Author

dnlsgv commented Apr 22, 2020

I want to achieve that a vue component re-create a survey if creator/builder json changes (a very similar behaviour to what happens with the "Test survey" tab). My main problem is that I can manage to re-create the entire survey (using this.survey = new Survey.Model(newJson);), but for some reason when I submit the survey the final message doesn't change (it remains with the previous value).

In short, I want to do a "Test survey" (re-create current survey) tab but in a vue component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants