Recently, I was working on some third-party widget integration where the content of widget was loaded after the page load. We were having the requirement of customising the content that was loaded in the widget. Some of the requirements were like hiding some content, changing text of the buttons, etc.

In this article, we will see how we can achieve that with JavaScript repeat function.

JavaScript function which repeats after regular intervals for fixed number of times

var CustomizeWidget = {
    // repeatFunc: function which repeats after regular intervals for fixed number of times.
    repeatFunc: function (func, delay, iterations) {
        var x = 0;
        var id = window.setInterval(function () {
            func();
            x = x + 1;

            if (x === iterations) {
                window.clearInterval(id);
            }
        }, delay);

        return id;
    }
};

Customising/Modifying inline content loaded from third party widgets

var CustomizeWidget = {
    init: function () {
        CustomizeWidget.customize();
    },

    // repeatFunc: function which repeats after regular intervals for fixed number of times.
    repeatFunc: function (func, delay, iterations) {
        var x = 0;
        var id = window.setInterval(function () {
            func();
            x = x + 1;

            if (x === iterations) {
                window.clearInterval(id);
            }
        }, delay);

        return id;
    },

    // customize: function for customising/modifying inline content loaded from third party widgets.
    customize: function () {
        var interval = CustomizeWidget.repeatFunc(function () {
            // Changing button text & style.
            var widgetButtonID = $('#widgetButtonID');
            if (widgetButtonID.length > 0) {
                widgetButtonID.css({ "background-color": "yellow", "font-size": "200%" });
                widgetButtonID.html('Custom Button Text');

                // stop the repititions after, we are done with the changes.
                clearInterval(interval);
            }
        }, 100, 50);
    }
};

$(function () {
    CustomizeWidget.init();
});

That’s it. Happy coding !!!

Kapil Khandelwal

.NET Professional | Microsoft Certified Professional | DZone’s Most Valuable Blogger | Web Developer | Author | Blogger

Doctorate in Computer Science and Engineering

Microsoft Certified Professional (MCP) with over 12+ years of software industry experience including development, implementation & deployment of applications in the .NET framework

Experienced and skilled Agile Developer with a strong record of excellent teamwork, successful coding & project management. Specialises in problem identification and proposal of alternative solutions. Provided knowledge and individual mentoring to team members as needed

Among top 3% overall in terms of contribution on Stack Overflow (~2.3 million people reached my posts). Part of the top 1% Stack Overflow answerers in ASP.NET technology.

DZone’s Most Valuable Blogger (MVB)

Created and actively maintain the TechCartNow.com tech blog while also editing, writing, and researching topics for publication.

Excellent skills in Application Development using C#/Vb.Net, .NET Framework, ASP.NET, MVC, ADO.NET, WCF, WPF, Web API, SQL Server, jQuery, Angular, React, BackboneJS