JSFiddle - React, Tailwind, and code Playground

by rbastida

HTML

<body>
  <div class="wrapper">

    <!-- Sidebar  -->
    <nav id="sidebar">
      <div class="sidebar-header">
        <h3>Estagiarios</h3>
      </div>

      <ul class="list-unstyled components">
        <p>Início</p>
        <li class="active">
          <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Requisições</a>
          <ul class="collapse list-unstyled" id="homeSubmenu">
            <li>
              <a href="requisicao_cadastra.php">cadastra</a>
            </li>
            <li>
              <a href="">altera</a>
            </li>
            <li>
              <a href="">exclui</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Encaminhamento</a>
          <ul class="collapse list-unstyled" id="pageSubmenu">
            <li>
              <a href="">cadastra</a>
            </li>
            <li>
              <a href="">altera</a>
            </li>
            <li>
              <a href="">exclui</a>
            </li>
            <li>
              <a href="">opcao4</a>
            </li>
          </ul>
        </li>
      </ul>

      <ul class="list-unstyled CTAs">
        <li>
          <a href="#" class="article">Sobre</a>
        </li>
      </ul>
    </nav>


    $(document).ready(function () { $('#MyModal .btn-default').click(function () { alert('clicou para fechar modal nu protocolo'); // $('#nu_protocolo').focus(); });








    <!-- Page Content  -->
    <div id="content">

      <div id="responsecontainer">
      </div>

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">

          <button type="button" id="sidebarCollapse" class="btn btn-info">
                            <i class="fas fa-align-left"></i>
                            <span>Desliza barra lateral</span>
                        </button>
          <button...

JavaScript

$('#enviar_requisicao').click(function() {

                      checa_dados();

                      var dados =
                        'nu_protocolo=' + $('#nu_protocolo').val() +
                        '&dt_protocolo=' + $('#dt_protocolo').val() +
                        '&cd_secretaria=' + $('#cd_secretaria').val() +
                        '&cd_tp_contrato=' + $('#cd_tp_contrato').val() +
                        '&cd_curso=' + $('#cd_curso').val() +
                        '&qt_estagiario=' + $('#qt_estagiario').val() +
                        '&nu_matricula_supervisor=' + $('#nu_matricula_supervisor').val() +
                        '&cd_lotacao_estagiario=' + $('#cd_lotacao_estagiario').val() +
                        '&form_enviado=' + $('#form_enviado').val();



                      var tem_id_estagio_definido = $('#id_local_estagio').length;

                      if (tem_id_estagio_definido == 1) {

                        var dados = dados + '&id_local_estagio=' + $('#id_local_estagio').val();

                      } else {

                        var dados = dados + '&nm_local_estagio=' + $('#nm_local_estagio').val() + '&nu_andar=' + $('#nu_andar').val();

                      }

                      $.ajax({
                        type: 'POST',
                        dataType: 'text',
                        url: 'requisicao_cadastra_salvar.php',
                        async: true,
                        data: dados,
                        success: function(response) {

                          $('#myModal h4.modal-title').text('Cadastro de Requisições');
                          $('#myModal .modal-body p').text('tudo ok!');
                          $('#myModal .modal-footer .btn-primary').hide();
                          $('#MyModal').modal();



                        }
                      });
                    });



                    function checa_dados() {

                      var num_protocolo =...