surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.18k stars 808 forks source link

[Question] Hi, there. I want to make button all pages using custom using jQuery #8760

Closed MinWook6457 closed 1 month ago

MinWook6457 commented 1 month ago

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

Hi, there. I want to make button all pages using custom.

This is my code. _surveyModel: new Survey.Model($("#rsrchModelJson").val())

this.updateSaveButton = function() {
                        const currentPageNo = this.surveyModel.currentPageNo;
                        const pageCount = this.surveyModel.pageCount;

                        console.log('current : ' , currentPageNo);
                        console.log('pageCount : ', pageCount);
                        if (currentPageNo < pageCount - 1) {
                            this.surveyModel.addNavigationItem({
                                id: "sv-nav-save-page",
                                title: "save",
                                action: () => {
                                    console.log("Save action triggered on page", currentPageNo + 1);
                                },
                                css: "nav-button",
                                innerCss: "sd-btn nav-input"
                            });
                        }

                        const test = JSON.parse($("#rsrchModelJson").val());

                        if (test.pages.length === pageCount) {
                            console.log('Start Destroy Btn ... ')
                            this.surveyModel.navigationBar.removeItem("sv-nav-save-page");
                        }
                    };

When survey init, This survey made by rsrchModelJson. So, my action making button has all button to all pages. I want that last page does not make Button.

How to make logic or what to use method?

JaneSjs commented 1 month ago

Hello @MinWook6457, From what I gather, you wish to register a custom navigation action. The custom button should be available on all survey pages except the last page. To hide a button from the last page, use a ComputedUpdater to update the action's visible attribute depending on the current survey page number. Consider the following demo: View Plunker.

import { ComputedUpdater } from "survey-core";

const clearPageButton = {
        id: "sv-nav-clear-page",
        title: "Clear Page",
        action: () => {
            survey.currentPage.questions.forEach((question) => {
                question.value = undefined;
            });
        },
        visible: new ComputedUpdater(() => {
            return survey.currentPageNo != survey.pages.length - 1;
        }),
        css: "nav-button",
        innerCss: "sd-btn nav-input"
}

Let me know if this code works for you.

MinWook6457 commented 1 month ago

Hi, 'JaneSjs'. First of all, thanks for your help.

After applying your code, it worked out the way I wanted.

I was able to solve this problem with the code below.

visible: new ComputedUpdater(() => {
           return survey.currentPageNo != survey.pages.length - 1;
}),

Thank you for your help,