Jquery placement bug

The issue here seems to be that you add bootstrap 4 to your page, and it auto adds jquery slim as the first script in the head, then you add App Connect, while building your page and using various components, they all add their .js files to the head.
Sometimes you realise 20 hours into your build that you need to do something that requires the full jquery, so you go to the App Structure and swap out the slim version for the full version, but the full version gets added under all the other scripts and causes errors until you manually move it back to the top of the head.

Which scripts are you referring to exactly?
Can you provide step by step explanation?

If I take one of my standard pages with this as the head section

<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxBrowser/dmxBrowser.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxFormatter/dmxFormatter.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Cantarell|Crimson+Text:400italic|Alegreya+Sans:300,300italic,500" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="style_bronpro_orders.css">
    <link rel="stylesheet" type="text/css" href="dmxAppConnect/dmxValidator/dmxValidator.css">
    <script type="text/javascript" src="dmxAppConnect/dmxValidator/dmxValidator.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Alert/dmxBootstrap4Alert.js"></script>
    <link rel="stylesheet" type="text/css" href="dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css">
</head>

And swap out jquery slim for jquery i get this result

<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxBrowser/dmxBrowser.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxFormatter/dmxFormatter.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Cantarell|Crimson+Text:400italic|Alegreya+Sans:300,300italic,500" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="style_bronpro_orders.css">
    <link rel="stylesheet" type="text/css" href="dmxAppConnect/dmxValidator/dmxValidator.css">
    <script type="text/javascript" src="dmxAppConnect/dmxValidator/dmxValidator.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Alert/dmxBootstrap4Alert.js"></script>
    <link rel="stylesheet" type="text/css" href="dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
</head>

It should make no difference to the working of the document. None of the JS that is listed prior to jQuery is dependent on jQuery. Only certain components of Bootstrap are dependent on jQuery, namely
image

Now that you have opened this Pandora’s box, how long will it be that we can use App Connect for Bootstrap/jQuery equivalents? I have already replaced Carousel with App Connect Slideshow and I have a faint suspicion that, once the workload has slowed, we will see more App Connect components coming our way. Goodbye jQuery! Goodbye Bootstrap??? Goodbye Foundation??? Hint, hint, hint. :sunglasses:

As a sidenote to @George : Please keep Adobe at bay.

Edit: Want to know more, Google Bootstrap Native or see https://github.com/thednp/bootstrap.native

1 Like

It think it was mainly my console log freaking out that scared me, the page looked ok, but the console was just errors, when i put jquery back to position 1 well then it was all happy again.

What was the console message?

I can not get it back to how it was, so this is the only errors i get now if i change the jquery to the end, sorry that error log was ages ago now.
Not worried about the slow network detected stuff I always have those, on my full duplex 1000 base-T ethernet network connect to a fibre router at 200mbps / 100mbps, don’t quite know how much more network speed Chrome wants.

Yes the bootstrap 4 nav js requires jQuery indeed.
I will check what is wrong with the includes order.

1 Like