Skip to content

Interesting Widget code, but can't fetch API

Solved Customisation
  • 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.

  • @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

  • @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
  • @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
  • @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? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • 17 Votes
    34 Posts
    2k Views

    @phenomlab thank you very much, this was helpful. Everything looks ok 🙂

  • 2 Votes
    8 Posts
    259 Views

    @Panda you’d be surprised. If you consider that you’d need to use the API to be able to populate a WordPress widget for example (which in turn would of course be PHP), taking this route is still immensely popular.

  • Nodebb design

    Solved General
    2
    1 Votes
    2 Posts
    151 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.

  • Email validation NodeBB

    Bugs
    21
    3 Votes
    21 Posts
    927 Views

    @Panda said in Email validation NodeBB:

    Did you configure that as a custom change to the usual quote icon. How do you do that?
    I notice on NodeBB site its a solid blue quotes

    Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.

  • 0 Votes
    15 Posts
    691 Views

    @DownPW That was going to be my next suggestion 🙂

  • 1 Votes
    6 Posts
    458 Views

    @Hari not sure from the consumer perspective, but Skype has been all but completely consumed by Microsoft Teams when it comes to business usage.

  • CSS codes for fa-info icon

    Solved Customisation
    9
    6 Votes
    9 Posts
    499 Views

    I have just figured it out…

    it can be targeted with text-decoration-color:

    I was mistakenly using color

  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    2k Views

    @phenomlab brilliant, many thanks Mark 😁