1

I've created a provider hosted-app for SharePoint and I've added a Web Part into the App to be able to view my app from the SharePoint host web.

In the app web of the project, I've included various javascript libraries :

  • jQuery
  • Angular and ngRoute
  • Trackpad scrol emulator and Isotope.js.
  • and Isotope.js

I deploy the app, and I place the web part into a SharePoint page. I can see my app working like a charm.

Now, if I refresh the page or I navigate and come back to see my web part, the library Isotope.js isn't loaded anymore (like it were kept in cache) but my app doesn't work anymore.

I found out that if I clear the cache of the browser, I can make it works normally.

I also found a good post about this here

but my scripts are not hosted on the host web but into the App web.

My questions is : why the others js libraries still working and not Isotope ? Besides the knowledge of this library, it should be the same for each js file of my app... Moreover, I disabled the MDS (Minimal Download Strategy) so pages are not kept in cache.

Thank you for any tips, we never stop to learn things on SP.

EDIT : When I debug the init of isotope with the Web browser toolkit JS debugger, it will WORK!! but not in normal execution. Is this need a delay to load something ...mh ...

  • such an incredible thing, i watched the network activity, and after a refresh without clearing the cache, there is not GET method to retrieve Isotope.js, but there's one when after the clear of the cache. And my app won't have the .js library dependan function working :( – Alex Jun 3 '15 at 14:24
  • Did you go further? I have a similar problem using plain JS scripts too. – Emaborsa Feb 20 at 8:34
1

It's my bad knowledge on Angular which led me to this issue :

My ng-repeat instruction wasn't finished while the isotope initialisation was made. To manipulate or initialize objects on the dynamically generated DOM when using Angular, you should use a directive. Here is the relevant part of my working code, with some explanations :

when creating my angular app, i'm adding a directive :

var App = angular.module('App', ['ngRoute']).directive('initIsotope', function () {
        return function (scope, element, attrs) {
            if (scope.$last === true) {
                scope.$emit('messagesLoaded');
            }
        }
    });

then, in my controller, i'm going to add an event listener like this :

$scope.$on('messagesLoaded', function (messagesLoadedEvent) {
            var $container = $("div#pro-tab");
            //init isotope
            $container.isotope({
                itemSelector: 'div.activity-message',
                layoutMode: 'vertical'
            });
        });

while i've got the following structure into my HTML :

<div class="activity-messages-content tse-content" >
                    <div id="{{message.id}}" class="activity-message" ng-class="setMessageClass(message.type)" ng-repeat="message in results" init-isotope="messagesLoaded"></div></div>

Basically, if I'm doing this, when the last element of my ng-repeat directive will be generated, it will emit an event called messagesLoaded. Then, I'm gonna listen to this event, and init isotope after I received it.

It's as simple as this, but the worst part was the debug time :(

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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