0

In bootstrap documentation get started they say you should embed the libraries like jQuery in the end of the body like in the code of the example but many thing stop to work in this way and user is limited

<html>
    <head>
        <link rel="stylesheet" href="bootstrap.css">
        <link rel="stylesheet" href="your-other-styles.css">
    </head>
    <body>
        <!-- content -->
        <script src="jquery.js"></script>
        <script src="bootstrap.js"></script>
        <script src="your-other-scripts.js"></script>
    </body>
</html>

The real problem of putting the files as they say in the guide (end of the body) is if you are in a cms or in a situation you source code is saved in the hmtl before the declaration (since the user use the editor of html and don't control where the code end) it simply don't work, especially if user try to add other libraries like jQuery plugin from the editor (ui for example), they don't work also if you use defer trying to change the position of these libraries, since they need jQuery in order to work that is declared after, also your code need jQuery or you get a error in the console browser when you try to use jQuery syntax.

second problem you get is when you try to add again the jQuery in the position you can write inside the cms, before adding the ui javascript library or similar, here you declare two times jQuery, and don't work again, since you get an error in console browser of jQuery deferred exception probably because you declared two times jQuery.

So, what happen here is that if you can't write where you want, there is no way your code works if you want to add something, only way I found is put again everything in the head as was always been.

I haven't find a way to leave the libraries declared in the end of the body as they suggested (as all the world seem recently suggest) and make possible a user do something writing first of this part and adding new libraries to the structure, you limit strongly what is possible do if you declare everything in the end of the body, nothing of this happen declaring things in the head

So, I ask:

  1. what really happen if you embed the main libraries in the head instead of the end of the body since in this way everything work as usual and I see really no difference.

  2. what is the official way to keep these libraries in the end of the body as bootstramp4 get started suggest and make things work for a user upload in the editor the source code and new libraries (ui for example for tab and accordion) and get problems I described

Thanks

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
ANDY LOL
  • 11
  • 1
  • Possible duplicate of [Javascript - head, body or jQuery?](https://stackoverflow.com/questions/10994335/javascript-head-body-or-jquery) – Martin Zeitler Dec 22 '18 at 01:46

1 Answers1

0

I solved in this way: I tested using ui jquery library (for tab and accordion)

I used defer - async only in the library is in the body that come from editor (the js of ui in the test) so before the end ot the body, this probably put the library in the end of the body after the other libraries declared in the same way described by the guide and the topic (end of body).

In order to use jquery before the declaration i put it in a window load function

window.onload = function () { myjquery code to initialize accordion - tabs }

Test works, I'm going to check browser compatibility and possibility there are more windows functions in the same page that I think is not possible

It's solution I don't like very much, I still think in some situations is betetr put libraries in the head

ANDY LOL
  • 11
  • 1