Showing Widget on topic in category

phenomlab

@eeeee you should factor in document ready to ensure that your script will only fire once the page load has completed.

eeeee

Thanks, how would that be coded?

ChatGPT came up with a suggestion that works too,
"Load the script in the head: Instead of dynamically inserting the script, try placing it directly in the head section to see if that resolves the issue. This can ensure the script is loaded in a typical way:"
So putting <head> round it seems to make it load!

phenomlab

@eeeee I wouldn't place that in the <head> section in case the custom code interferes with nodebb in terms of execution. I'd wrap your script in something like the below

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

eeeee

yea, actually this Head method only working 70% of the time.
I will use your method.
Because my link is in a script tag, can I put a script tag in a function there?

eeeee

so can I have this

function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        <script src="https://www.classmarker.com/public/js/embed-classmarker-1.0.0.js?quiz=gag66aea7922f0a5" data-quiz="gag66aea7922f0a5" data-width="700" data-height="800" ></script>
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

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.