Survey-library: DOM manipulation in onAfterRenderQuestion

Created on 20 Nov 2017  路  9Comments  路  Source: surveyjs/survey-library

Are you requesting a feature, reporting a bug or ask a question?

Asking a question

What is the current behavior?

Using insertBefore on htmlElement passed to onAfterRenderQuestion has no effect.

What is the expected behavior?

DOM manipulation persists.

How would you reproduce the current behavior (if this is a bug)?

    survey.onAfterRenderQuestion.add(function(survey, options){
        var div = document.createElement("div");
        div.innerHTML = "Q"+options.question.no;
        div.className = 'sv_q_no';
        options.htmlElement.insertBefore(div, options.htmlElement.querySelector('h5'));
        options.htmlElement.appendChild(div);
    });

The <div class="sv_q_no">Q1</div> element is appended after the question but not inserted before.

Specify your

  • browser: Chrome
  • browser version: 62.0.3202.94
  • surveyjs platform (angular or react or jquery or knockout or vue): jquery
  • surveyjs version: 0.12.35
bug fixed

All 9 comments

I think, you don't use insertBefore correctly. I've created an example: https://plnkr.co/edit/39Wy5KTYelDisl9etit3?p=preview, please check it.

This is maybe a chrome bug for me then? Your example doesn't work either

screen shot 2017-11-20 at 15 09 41

Do you see Q1 in front of 1. * What car are you driving?

no i see it "after", but I think that this is another issue, in the first case we don't see label at all :)

I've fixed the example: https://plnkr.co/edit/39Wy5KTYelDisl9etit3?p=preview (removed unneded appendChild)

For some reason it doesn't work for me - the insertBefore operation is broken. Perhaps it's a problem with jQuery. This survey is hosted on a wordpress site. I'll investigate.

Thanks for looking into it.

ok. If you need help, feel free to ask us.

Closer to triaging this issue - Preact is removing the element during a rerender diff operation. I can get the elements to appear by going to the next page. Then once I answer a particular question the element is diff'd away.

Why this behaviour is different to your example I'm not sure - but you will see that if you answer the question in your example the question number element is removed.

survey.onAfterRenderQuestion is not called when the question re-renders due to an answer being selected.

@alasdaircr It should be fine from the next minor, v0.98.4

Thank you,
Andrew

Was this page helpful?
0 / 5 - 0 ratings