Stepper navigation buttons error

Devwares-Team / contrast-bootstrap

Contrast Design Bootstrap : Elegant UI Kit and reusable components for building mobile-first, responsive websites and web apps

https://www.devwares.com/product/bootstrap-contrast/

Other

6 stars 0 forks source link

Stepper navigation buttons error #2

Closed gmc1972 closed 1 week ago

gmc1972 commented 2 weeks ago

Hello

I«m getting this error when i want to use the navigation buttons (next and previous)

atividades1.php:279 Uncaught TypeError: stepper.navigate is not a function at HTMLButtonElement.onclick

I have just copied the code in https://www.devwares.com/docs/contrast/javascript/components/stepper/

Any help please?

Speedwares commented 2 weeks ago

Hi @gmc1972, Can you reproduce a demo of your code on codesandbox.io

gmc1972 commented 2 weeks ago

Speedwares @.***> escreveu (terça, 27/08/2024 à(s) 17:30):

Hi can you reproduce a demo of your code on codesandbox.io

— Reply to this email directly, view it on GitHub https://github.com/Devwares-Team/contrast-bootstrap/issues/2#issuecomment-2313026158, or unsubscribe https://github.com/notifications/unsubscribe-auth/BKZRR4N3HKPPPFME34OWALDZTSST5AVCNFSM6AAAAABNEPAYEKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJTGAZDMMJVHA . You are receiving this because you authored the thread.Message ID: @.***>

Speedwares commented 2 weeks ago

Hi @gmc1972, The documentation has been updated https://www.devwares.com/docs/contrast/javascript/components/stepper/ to reflect some new changes we made to fix this. Let me know if everything now works as expected

gmc1972 commented 2 weeks ago

Previous atividades1.php:363 Uncaught TypeError: stepper.navigate is not a function at HTMLButtonElement.onclick (atividades1.php:363:142)

Next atividades1.php:366 Uncaught TypeError: stepper.navigate is not a function at HTMLButtonElement.onclick (atividades1.php:366:142)

Speedwares @.***> escreveu (quarta, 28/08/2024 à(s) 18:39):

Hi @gmc1972 https://github.com/gmc1972, The documentation has been updated https://www.devwares.com/docs/contrast/javascript/components/stepper/ to reflect some new changes we made to fix this. Let me know if everything now works as expected

— Reply to this email directly, view it on GitHub https://github.com/Devwares-Team/contrast-bootstrap/issues/2#issuecomment-2315919682, or unsubscribe https://github.com/notifications/unsubscribe-auth/BKZRR4OYDPMDHT2DMVBVXW3ZTYDL5AVCNFSM6AAAAABNEPAYEKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJVHEYTSNRYGI . You are receiving this because you were mentioned.Message ID: @.***>

gmc1972 commented 2 weeks ago

My modal

Nota: O professor é o organizador responsável

Informação Básica

Data e Hora

Dados Específicos

Fim

                    </div>
                    <div class="stepper-content-container">
                        <div class="stepper-content fade-in"

stepper-label="1"> <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9;"> <div class="my-0 mx-auto" style="border-radius: 10px; background: #f5f5f5;">

1º Passo

                                        <br>
                                        <div class="col-md-12"

style="padding-left: 10px;">

Projeto(s)

                                            <div class="col-md-12">
                                                <select

class="selectpicker" id="idProjeto" name="idProjeto[]" data-live-search="true" title="Escolha da seguinte lista" data-selected-text-format="count > 6" data-width="100%" multiple required>

Turma(s)

                                            <div class="col-md-12">
                                                <select

class="selectpicker" id="idTurma" name="idTurma[]" data-live-search="true" title="Escolha da seguinte lista" data-selected-text-format="count > 6" data-width="100%" multiple required>

Docente(s) participantes(s):

                                            <div class="col-md-12">
                                                <select

class="selectpicker" id="idProfessor" name="idProfessores[]" data-live-search="true" title="Escolha da seguinte lista" data-selected-text-format="count > 6" data-width="100%" multiple required>

Atividade

                                            <div class="col-md-12"

style="padding-left: 10px"> <input type="text" style="width: 1020px" class="form-control form-control-lg" id="atividade" name="atividade" maxlength="150" onkeyup="countChars(this);" required/> <p id="charNum" class="text-muted mb-2">150 carateres disponíveis

2º Passo

                                        <div class="col-md-12"

style="padding-left: 30px;">

Nota: Deve escolher somente uma das opções

                                            <div

class="form-control-lg" style="padding-left: 15px;"> <div class="form-check form-check-inline"> <input class="form-check-input btDate" type="radio" name="chooseDate" id="inlineRadio3" value="Periodo" required> <label class="form-check-label" for="inlineRadio3">Período

<div class="form-check form-check-inline"> <label for="inlineRadio4"><input class="form-check-input btDate" type="radio" name="chooseDate" id="inlineRadio4" value="Data" required> <label class="form-check-label" for="inlineRadio3">Data <div class="invalid-feedback">Obrigatório! <div class="col-md-12" style="padding-left: 15px; display: none" id="showPeriodos">

