none
SPFx | (...).modal is not a function RRS feed

  • Pergunta

  • Olá,

    Estou tentando usar de MODAL do BootStrap no SharePoint Framework e tenho recebido o erro abaixo:

    Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_4__(...).modal is not a function

    Estou usando como base este exemplo.

    No meu caso criei uma table e nela tenho uma coluna que chama um evento de click e neste evento de click tento abrir o popUp.

    Coluna da Tabela:

    "<a id='" + item.ID + "' href='#' class='confirmEditFileLink'>" + "Edit Item" + "</a>"


    Click:

      // Edit button click event
      $(document).on('click', '.confirmEditFileLink', function (e) {
        e.preventDefault();
        var id = this.id;
    
        var requestUri = currentWebUrl.concat("/_api/web/lists/getByTitle('CustomList')/items(" + id + ")");
        
        $.ajax({
            url: requestUri,
            method: "GET",
            contentType: "application/json;odata=verbose",
            headers: { "accept": "application/json;odata=verbose" },
            success: function (data) {
    
                $('#fileTitle').val(data.d.Title);
                $('#fileName').val(data.d.Title);
                $('#fileType').val(data.d.Title);
                $('#team').val(data.d.Title);
                $('#fileId').val(data.d.Id);
                $('#myModalLabel').html('Edit File');
                (<any>$('#myModalNorm')).modal('show');
                $("#etag").val(data.d.__metadata.etag);
            }
        });
      });


    Html do Modal

    <div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                               <span aria-hidden="true">&times;</span>
                               <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            Add New File
                        </h4>
                    </div>
                    <!-- Modal Body -->
                    <div class="modal-body" id="modalBody">
                        <form role="form" id="fileForm">
                          <div class="form-group">
                            <label>File Title</label>
                              <input class="form-control" id="fileTitle"/>
                          </div>
                          <div class="form-group">
                            <label>File Name</label>
                              <input class="form-control" id="fileName"/>
                          </div>
                          <div class="form-group">
                            <label>File Type</label>
                              <input class="form-control" id="fileType"/>
                          </div>
                             <div class="form-group">
                            <label>Team</label>
                              <input class="form-control" id="team"/>
                          </div>
                          <!-- hidden controls -->
                          <div style="display: none">
                              <input id="etag" />
                              <input id="fileId" />
                          </div>
                          </form>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-danger" data-dismiss="modal" onclick='updateFormLabel();'>
                                Cancel
                              </button>
                              <button type="submit" class="btn btn-primary" id="fileFormSubmit">
                                Submit
                              </button>
                          </div>
                    </div>
                </div>
            </div>
        </div>



    O que pode ser?

    Obrigado


    [Gosto de compartilhar problemas com soluções que encontro no dia de trabalho]





    • Editado TI DEV quarta-feira, 30 de março de 2022 11:51
    quarta-feira, 30 de março de 2022 11:44

Respostas

  • Olá,

    O erro tinha haver com a falta de importação de js ou algo assim.

    Com este link consegui resolver.

    No arquivo config.json adicione em externals as referências para jquery (talvez nem precise, mas fica aqui a nota) e bootstrap:

    "externals": { "jquery": {
        "path": "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js",
        "globalName": "jquery"
      },
      "bootstrap": {
        "path": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
        "globalName": "bootstrap",
        "globalDependencies": ["jquery"]
      }},

    Já na webpart no arquivo .TS

    import 'jquery';
    require('bootstrap');

    Obrigado


    [Gosto de compartilhar problemas com soluções que encontro no dia de trabalho]


    • Marcado como Resposta TI DEV terça-feira, 5 de abril de 2022 11:56
    • Editado TI DEV terça-feira, 5 de abril de 2022 11:57
    terça-feira, 5 de abril de 2022 11:56