Showing Widget on topic in category

phenomlab

@eeeee that should work, but you may need to alter it slightly. For example, I do it this way on Sudonix

<script src="/assets/js/cbg.js"></script>
<script type="text/javascript">
    (function () {
        function cbg() {
            $('.cbgresult').fadeOut(0, function () {
                $("#cbg").show();
                $(this).html(phrase());
            });
            $(document).ready(function () {
                $("#cbg").show();
                $('#reloadme').click(function () {
                    $("#cbg").html(phrase());
                });
            });
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', cbg);
        } else {
            cbg();
        }
    })();
</script>

eeeee

Gosh, I prefer the first one, you know I dont do $ JQuery stuff lol.
Ive always wondered how to put script tags within a script though.
Is there way to do it without using $ commands?

Im going to try the above but where do I put the link I want to open?

phenomlab

@eeeee on reflection, I think I'd refractor your script so it looks like this

function docReady(fn) {
    // Check if the DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        fn();
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

docReady(function() {
    // Create a script element
    var script = document.createElement("script");
    script.src = "https://www.classmarker.com/public/js/embed-classmarker-1.0.0.js?quiz=gag66aea7922f0a5";
    script.setAttribute("data-quiz", "gag66aea7922f0a5");
    script.setAttribute("data-width", "700");
    script.setAttribute("data-height", "800");
    
    // Append the script to the body
    document.body.appendChild(script);
});

Try this and see how you get on.

eeeee

Thanks, but no it doesnt show anything

phenomlab

@eeeee try this modified version, which adds a console log so you should see output in the developer console

docReady(function() {
    console.log("Document is ready, appending script...");
    var script = document.createElement("script");
    script.src = "https://www.classmarker.com/public/js/embed-classmarker-1.0.0.js?quiz=gag66aea7922f0a5";
    script.setAttribute("data-quiz", "gag66aea7922f0a5");
    script.setAttribute("data-width", "700");
    script.setAttribute("data-height", "800");
    
    document.body.appendChild(script);
});

Let me know what the output is.

eeeee

This post is deleted!

phenomlab

Actually, try this one. It has error handling and may provide better results

function docReady(fn) {
    if (document.readyState === "complete") {
        fn();
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}
 
docReady(function() {
    // Create a script element
    var script = document.createElement("script");
    script.src = "https://www.classmarker.com/public/js/embed-classmarker-1.0.0.js?quiz=gag66aea7922f0a5";
    script.setAttribute("data-quiz", "gag66aea7922f0a5");
    script.setAttribute("data-width", "700");
    script.setAttribute("data-height", "800");

    // Error handling
    script.onerror = function() {
        console.error("Failed to load the script.");
    };
    
    // Append the script to the body
    document.body.appendChild(script);
});

phenomlab

This is resolved - see

https://sudonix.org/topic/659/opening-links-in-nodebb-widget/2

It's a relatively simple fix that involves using a native iframe rather than an over complicated script block

eeeee

Thanks for the fix, I like simple solutions, but Im confused why this works?
I thought the problem was due to page loading timings, but probably not then, as why does iframe change that.
So Im appreciative of the solution but still perplexed why the direct embed link didnt work much of the time?

phenomlab

@eeeee The embedded link via <script> does not work all of the time as it is only set to trigger onLoad whereas the <iframe> solution will work every time because it needs to call the remote source. NodeBB loads all assets onLoad as an SPA (Single Page Application) and will not make any further calls to remote sites unless requested by an ajax request.

This is why the <script> embed will always work when you press F5 as the entire site is being loaded, but not when the links are clicked as there is no ajax request.