Períodos

Selecione um período

                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div

class="form-select-lg" style="padding-left: 23px;display: none;" id="showPrevisto"> <label class="text-muted mb-1">

Previsto <select class="form-select" id="previsto" name="previsto" style="width: 470px;" onchange="showHora()">

Selecione a data <input type="text" style="font-size: 16px;" id="datepicker2" data-mindate="today" name="dataAtividade" class="form-control dudp__date" onchange="showHora()" required/> <div class="invalid-feedback ">Escolha uma data válida. <div class="col-md-12" style="padding-left: 15px; display: none" id="showHoras"> <div class="form-select-lg" style="padding-left: 15px; padding-right: 15px; width: 200px"> <label class="text-muted mb-1">

Selecione a hora <input type="text" class="form-control timepicker" id="picker1" name="hora" value="08:00" data-mintime="08:00" data-maxtime="18:10" required/> <div class="invalid-feedback">Deve definir a hora!

                                            <div class="d-flex

w-100 align-items-center justify-content-between"> <div class="stepper-content fade-in" stepper-label="3"> <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9;"> <div class="" style="border-radius: 10px; background: #f5f5f5;">

3º Passo

                                        <div class="col-md-12"

style="padding-left: 30px;"> <div class="col-md-12" style="padding-left: 15px; padding-right: 15px"> <label class="text-muted mb-1">

Objetivos <textarea class="form-control" rows="3" id="objetivos" name="objetivos" maxlength="500" onkeyup="countCharsGrupoObjetivos(this);" required> <p id="charNumGrupoObj" class="text-muted mb-2">500 carateres disponíveis

Participantes <textarea class="form-control" rows="3" id="participantes" name="participantes" maxlength="250" onkeyup="countCharsGrupoParticipantes(this);" required> <p id="charNumParticipantes" class="text-muted mb-2">250 carateres disponíveis

<div class="col-md-12" style="padding-left: 15px; padding-right: 15px"> <label class="text-muted mb-1"> A atividade vai necessitar de interrupção de aulas?

Sim

                                                <div class="form-check">
                                                    <input

type="radio" class="form-check-input" id="radio2" name="haveClasses" value="Não" required> <label class="form-check-label" style="font-size: 16px;" for="radio2">Não

A definir

                                            </div>
                                            <div class="col-md-12"

style="padding-left: 15px; padding-right: 15px"> <label class="text-muted mb-1"> Grupo Alvo <input type="text" class="form-control" id="grupoAlvo" name="grupoAlvo" maxlength="150" onkeyup="countCharsGrupoAlvo(this);" required/> <p id="charNumGrupoAlvo" class="text-muted mb-2">150 carateres disponíveis

Orçamento <input type="number" class="form-control" id="orcamento" name="orcamento" placeholder="10" maxlength="20" required/>

4º Passo

                                        <div class="col-md-12"

style="padding-left: 30px;"> <div class="col-md-12" style="padding-left: 15px; padding-right: 15px"> <label class="text-muted mb-1"> Onde se vai desenrolar <input type="text" class="form-control" id="local" name="local" maxlength="80" required/>

Observações <textarea class="form-control" rows="5" id="obs" name="obs" value="Nada a referir" onkeyup="countCharsOBS(this);" maxlength="5000"> <p id="charNumOBS">5000 carateres disponíveis

                                            <div class="col-md-12">
                                                <input

type="hidden" class="form-control" name="idProfessor" id="idProfessor" value="<?php echo $idProfessor; ?>">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

The other scrips are loaded in first php menu

Gil Carvalho @.***> escreveu (quarta, 28/08/2024 à(s) 22:12):

No

Previous atividades1.php:363 Uncaught TypeError: stepper.navigate is not a function at HTMLButtonElement.onclick (atividades1.php:363:142)

Next atividades1.php:366 Uncaught TypeError: stepper.navigate is not a function at HTMLButtonElement.onclick (atividades1.php:366:142)

Speedwares @.***> escreveu (quarta, 28/08/2024 à(s) 18:39):

Hi @gmc1972 https://github.com/gmc1972, The documentation has been updated https://www.devwares.com/docs/contrast/javascript/components/stepper/ to reflect some new changes we made to fix this. Let me know if everything now works as expected

— Reply to this email directly, view it on GitHub https://github.com/Devwares-Team/contrast-bootstrap/issues/2#issuecomment-2315919682, or unsubscribe https://github.com/notifications/unsubscribe-auth/BKZRR4OYDPMDHT2DMVBVXW3ZTYDL5AVCNFSM6AAAAABNEPAYEKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJVHEYTSNRYGI . You are receiving this because you were mentioned.Message ID: @.***>

Speedwares commented 2 weeks ago

Hi, here is a link to a live demo https://codesandbox.io/p/devbox/eloquent-mirzakhani-c9q58c

Speedwares commented 1 week ago

Closing this, the issue has been resolved