JSON inside a Repeat

Wappler General How To
#1

Hello, something is stumping me with the addition of a div inside a repeat.
I’m adding an “Add To Calendar Button” (atcb) from GitHub - jekuer/add-to-calendar-button
The CSS and JS are found, no issues there, and below is the code. Now, it displays just fine outside the repeat, but not at all inside it.

<div dmx-bind:repeat="getUserSessions.data.getUserSessions" is="dmx-repeat">

image

<div class="atcb" style="display:none;">
                {
                "title":"Add the title of your event",
                "dateStart":"02-21-2022",
                "dateEnd":"03-24-2022",
                "options":[
                "Google"
                ]
                }
</div>

There si a note that " Mind that with Angular, you might need to escape the { with {{ '{' }} and } with {{ '}' }} ; with React it would be { '{' } and { '}' } . ". But we are using regular PHP, not Angular nor React.

Any clue? I don’t like asking basic HTML question but this maybe Wappler/DMX related?

#2

So what is wrong exactly - what should we be looking at? Your screenshot is not clear.
What is your whole code?

You are using App Connect as a framework, not angular or react… and obviously not PHP.

#3

When in repeat, the atcb will not get initialized correctly. You will have to do a manual initialization.
This hold true for all libraries where Wappler’s dynamic components are involved.

Most likely, on onsuccess static event of your SC, which would be the source of your repeat, call the JS to initialize all atcb buttons on page… and render correctly.

1 Like
#4

@sid is right, it’s a timing thing. The initialisation happens when the page is loaded but at that time the repeat doesn’t have any content because the SC hasn’t completed.
Add the following to your Server Connect:

dmx-on:success="run({runJS:{function:'atcb_init'}})"

or

onsuccess="atcb_init()"
1 Like
#5

I would recommend using flow.
And also add a wait of say 300ms, just to be sure that AppConnect has completed rendering the repeat & HTML is available.

2 Likes
#6

Thank you @sid @bpj for your replies and options.

First, the code so @Teodor has a better view.

The Add To Calendar Button displays well here:

  <div class="mt-5 container-md" id="mainContainer">
    <div class="atcb" style="display:none;">
      {
      "title":"Add the title of your event",
      "dateStart":"02-21-2022",
      "dateEnd":"03-24-2022",
      "options":[
      "Google"
      ]
      }
    </div>

But inside a repeat it doesn’t show at all:

    <div dmx-bind:repeat="getUserSessions.data.getUserSessions" is="dmx-repeat">
          <div class="atcb" style="display:none;">
            {
            "title":"Add the title of your event",
            "dateStart":"02-21-2022",
            "dateEnd":"03-24-2022",
            "options":[
            "Google"
            ]
            }
          </div>

I have added an on:success flow to the SC, including a 1s delay but same result. Also tried with just onsuccess=“atcb_init()”

  <dmx-serverconnect id="getUserSessions" url="dmxConnect/api/user/getUserSessions.php" dmx-on:success="run([{wait:{delay:1000}},{runJS:{function:'atcb_init'}}])"></dmx-serverconnect>
#7

In your browser, does it work if you put
atcb_init() in console after the SC has returned and the repeat has been displayed?

Do you get any console errors?

#8

Good news, the button is now starting to show in the repeat. (Possibly because it needs to be called only once in the page? Who knows but it’s there now)
Next is to get the parameters to be dynamic, ex: “title”:{{title}} but that syntax doesn’t work in this context. Is it a case here of using dmx.parse(‘title’); but that’s a javascript function, what would be the syntax in the <div> { context below?

    <div dmx-bind:repeat="getUserSessions.data.getUserSessions" is="dmx-repeat">
          <div class="atcb">
            {
            "title":"Add the title of your event",
            "dateStart":"02-21-2022",
            "dateEnd":"03-24-2022",
            "options":[
            "Google"
            ]
            }
          </div>
#9

You should try encasing the {{title}} in quotes. Remember you’re trying to create a JSON for atcb to read where the string is in quotes. Something like:

<div dmx-bind:repeat="getUserSessions.data.getUserSessions" is="dmx-repeat">
          <div class="atcb">
            {
            "title":"{{title}}",
            "dateStart":"02-21-2022",
            "dateEnd":"03-24-2022",
            "options":[
            "Google"
            ]
            }
          </div>
#10

Thank you @bpj. All going fine now thanks to your explanations!

1 Like