Showing Widget on topic in category

eeeee

I encountered this issue before but have forgotten how I got round it. The menu doesn't work as expected.
I have a widget, I want it to show on say topic 13 under category 17
i put both of those numbers in the category.tpl widget setting and the widget doesn't show anywhere.

I did also try just putting the topic number and leaving category blank, but that doesn't show it either?
However it does show if I just put category 17, and then leave topic blank, and it shows on every page in that category

eeeee

Update, fixed that.
Should have used topic.tpl

It was having the topic box as an option in category.tpl that confused the situation.
But it appears that's a redundant field in that setting?

eeeee

Another issue that Ive encountered before, but forgot how to get round.
The widget is a link to a quiz, it seems to load 50% of the time!
Sometimes nothing shows.
I think its to do with timing of when page loads and when link loads.
Whats easyest way to make sure page is loaded before widget runs?

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.