Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I am trying to get the twitter bootstrap framework running on our sharepoint 2013 intranet page. When I'm editing the page, the code is working as expected. After saving the web part page, the functionality is not there any more. This example with the navigation bar below is losing the drop-down effect.

I tried both the embedded code functionality and the content script web part, the behaviour is the same.

The bootstrap.js, the jquery.js and optionally testing with html5shiv.js to enable IE for html5 are included with script tags in a custom master page:

<SharePoint:CssRegistration Name="/_catalogs/masterpage/sbit/bootstrap/css/bootstrap.css"     
runat="server" />
<!--[if IE 9]>
<script src="/_catalogs/masterpage/sbit/bootstrap/js/html5shiv.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/_catalogs/masterpage/sbit/bootstrap/js/bootstrap.min.js"></script>

and my web part (embedded code) looks like:

<div class="navbar">
  <div class="navbar-inner">
     <ul class="nav" role="navigation">
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop1" role="button" href="#" data-toggle="dropdown">Kunde 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
              <li> 
                 <a tabindex="-1" href="http://google.de/" target="_blank">Bilder</a></li>
              <li> 
                 <a tabindex="-1" href="http://google.de/" target="_blank">Relevante Dokumente</a></li>
              <li class="divider">
              </li>
              <li> 
                 <a tabindex="-1" href="http://google.de/" target="_blank">IP- und Zugangsliste</a></li>
           </ul>
        </li>
        <li>
           <a href="#domaene">Domäne</a> </li>
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop3" role="button" href="#" data-toggle="dropdown">Netzwerk 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
              <li> 
                 <a tabindex="-1" href="#firewall">Firewall</a></li>
              <li> 
                 <a tabindex="-1" href="#switche">Switche</a></li>
              <li> 
                 <a tabindex="-1" href="#hosting">Webhosting</a></li>
           </ul>
        </li>
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop4" role="button" href="#" data-toggle="dropdown">Dienste 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop4">
              <li> 
                 <a tabindex="-1" href="#">Antivirus</a></li>
              <li> 
                 <a tabindex="-1" href="#">Backup</a></li>
              <li> 
                 <a tabindex="-1" href="#">E-Mail</a></li>
              <li> 
                 <a tabindex="-1" href="#">FTP</a></li>
           </ul>
        </li>
        <li> 
           <a href="#">Software</a></li>
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop5" role="button" href="#" data-toggle="dropdown">Peripherie 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop5">
              <li> 
                 <a tabindex="-1" href="#druckserver">Druckserver</a></li>
              <li> 
                 <a tabindex="-1" href="#etikettendrucker">Etikettendrucker</a></li>
           </ul>
        </li>
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop5" role="button" href="#" data-toggle="dropdown">Dienstleister 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop5">
              <li> 
                 <a tabindex="-1" href="#bechtle">Bechtle</a></li>
           </ul>
        </li>
     </ul>
  </div>
</div>
share|improve this question
add comment

3 Answers 3

It appears you could be running into trouble with your Intranet site trying to get out to the Internet site you list for the jquery-latest.js.

I would download that script, and upload it to SharePoint. Also, make sure the masterpage is checked in, as well as any other assets you added.

share|improve this answer
add comment

The thing that fixed it for me was my <script> where missing type="text/javascript" I am adding script inside a ContextEditor webpart. Once I added that to my code it started working.

share|improve this answer
    
Surprised you don't have more upvotes. This solved it for me. Thank you! –  jjr2527 Apr 28 at 11:33
add comment

If javascript works only in edit mode and after save javascript doesn't work, try add this row to oslo.master or seatle.master
SharePoint:ScriptLink ID="SPScriptLink" runat="server" LoadAfterUI="true" Localizable="false" Name="sp.js" /

This row has solved my similar problem.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.