template-url option not working about angular-bootstrap-tour HOT 9 CLOSED

Interesting, I haven't seen this error before. Can you paste in some relevant markup?

from angular-bootstrap-tour.

Well, markup is very simple. The html part is:

<div tour template-url="components/tour.html"></div>

components/tour.html is accessible, and successfully loaded via AJAX, I can see it in developer tools.

jquery version is 1.11.1 (I already tried 1.9.0 and 1.11.3)
angular version is 1.4.0 (and it's not easy to change it, I think)

Error appears after tour.restart(true) is triggered. The message I have in console:

Uncaught TypeError: Cannot read property 'ownerDocument' of undefined
ga.contains @ jquery.js:1468
m.extend.clone @ jquery.js:5515
(anonymous function) @ jquery.js:5843
(anonymous function) @ jquery.js:141
m.extend.map @ jquery.js:503
m.fn.m.map @ jquery.js:140
m.fn.extend.clone @ jquery.js:5842
Tour._showPopover @ bootstrap-tour-standalone.js:1049
(anonymous function) @ bootstrap-tour-standalone.js:879
(anonymous function) @ bootstrap-tour-standalone.js:1127
d.complete @ jquery.js:7474j @ jquery.js:3148
k.fireWith @ jquery.js:3260i @ jquery.js:7350
m.fx.tick @ jquery.js:7639

from angular-bootstrap-tour.

Is it making the request for the template, or is the template loaded into $templateCache already? Can you paste the template here?

from angular-bootstrap-tour.

It makes a request for template when page is loading. So, when tour is triggered, it is already in $templateCache. I can to get it with $templateCache.get('components/tour.html').

The template code is the same as the default bootstrap tour tempate

<div class="popover tour">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
    <div class="popover-navigation">
        <button class="btn btn-default" data-role="prev">« Prev</button>
        <span data-role="separator">|</span>
        <button class="btn btn-default" data-role="next">Next »</button>
    </div>
    <button class="btn btn-default" data-role="end">End tour</button>
    </nav>
</div>

from angular-bootstrap-tour.

I'm not sure if this is the problem, but you have a dangling tag at the bottom. It looks very similar to the one I'm using in production right now, and the setup is identical, so I'm a little surprised it's not working (unless that is causing a parse error). If that doesn't fix it, can you try setting a breakpoint in the TourHelpers where it loads the template and just see if the template is being loaded? It would be: https://github.com/benmarch/angular-bootstrap-tour/blob/master/app/tour_helpers.js#L56

from angular-bootstrap-tour.

Breakpoint information:

template: "<div class="popover tour">↵    <div class="arrow"></div>↵    <h3 class="popover-title"></h3>↵  <div class="popover-content"></div>↵  <div class="popover-navigation">↵     <button class="btn btn-default" data-role="prev">« Prev</button>↵        <span data-role="separator">|</span>↵     <button class="btn btn-default" data-role="next">Next »</button>↵    </div>↵   <button class="btn btn-default" data-role="end">End tour</button>↵</div>"

So I think it is loaded

from angular-bootstrap-tour.

I'm still not really sure what would cause this. The line that is failing is $template.clone().wrap("<div>").parent().html(), and $template is just $(step.template). I would recommend setting a breakpoint around that line (bootstrap-tour-standalone.js#1049) and stepping into the jquery clone function. It looks like when it gets to #contains() the context is undefined, but I'm not familiar enough with jquery to know why that would happen. From some of the SO threads i found, this might have something to do with a classname clash somewhere on your page, but that's a total shot in the dark. Sorry I can't do more to help you here, let me know if you find out anything else.

from angular-bootstrap-tour.

Actually, @valerypilyavets, can you try updating to version 0.3.4-rc.2 and let me know if that works for you?

from angular-bootstrap-tour.

Should be fixed as of 0.3.4. If not, please let me know. Thanks!

from angular-bootstrap-tour.