jquery with bootstrap is not working - Using Umbraco 7

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Priya Kumaresh 6 posts 76 karma points

Dec 24, 2015 @ 02:27

0

jquery

Hello,

Please guide how to work with bootstrap collapse and image slider- carousel in Umbraco. I added the javascript files and bootstrap files in master template and I added the html code in the home page content part.

These files are working fine in the normal html page. But when coming to Umbraco, its not working.

Copy Link
gary 385 posts 916 karma points

Dec 24, 2015 @ 08:31

1

Hi Priya

Can you post some code, it will be much easier for someone to help you if we can see your template code.

Regards

Gary

Copy Link
Priya Kumaresh 6 posts 76 karma points

Dec 24, 2015 @ 10:18
0
I added these in the head tags

at the bottom of the master.cshml(template)
```
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
```
```
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
```
```
<script type="text/javascript" src="/scripts/fanoe.js"></script>
```
```
<script type="text/javascript" src="/scripts/jquery-1.10.2.js"></script>
```
```
<script type="text/javascript" src="/scripts/bootstrap.js"></script>
```
and I try to add the collapse from bootstrap code and it has follows

Content here

it not even shows the "content here" text. when I do this in normal html, i got it. The site which I couldn't get is "demo08.kiranow.com"
Copy Link
Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib

Dec 24, 2015 @ 10:22

0

Hi Priya

JQuery is not loading on your page 'unexpected token :'

bootstrap relies on JQuery and so doesn't load, and your collapse doesn't work...

Copy Link

Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib

Dec 24, 2015 @ 10:25

It could be the ordering your scripts are loading; you have:

<script type="text/javascript" src="/scripts/jquery.min.js"></script>

<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/fanoe.js"></script>

<script type="text/javascript" src="/scripts/jquery-1.10.2.js"></script>

<script type="text/javascript" src="/scripts/bootstrap.js"></script>

but Jquery.min.js is just a minified version of jquery, which you load again after the fanoe.js, and similarly you have bootstrap twice...

try just:

<script type="text/javascript" src="/scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/scripts/bootstrap.js"></script>
    <script type="text/javascript" src="/scripts/fanoe.js"></script>

ie remove the minified versions 'for now' and see if that resolves the issue...

Copy Link

Priya Kumaresh 6 posts 76 karma points

Dec 25, 2015 @ 15:22
0
No its not working. I changed my whole master.cshtml like this

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ Layout = null; var home = @CurrentPage.Site(); }
```
<script src="/Scripts/jquery-1.10.2.js"></script>
```
```
<script src="/Scripts/bootstrap.js"></script>
```
```
<script>
  $( document ).ready(function() {
   // $("#myModal").modal();
});
  </script>
```
Content here
```
<br/><br/><br/><br/><br/><br/>

 @RenderBody()
```
but still it doesn't work
Copy Link
is working on a reply...

Please Sign in or register to post replies