Load SC from javascript

Wappler General How To
#1

Hey All,

Looking for how to (re)load the data coming from server connect, triggered by a callback.

Specifically, this code works fine and is part of a broader script:

$.post('/dmxConnect/api/banks/addBank.php', {
       public_token: public_token, 
        metadata: metadata
        }, function(result) {alert(result);
});

Rather than the displaying an alert (just in here for testing,) I would like to refresh this connection:

    <dmx-serverconnect id="scGetBanks" url="dmxConnect/api/banks/getBanks.php"></dmx-serverconnect>

In other words, user adds a bank, refresh the list of banks.

Appreciate any help you can provide!

–Ken

1 Like
Pass dynamic data to JS function
Set variables from javascript (object)
Dynamic value in SCRIPT
2019: The Year in Review
#2

why are you using custom code, why not use the server connect success event and use server connection.load

1 Like
#3

Thanks for the quick help Brian. I’m very open to another way of doing this, but just need to trigger this client function, let it do its work, and then trigger on the onSuccess callback.

The entire script is here:

<script type="text/javascript">
  $(document).ready(function($) {
    var handler = Plaid.create({
      clientName: 'Tiny Opera House',
      // Optional, specify an array of ISO-3166-1 alpha-2 country
      // codes to initialize Link; European countries will have GDPR
      // consent panel
      countryCodes: ['US'],
      env: 'sandbox',
      // Replace with your public_key from the Dashboard
      key: 'REDACTED',
      product: ['transactions'],
      // Optional, use webhooks to get transaction and error updates
      webhook: 'https://requestb.in',
      // Optional, specify a language to localize Link
      language: 'en',
      // Optional, specify a user object to enable all Auth features
      user: {
        legalName: 'John Appleseed',
        emailAddress: 'jappleseed@yourapp.com',
      },
      onLoad: function() {
        // Optional, called when Link loads
      },
      onSuccess: function(public_token, metadata) {
        // Send the public_token to your app server.
        // The metadata object contains info about the institution the
        // user selected and the account ID or IDs, if the
        // Select Account view is enabled.

        $.post('/dmxConnect/api/banks/addBank.php', {
          public_token: public_token, 
          metadata: metadata
        }, function(result) {alert(result);
                            });
      },


      onExit: function(err, metadata) {
        // The user exited the Link flow.
        if (err != null) {
          // The user encountered a Plaid API error prior to exiting.
        }
        // metadata contains information about the institution
        // that the user selected and the most recent API request IDs.
        // Storing this information can be helpful for support.
      },
      onEvent: function(eventName, metadata) {
        // Optionally capture Link flow events, streamed through
        // this callback as your users connect an Item to Plaid.
        // For example:
        // eventName = "TRANSITION_VIEW"
        // metadata  = {
        //   link_session_id: "123-abc",
        //   mfa_type:        "questions",
        //   timestamp:       "2017-09-14T14:42:19.350Z",
        //   view_name:       "MFA",
        // }
      }
    });
    $('#plaidLinkBtn').on('click', function(e) {
      handler.open();
    });
  });
</script>
#4

Here’s how I “hack” calling server connect from JS.
From what I understand, you call a SC, which calls JS function on onsuccess static event and then you want to reload a SC.
Create a server connect form on the page and add a submit button to it.
When you JS function completes, invoke click event of submit button, which will cause the server connect form to get the bank list again.

Also, keep the form as auto-submit, so that it can fetch the data when page loads. (I’m not sure about this part, but it should work like so)

1 Like
#5

Thanks for confirming a form hack is needed here @sid. I’ll stop looking for something else!

I ended up with:

        <form id="formRefreshBanks" class="d-none">
          <button id="btnFormRefreshBanks" class="btn" dmx-on:click="scGetBanks.load()" data-toggle="button">Button</button>
        </form>

and triggering with:

  $.post('/dmxConnect/api/banks/addBank.php', {
    public_token: public_token, 
    metadata: metadata
  }, function(result) {$( "#btnFormRefreshBanks" ).click();
                      });

Works great. Thanks again.

#6

hello @patrick ,

do you know alternative solution or suggestion for call(execute) to dmx server connect actions ?

1 Like
#7

You can simply use dmx.parse for it, so like:

$.post('/dmxConnect/api/banks/addBank.php', {
  public_token: public_token, 
  metadata: metadata
}, function(result) {
  dmx.parse('scGetBanks.load()');
});
5 Likes
#8

perfect thank you :slight_smile: @patrick

#9

Thanks Patrick. That’s what I was looking for. Is there a reference document for such calls of dmx?

#10

This is great! It will simplify the code at many places. :+1: