CODEWITHSUNDEEP
javascriptsignalr
Jane Ortega
Jane Ortega

Reputation: 87

SignalR proper script placement

ok so I decided to post another question (separate from my other one/edited it. this one is more on ordering of scripts).

So my problem is this: I have this at the header

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

then at the bottom I got:

<script src="assets/js/app.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.10.2.min.js" ></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.--> 

  
</form>

Problem is I don't know where to correctly place the scripts/proper ordering placing signalR at the very bottom removes my Navbar/animations/transitions which is in scripts.js, placing the signalR above it will fix the Navbar issue but the signalR will stop working.

Upvotes: 1

Views: 109

Answers (1)

Frank M
Frank M

Reputation: 1439

First thing I see is that you have 2 different versions of jQuery loaded.

At the top -

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

At the bottom -

<script src="Scripts/jquery-1.10.2.min.js" ></script>

You should only have 1 version. This is probably causing most of your issues. You may have some other conflicts running both bootstrap and jquery-ui (not validated) if similar js/css is applied between both. You may want to search for conflicts and see what impacts you.

As far as order goes load:

  1. jQuery-x.x.x.min.js
  2. bootstrap.min.js
  3. jquery-ui.js
  4. signalR-2.1.2.min.js
  5. signalr/hubs

Upvotes: 1

Related Questions