sharepoint 2013 / bootstrap.js / only working in edit mode

Question

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>

Answer 1

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.

Answer 2

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.