jQuery does not work on App Electron

Navigation
1

I'm creating an Electron application just study, but I'm encountering a problem.

I created a simple html page, using the Bootstrap 4.0 framework, I just put a menu in it.

  

index.html 

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
          <!--a class="navbar-brand" href="#">Navbar</a-->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Arquivos</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Configurações</a>
                  </li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                  <li class="nav-item dropdown">
                      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
                          <i class="fa fa-user" aria-hidden="true"></i>
                          <strong>wmsouza</strong>
                          <span class="glyphicon glyphicon-chevron-down"></span>
                      </a>
                      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                          <div class="navbar-login">
                              <div class="row">
                                  <div class="col-lg-4">
                                      <p class="text-center">
                                          <i class="fa fa-user icon-size" aria-hidden="true"></i>
                                      </p>
                                  </div>
                                  <div class="col-lg-8">
                                      <p class="text-left"><strong>Wéllingthon Motta</strong></p>
                                      <p class="text-left small">[email protected]</p>
                                      <p class="text-left">
                                          <a href="#" class="btn btn-primary btn-block btn-sm">Atualizar dados</a>
                                      </p>
                                  </div>
                              </div>
                          </div>
                              <div class="navbar-login navbar-login-session">
                                  <div class="row">
                                      <div class="col-lg-12">
                                          <p>
                                              <a href="#" class="btn btn-danger btn-block">Sair</a>
                                          </p>
                                      </div>
                                  </div>
                              </div>
                      </div>
                  </li>
              </ul>
          </div>
      </div>
  </nav>

Add the required scripts . 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Done by opening the index.html file in the browser, it works perfectly.

Moreinexecutingintheapplication,thedropdownmethoddoesnotworkandreturnsanerrorintheconsolesayingthatBootstrapneedsjQuery.

  

UncaughtError:Bootstrap'sJavaScriptrequiresjQuery.jQuerymustbeincludedbeforeBootstrap'sJavaScript.      atbootstrap.min.js:6  (anonymous)@bootstrap.min.js:6

ButontheNetworktab,itshowsthatjQueryhasbeenloaded.

What could be happening?

    
asked by anonymous 04.10.2017 / 06:08

1 answer

2

So I understand that Eletron uses node.js or jQuery ends up working as if it were not running in a browser, so instead of jQuery being accessible in the scope of window. it is only accessible in scope of global. or just using require() , this because of this excerpt: 

if ( typeof module === "object" && typeof module.exports === "object" ) {

    // For CommonJS and CommonJS-like environments where a proper 'window'
    // is present, execute the factory and get jQuery.
    // For environments that do not have a 'window' with a 'document'
    // (such as Node.js), expose a factory as module.exports.
    // This accentuates the need for the creation of a real 'window'.
    // e.g. var jQuery = require("jquery")(window);
    // See ticket #14549 for more info.
    module.exports = global.document ?
        factory( global, true ) :
        function( w ) {
            if ( !w.document ) {
                throw new Error( "jQuery requires a window with a document" );
            }
            return factory( w );
        };
} else {
    factory( global );
}

I believe that by adding via <script> you will already have it available in the modules, so you can add it to window. : 

window.$ = window.jQuery = require("jquery");

However you can also choose to download features and use them like this: 

window.$ = window.jQuery = require('./caminho/pasta/js/jquery-3.2.1.slim.min.js');
  

./caminho/pasta/js is just an example

Instead of using CDNs, even though it's an application it might be interesting to have offline

    
04.10.2017 / 06:59
How to convert string to int type in c How to use AppCompatActivity functions inside a Fragment? [duplicate]