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
    Priya Kumaresh
    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.

  • gary 385 posts 915 karma points
    Dec 24, 2015 @ 08:31
    gary
    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

  • Priya Kumaresh 6 posts 76 karma points
    Dec 24, 2015 @ 10:18
    Priya Kumaresh
    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"

  • Marc Goodson 1451 posts 9716 karma points MVP 5x c-trib
    Dec 24, 2015 @ 10:22
    Marc Goodson
    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...

  • Marc Goodson 1451 posts 9716 karma points MVP 5x c-trib
    Dec 24, 2015 @ 10:25
    Marc Goodson
    0

    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...

  • Priya Kumaresh 6 posts 76 karma points
    Dec 25, 2015 @ 15:22
    Priya Kumaresh
    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies