Geek Answers Handbook

Bootstrap is not working in Outlook 365 Unfolded superstructure Office

I'm trying to implement a tab Bootstrap 3 app for Office, but I keep getting the following exception:

Unhandled exception at line 1453, column 2 in https://localhost:44303/Scripts/jquery-2.1.3.js

0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: #profile&_xdm_Info=null|null|null

Based on this, it seems that Outlook 365 adds &_xdm_Info=null|null|null, but I do not understand why, how and what to do with it, if it's true.

Here is an example of a simplified Home.html, to illustrate the problem. Please note that this will work properly JSFiddle or Bootply .

<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title></title>
<script src="../../Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<link href="../../Content/bootstrap.css" rel="stylesheet" type="text/css"/>

<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.js" type="text/javascript"></script>

<link href="../App.css" rel="stylesheet" type="text/css"/>
<script src="../App.js" type="text/javascript"></script>

<link href="Home.css" rel="stylesheet" type="text/css"/>
<script src="Home.js" type="text/javascript"></script>
</head>
<body>

<div id="content-main">
    <!--<div class="padding">-->
    <ul class="nav nav-pills">
        <li class="active">
            <a href="#home" data-toggle="tab">Home</a>
        </li>
        <li>
            <a href="#profile" data-toggle="tab">Profile</a>
        </li>
        <li>
            <a href="#messages" data-toggle="tab">Messages</a>
        </li>
    </ul>

    <div id='content' class="tab-content">
        <div class="tab-pane active" id="home">
            <ul>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
            </ul>
        </div>
        <div class="tab-pane" id="profile">
            <ul>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
            </ul>
        </div>
        <div class="tab-pane" id="messages">
        </div>
    </div>
</div>
</body>
</html>

Here is my call stack →

    Sizzle.error [jquery-2.1.3.js] Line 1453    Script
    Sizzle.tokenize [jquery-2.1.3.js] Line 2067 Script
    Sizzle.select [jquery-2.1.3.js] Line 2474   Script
    Sizzle [jquery-2.1.3.js] Line 850   Script
    find [jquery-2.1.3.js] Line 2690    Script
    jQuery.fn.init [jquery-2.1.3.js] Line 2798  Script
    jQuery [jquery-2.1.3.js] Line 76    Script
    Tab.prototype.show [bootstrap.js] Line 2050 Script
    Anonymous function [bootstrap.js] Line 2123 Script
    each [jquery-2.1.3.js] Line 374 Script
    jQuery.prototype.each [jquery-2.1.3.js] Line 139    Script
    Plugin [bootstrap.js] Line 2118 Script
    clickHandler [bootstrap.js] Line 2147   Script
    jQuery.event.dispatch [jquery-2.1.3.js] Line 4429   Script
    elemData.handle [jquery-2.1.3.js] Line 4115 Script
+4
source share
1 answer

TL; DR:. , <a data-target="#profile"> <a href="#profile">

: Office office.js, , - - (, Outlook). , URL- (, _xdm_Info), -.

, Bootstrap <a> , , , , , HTML. , , - , href <a> , URL-.

Bootstrap tab.js:

Tab.prototype.show = function () {
    var $this    = this.element
    var $ul      = $this.closest('ul:not(.dropdown-menu)')
    var selector = $this.data('target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}

, , , data-target , href. , href, #profile&_xdm_Info=null|null|null #profile. var $target = $(selector) jQuery Sizzle , CSS.

data-target. , , , , .

: , , , _xdm_Info URL-. IIRC, Bootstrap - Javascript/jQuery, href CSS , , . , .

EDIT: , Office . , href . , , -. office.js , ,

+2

More articles:


All Articles