Skip to content

Interesting Widget code, but can't fetch API

Solved Customisation
26 2 5.8k 1
  • @Panda yes, but you are missing the point here. I need to see the output of the browser console or at least insert something like the below to return it

    alert(console.log)

    It’s 1:17am here and I’m not in front of a PC, but will check tomorrow.

    To eliminate any confusion I made a simpler widget which just does hardcoded API call for image of a cat. No user input etc
    Again it runs stand alone, but returns quickly, empty, as a widget
    This example sits on aignite.nodebb.com category 8 (‘Diamond’)
    First example is still in category 10 (‘3d’)

  • To eliminate any confusion I made a simpler widget which just does hardcoded API call for image of a cat. No user input etc
    Again it runs stand alone, but returns quickly, empty, as a widget
    This example sits on aignite.nodebb.com category 8 (‘Diamond’)
    First example is still in category 10 (‘3d’)

    @Panda the result=undefined says it all. It still returns null and we need to see the error in the browser console.

  • To eliminate any confusion I made a simpler widget which just does hardcoded API call for image of a cat. No user input etc
    Again it runs stand alone, but returns quickly, empty, as a widget
    This example sits on aignite.nodebb.com category 8 (‘Diamond’)
    First example is still in category 10 (‘3d’)

    @Panda Just looking at this, and it seems that the service expects authentication

    49e50e3b-9744-49ef-b524-197f00c07c0b-image.png

    I also see the below in the console

    Failed to load resource: the server responded with a status of 401 (Unauthorized)
    GET data:image/png;base64,undefined net::ERR_INVALID_URL
    {"code":401,"message":"error occurred during proxy authentication: no token in request"}
    
  • Yes. There is a key included and the exact code works as stand-alone, thats why Im wonderinging why not working in a widget

  • Yes. There is a key included and the exact code works as stand-alone, thats why Im wonderinging why not working in a widget

    @Panda I think this might have something to do with the reverse proxy that nginx runs for NodeBB. Do you use this, or are you using something else?

  • @Panda I think this might have something to do with the reverse proxy that nginx runs for NodeBB. Do you use this, or are you using something else?

    @phenomlab ah! Its nodebb hosted site, so they do all that

  • Pandaundefined Panda has marked this topic as solved on
  • @Panda I think this might have something to do with the reverse proxy that nginx runs for NodeBB. Do you use this, or are you using something else?

    @phenomlab
    Two things

    1. this particular forum had plans to integrate tools which use API calls into widgets.
      Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    2. General forum question: because there were few ‘Red Herrings’ while exploring this issue, I was tempted to tidy up this thread by deleting some of the erroneous comments.
      I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

  • @phenomlab
    Two things

    1. this particular forum had plans to integrate tools which use API calls into widgets.
      Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    2. General forum question: because there were few ‘Red Herrings’ while exploring this issue, I was tempted to tidy up this thread by deleting some of the erroneous comments.
      I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

    @Panda said in Interesting Widget code, but can’t fetch API:

    this particular forum had plans to integrate tools which use API calls into widgets.
    Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    Actually, yes. I had a similar issue with the below (which you might enjoy also) when running in a page widget

    https://sudonix.org/cbg

    For this to work, I needed to call the script externally, and so used the below widget code as a guide

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <style>
    .cbgresult {
        margin: 10px 0 15px 0;
        padding: 15px;
        border-radius: 6px;
        font-family: "Source Code Pro", Menlo,Monaco,Consolas,"Courier New",monospace;
        font-size: 2rem;
        text-align: center;
        background: var(--bs-code-block) !important;
    }
    .cbgresult:after {
    content: '"';
    }
    .cbgresult:before {
    content: '"';
    }
    .cbgheader {
        margin-top: 40px;
        text-align: center;
    }
    .generate {
        text-align: center;
    }
    </style>
    <script src="/assets/js/cbg.js"></script>
    <div class="cbgheader">
    <h2>Corporate BS Generator</h2>
    <p>
    Need a better sounding line? Just click the "Generate Another" button to get another killer phrase.
    </p>
    </div>
    <div id="cbg" class="cbgresult"></div>
    <div class="generate">
    <button id="reloadme" class="btn btn-primary">Generate Another</button>
    </div>
    <script>
    $(function() { // after page load
        $('.cbgresult').fadeOut(0, function() {
        $("#cbg").show();
            $(this).html(phrase());
       });
    });
    $(document).ready(function(){
    $("#cbg").show();
        $('#reloadme').click(function(){
     $("#cbg").html(phrase());
        });
    });
    </script>
    

    @Panda said in Interesting Widget code, but can't fetch API:

    I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

    This is correct. Posts can only be deleted before a set time period elapses, which is 30 minutes

    915f61df-01e9-40bb-9e9f-937abb2e1494-image.png

    The intention here is to give you sufficient time to remove something you feel wasn’t relevant, or you really shouldn’t have posted (see policies), but for the sake of conversational flow, posts are then indelible because they add weight and value to the overall thread. For example, if you reference a comment in the thread, but that particular post is deleted, then the discussion becomes diluted.

    Using this approach, it makes it easier for anyone else with a similar issue to see how we resolved it.

  • phenomlabundefined phenomlab has marked this topic as unsolved on
  • @Panda said in Interesting Widget code, but can’t fetch API:

    this particular forum had plans to integrate tools which use API calls into widgets.
    Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    Actually, yes. I had a similar issue with the below (which you might enjoy also) when running in a page widget

    https://sudonix.org/cbg

    For this to work, I needed to call the script externally, and so used the below widget code as a guide

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <style>
    .cbgresult {
        margin: 10px 0 15px 0;
        padding: 15px;
        border-radius: 6px;
        font-family: "Source Code Pro", Menlo,Monaco,Consolas,"Courier New",monospace;
        font-size: 2rem;
        text-align: center;
        background: var(--bs-code-block) !important;
    }
    .cbgresult:after {
    content: '"';
    }
    .cbgresult:before {
    content: '"';
    }
    .cbgheader {
        margin-top: 40px;
        text-align: center;
    }
    .generate {
        text-align: center;
    }
    </style>
    <script src="/assets/js/cbg.js"></script>
    <div class="cbgheader">
    <h2>Corporate BS Generator</h2>
    <p>
    Need a better sounding line? Just click the "Generate Another" button to get another killer phrase.
    </p>
    </div>
    <div id="cbg" class="cbgresult"></div>
    <div class="generate">
    <button id="reloadme" class="btn btn-primary">Generate Another</button>
    </div>
    <script>
    $(function() { // after page load
        $('.cbgresult').fadeOut(0, function() {
        $("#cbg").show();
            $(this).html(phrase());
       });
    });
    $(document).ready(function(){
    $("#cbg").show();
        $('#reloadme').click(function(){
     $("#cbg").html(phrase());
        });
    });
    </script>
    

    @Panda said in Interesting Widget code, but can't fetch API:

    I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

    This is correct. Posts can only be deleted before a set time period elapses, which is 30 minutes

    915f61df-01e9-40bb-9e9f-937abb2e1494-image.png

    The intention here is to give you sufficient time to remove something you feel wasn’t relevant, or you really shouldn’t have posted (see policies), but for the sake of conversational flow, posts are then indelible because they add weight and value to the overall thread. For example, if you reference a comment in the thread, but that particular post is deleted, then the discussion becomes diluted.

    Using this approach, it makes it easier for anyone else with a similar issue to see how we resolved it.

    @phenomlab
    That is interesting code example!
    It raises new question
    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

  • @phenomlab
    That is interesting code example!
    It raises new question
    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    @Panda said in Interesting Widget code, but can’t fetch API:

    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Yes, here

    https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044

    It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets.

    @Panda said in Interesting Widget code, but can’t fetch API:

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget.

    Hope this makes sense?

  • Pandaundefined Panda has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • 3 Votes
    6 Posts
    2k Views
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • NodeBB socket with CloudFlare

    Unsolved Performance socket cloudflare nodebb
    23
    1 Votes
    23 Posts
    7k Views
    @DownPW it’s your only realistic option at this stage.
  • www. Infront stops website access?

    Solved Configure nodebb
    10
    1 Votes
    10 Posts
    1k Views
    @Panda because there is no match for the DNS entry specified. The receiving web server parses the headers looking for a destination hostname to match, and anything the web server is unable to resolve will be sent back to the root.
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    844 Views
    @Panda said in Nodebb design: One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum. From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over. @Panda said in Nodebb design: The “write api” is preferred for server-to-server interactions. This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write. A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase. You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.
  • Sidebar Widget is no longer on the side!

    Moved Solved General nodebb
    4
    2
    2 Votes
    4 Posts
    839 Views
    @Panda said in Sidebar Widget is no longer on the side!: Ah, so sidebar wont work on mobile? Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system https://getbootstrap.com/docs/5.0/layout/grid/ What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.
  • Fresher in Nodebb install

    General nodebb
    24
    15 Votes
    24 Posts
    6k Views
    @Hari I’ve been reading a lot about APO. Looks impressive.
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    1k Views
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • CSS codes for fa-info icon

    Solved Customisation nodebb
    9
    1
    6 Votes
    9 Posts
    2k Views
    I have just figured it out… it can be targeted with text-decoration-color: I was mistakenly using color