Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kevin T Reynolds 5 posts 98 karma points
    24 days ago
    Kevin T Reynolds
    0

    Ajax call in property editor not updating view until timeout

    I'm trying to create a property editor that accepts a url and gets some open graph tags from it.

    I created an API that returns the desired data as json and built a property editor to hit the api and store the data. I've got it all wired up but there is some sort of timeout for updating the view that I can't get over.

    The call hits the api and takes ~1s for the response, it updates the model but the backoffice takes ~15-20 seconds to update the view, this seems to be triggered by GetRemainingTimeoutSeconds getting initiated by angular, alternatively I can click inside the generated inputs and it updates the view, but that's clunky for the user.

    Has anyone had experience with something similar?

    Here's the controller

    angular.module("umbraco").controller("Lavidge.NewsArticleLinkController", [ '$scope', 'localizationService',
    function ($scope, localizationService) {
        function formatDate(dateString) {
            if (dateString === null) {
                return null;
            }
            var date = new Date(dateString);
    
            var year = date.getUTCFullYear();
            var month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
            var day = date.getUTCDate().toString().padStart(2, '0');
    
            return year + '-' + month + '-' + day;
        }
        function copyObjectProps(object) {
            var newObject = {};
    
            if (object && Object.keys(object).length) {
    
                for (var p = 0; p < Object.keys(object).length; p++) {
                    var key = Object.keys(object)[p];
                    var value = object[key];
    
                    newObject[key] = value;
                }
    
            }
            return newObject;
        }
        var UUID = function () {
            var self = {};
            var lut = [];
            for (var i = 0; i < 256; i++) {
                lut[i] = (i < 16 ? '0' : '') + i.toString(16);
            }
            self.generate = function () {
                var d0 = Math.random() * 4294967295 | 0;
                var d1 = Math.random() * 4294967295 | 0;
                var d2 = Math.random() * 4294967295 | 0;
                var d3 = Math.random() * 4294967295 | 0;
                return lut[d0 & 255] + lut[d0 >> 8 & 255] + lut[d0 >> 16 & 255] + lut[d0 >> 24 & 255] + '-' + lut[d1 & 255] + lut[d1 >> 8 & 255] + '-' + lut[d1 >> 16 & 15 | 64] + lut[d1 >> 24 & 255] + '-' + lut[d2 & 63 | 128] + lut[d2 >> 8 & 255] + '-' + lut[d2 >> 16 & 255] + lut[d2 >> 24 & 255] + lut[d3 & 255] + lut[d3 >> 8 & 255] + lut[d3 >> 16 & 255] + lut[d3 >> 24 & 255];
            };
            return self;
        }();
    
        var inited = false;
    
        $scope.editIconTitle = '';
        $scope.moveIconTitle = '';
        $scope.deleteIconTitle = '';
        // localize the edit icon title
        localizationService.localize('general_edit').then(function (value) {
            $scope.editIconTitle = value;
        });
        // localize the delete icon title
        localizationService.localize('general_delete').then(function (value) {
            $scope.deleteIconTitle = value;
        });
        // localize the move icon title
        localizationService.localize('actions_move').then(function (value) {
            $scope.moveIconTitle = value;
        });
    
        $scope.articles = [];
        $scope.currentUrl = undefined;
        $scope.currentNode = undefined;
    
        function init() {
            if ($scope.model.value === null || $scope.model.value === undefined || $scope.model.value === "") {
                $scope.model.value = [];
            }
            if ($scope.model.value.length) {
                for (var i = 0; i < $scope.model.value.length; i++) {
                    var item = $scope.model.value[i];
                    initArticle(item);
                }
    
                $scope.currentNode = $scope.articles[$scope.articles.length - 1];
            }
    
            inited = true;
        }
    
        function initArticle(values) {
            var article = copyObjectProps(values);
    
            if (!article.key) {
                article.key = UUID.generate();
            }
    
            $scope.articles.push(article);
            return article;
        }
    
        function updateModel() {
            if ($scope.realCurrentNode) {
                $scope.$broadcast('ncSyncVal', { key: $scope.realCurrentNode.key });
            }
            if (inited) {
                var newValues = [];
                for (var i = 0; i < $scope.articles.length; i++) {
                    var article = $scope.articles[i];
                    var newValue = copyObjectProps(article);
    
                    newValues.push(newValue);
                }
                $scope.model.value = newValues;
            }
        }
    
    
    
        $scope.addArticle = function () {
            var article = initArticle(null);
            $scope.currentNode = article;
            article.url = $scope.currentUrl;
    
            var endpoint = '/umbraco/api/parsemetatags/getalltags?url=' + $scope.currentUrl;
    
            $.ajax(endpoint)
                .done(function (json) {
    
                    if (json !== null) {
                        article.title = json.Title;
                        article.imageUrl = json.Image;
                        article.description = json.Description;
                        article.publishedDate = formatDate(json.Published);
                    }
                })
                .always(function () {
                    updateModel();
                });
        };
    
        $scope.editNode = function (index) {
            if (index >= 0 && index < $scope.articles.length) {
                $scope.currentNode = $scope.articles[index];
            }
    
            updateModel();
        };
    
        $scope.removeArticle = function (index) {
            if (index >= 0 && index < $scope.articles.length) {
                $scope.articles.splice(index, 1);
            }
    
            updateModel();
        };
    
        $scope.$watch('currentNode', function (newVal) {
            updateModel();
        });
        var unsubscribe = $scope.$on('formSubmitting', function (ev, args) {
            updateModel();
        });
        $scope.$on('$destroy', function () {
            unsubscribe();
        });
    
        init();
    }
    

    ]);

Please Sign in or register to post replies

Write your reply to:

Draft