How to insert Tagify into database with reference element

[RodrigoBarata]

Hello everyone, i've followed this post Inserting Tagify Values into a Database but i didn't managed to it.

I have a fintech app focused to trading... In each trade, the user can add tags (trigger, mistakes,etc).

So in my trade details page i have a tagify input for each tag that the user can choose for the trade.

My database right now has a table for each tag (trigger, mistake, etc), and then i have a table for trades with a reference element in it refering to each tag. (I don't know if this is the correct way to do it)

I've tried to add the tags to my trade this way:

1. In my trade table i've created a reference element refering to the trigger table
   

   

2. I've created a API connection
   

   
   
   
   

3. Created a server connect in my trade detail page linking to this action
   

   

4. I've created a Tagify element in my trade detail page (already searching all triggers in this case), inside a form with an unvisual input to know the trade id. PS: This form and this inputs are the ones in the API Connection
   I've also converted this form to server connect and added my action (add_trigger_to_trade)
   

   
   
   
   

5. In my Tagify input i've added an action to submit the form
   

   

Did i miss something or did something wrong?

Sorry for the long post,
Rodrigo

[Teodor]

So you don't have a submit button on your form, but want to submit it on selecting a tag in tagify - is that correct?
If yes, then please explain what is the problem - are there any errors in the dev tools > network when submitting the form?

[RodrigoBarata]

Yes, that's right. I need the tags to be saved (or removed) in that trade database. (I didn't thought about the remove process until now, do you have any sugestion?)

I don't have an error, but the field in my database is still empty after this.

[Teodor]

check under the Network tabs > XHR, after you select your tags. Is the server action being executed and are there errors.

[RodrigoBarata]

It's empty.

[Teodor]

Post your tagify code here please.

[RodrigoBarata]

<input id="selecttriggersinput" name="selecttriggersinput" type="text" class="form-control" is="dmx-tagify" dmx-bind:data="query_trigger.data.query" tag-text="_['Name of Trigger']" tag-value="ID" max-items="100000000" min-chars="1" style="--tags-border-color: rgba(66, 82, 94, 0.39); --tags-focus-border-color: rgba(66, 82, 94, 0.39); --tags-hover-border-color: rgba(66, 82, 94, 0.39); --tag-hover: rgba(66, 82, 94, 0.39); --tag-text-color: rgba(0, 0, 0, 0.39); --tag-text-color--edit: rgba(66, 82, 94, 0.39);" nocustom="true" dmx-bind:value="serverconnect1.data.query[0].Trigger" dmx-on:input="">

[Teodor]

You should be using the change event, not dmx-on:input=""
Please get the files from following zip and place them in the dmxAppConnect/dmxTagify folder, and make sure to upload them to your server:
dmxTagify.zip (10.1 KB)

We found a little issue with the onchange event that is now fixed.
Your tagify code should become:

<input id="selecttriggersinput" name="selecttriggersinput" type="text" class="form-control" is="dmx-tagify" dmx-bind:data="query_trigger.data.query" tag-text="_['Name of Trigger']" tag-value="ID" max-items="100000000" min-chars="1" style="--tags-border-color: rgba(66, 82, 94, 0.39); --tags-focus-border-color: rgba(66, 82, 94, 0.39); --tags-hover-border-color: rgba(66, 82, 94, 0.39); --tag-hover: rgba(66, 82, 94, 0.39); --tag-text-color: rgba(0, 0, 0, 0.39); --tag-text-color--edit: rgba(66, 82, 94, 0.39);" nocustom="true" dmx-bind:value="serverconnect1.data.query[0].Trigger" dmx-on:change="selecttriggersform.submit()">

This will submit the form on every change (adding and removing a tag)

[RodrigoBarata]

I've done what you said... I've downloaded the files on your zip and put them in dmxTagify folder. I've replaced the code to the one that you sent me and now it appears two errors on devtools.

And i also have a bunch of errors in my page:

[Teodor]

So please check what is the exact error message:

Debugging Server Connect Errors

You can easily debug issues related to server-side processing such as - form not sending email, record not inserting or updating, query not showing data etc. The first thing you need to do is to open the server connect settings. They are located in the Workflows Panel > Server Actions: [Screenshot 2021-09-27 at 10.02.35] And enable the Debug Mode: [Screenshot 2021-09-27 at 10.03.08] Click Save: [Screenshot 2021-09-27 at 10.03.26] In your browser, open the Developer tools. If you don't k…

[RodrigoBarata]

The problem apparently is related to the api connection.

I don't see anything wrong with my api connection:

[Teodor]

Please check the article i sent. It's explained step by step where exactly to click and how to check the exact error returned by your server action. We need the error to be able to tell you what is wrong.

[RodrigoBarata]

Ok, done. I guess the problem is "Array to string conversion".

[Teodor]

So the error is exactly this:

Array to string conversion

What steps does your server action have? What values are you using inside them?

[RodrigoBarata]

This is my Input (Tagify), it's as text (maybe i should change it)

This is my server action:

It's updating the trigger table of the current trade...

[Teodor]

What type of column are you trying to insert the data into?
Please make sure it's the correct data type as explained in the first couple of screenshots here:

Inserting Tagify Values into a Database

Intro You can insert the value of the Tagify component into a database. In our example we will show you how to store it in a json field. Database Setup We have a products table and each product can be assigned to different categories. We’d like to use the Tagify component to pick the categories per each product, when inserting it in the database. Our products database table is quite simple, an id field, name, description and category: [Screenshot_19] Our Category field type is json, and i…

[RodrigoBarata]

It wasn't Json as you explained in the tutorial, however i changed it to Json (array) and the error doesn't persist. But i still don't see any trigger in my trade database... Should i change to object instead of array?

PS: I saw now that i am full of errors on my console, maybe i can't see them in my database because of that... I've seen in community that we should wait till wappler correct this errors, is that right?

[Teodor]

@RodrigoBarata

It wasn't Json as you explained in the tutorial, however i changed it to Json (array) and the error doesn't persist. But i still don't see any trigger in my trade database... Should i change to object instead of array?

What do you mean you don't see any trigger?
Are the values from tagify now inserted in the database for the selected record, when you inspect it?

@RodrigoBarata

PS: I saw now that i am full of errors on my console, maybe i can't see them in my database because of that... I've seen in community that we should wait till wappler correct this errors, is that right?

Not sure what you mean here?
The errors you see are not Wappler related, something is not correct somewhere. What server are you using?

[RodrigoBarata]

I am using Local Web Server, in a moment it appeeared me all this errors...

[Teodor]

But do these error appear also in your browser when you run the page?