Hi,
How do you update an existing model?
I have the model loaded and showing using the analytics. However when I change the model adding a question and/or some possible options in an questions it then use survey.fromJSON() with the newly generated json string and then I do an updateData(jsonData) on the vispanel but the changes are not reflected until I refresh the entire page.
Thanks
Ray
Hello Ray,
The VisualizationPanel.updateData method actually updates the visualization panel with new survey results. You can check an example here: Refresh Survey Result.
From what I gather, you've tried this method but it didn't work, correct? Do you use a custom visualization panel?
Hi Jane, Thanks for your quick response.
I don't use custom visualization.
Please see below some part of the code:
After page load:
let data = $("textarea[name='submission_data']").val(); let questions = $("textarea[name='questions']").val(); survey = new Survey.Model(JSON.parse(questions)); visPanel = new SurveyAnalytics.VisualizationPanel( survey.getAllQuestions(), JSON.parse(data), options); visPanel.showHeader = true; visPanel.render(document.getElementById("dashboard"));
Where data contains the answers and questions is the model in json format. This works without any problems.
Then when I add an question and/or an answer to a question I want the analytics to reflect these changes without have to reload the entire page hence I have the following javascript function:
let questionnaire_id = $("input[name='id']").val(); pageBlockerStart(); $.ajax({ type: 'POST', url: '/questionnaire/reloadDashboard', data: { 'questionnaire_id': questionnaire_id, }, success: function (result) { if (result['status'] === 'success') { $("textarea[name='submission_data']").val(JSON.stringify(result['data']['answers'])); pageBlockerStop(); $('#submission_count')[0].innerText = result['data']['submission_count']; $("textarea[name='questions']").val(result['data']['questions']); survey.fromJSON(JSON.parse(result['data']['questions'])); window.setTimeout(function() { visPanel.updateData(JSON.parse(JSON.stringify(result['data']['answers']))); }, 1000); } else { eswal({ title: "", html: result['message'], type: 'error', showCloseButton: true, showCancelButton: false, }).then(function () { pageBlockerStop(); }); } }});
Sorry the prevous comment got submitted before completed.
The code to try to update the analytics is shown below.
First: Doing an ajax call to retrieve the latest version of the survey which was saved previously.
I have checked and tested the ajax call and the updated survey is indeed returned in the result['data']['questions'] variable.
I then use the survey (global variable) as created during the onpage load function and use:
survey.fromJSON(JSON.parse(result['data']['questions']));
After that run the updateData function on the visPanel (also global variable) created during page onload gets run. Note. In the code I put the code in a timeout because I thought maybe there is a timing issue.
However the analytics panel do not show any new questions and/or new answers to existing questions after calling this function. I have to reload the entire page for the changes to show. I don't want to reload the entire page to show any changes because our page uses tabs and reloading will go to the wrong tab which make the experience for our end users very cumbersome.
Hope this helps.
Thanks
Ray
let questionnaire_id = $("input[name='id']").val(); pageBlockerStart(); $.ajax({ type: 'POST', url: '/questionnaire/reloadDashboard', data: { 'questionnaire_id': questionnaire_id, }, success: function (result) { if (result['status'] === 'success') { $("textarea[name='submission_data']").val(JSON.stringify(result['data']['answers'])); pageBlockerStop(); $('#submission_count')[0].innerText = result['data']['submission_count']; $("textarea[name='questions']").val(result['data']['questions']); survey.fromJSON(JSON.parse(result['data']['questions'])); window.setTimeout(function() { visPanel.updateData(JSON.parse(JSON.stringify(result['data']['answers']))); }, 1000); } else { eswal({ title: "", html: result['message'], type: 'error', showCloseButton: true, showCancelButton: false, }).then(function () { pageBlockerStop(); }); } } });