Tagify input component isn't working

Hello everyone

Wappler Version : 7 beta 13
Operating System : windows 11
Server Model: Node

Expected behavior

What do you think should happen?

See the emails tags coming from the database query which I can see its output in the browser's Network panel.

Actual behavior

What actually happens?

Error appears on the browser's console says "Unknown component found! tagify" From BaseComponent.js:285

How to reproduce

  • Detail a step by step guide to reproduce the issue
  • A screenshot or short video indicating the problem
  • A copy of your code would help. Include: JS, HTML.
  • Test your steps on a clean page to see if you still have an issue

My code:

<form id="addTeamForm" is="dmx-serverconnect-form" method="post" action="/api/member/createTeam">
                        <div class="mb-3">
                            <label class="form-label">Team Name</label>

                            <input type="text" class="form-control" required="" id="teamName" name="teamName">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Team Members</label>

                            <input class="form-control" required="" placeholder="Enter emails separated by a space or a comma" id="membersList" data-msg-pattern="Enter emails separated by comma or a space." name="membersList" type="text" is="dmx-tagify" style="--readonly-striped: 1;" dmx-bind:data="getTeamsMembers.data.query" tag-text="first_name+last_name" tag-secondary="email" tag-value="email">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>

                            <input type="text" class="form-control" placeholder="Enter a description of this team or any notes (Optional)" id="description" name="description">
                        </div>
                    </form>

This means the js includes for the tagify are missing from your layout (main) page head tags. Most probably after adding tagify to the page you didn't save the changes made to the main page.
Please check this.

Actually they are there I have checked!

   <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify@4.17.7/dist/tagify.min.js" defer></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/tagify@4.17.7/dist/tagify.css" />
    <script src="/dmxAppConnect/dmxTagify/dmxTagify.js" defer></script>

I appreciate your time and support.

Can you please send a link to your page where i can check this?

Here's the link https://5177-156-196-126-121.ngrok-free.app/dashboard
Sorry for the delay, had a problem with installing ngrok

Your link isn't loading

I've tried it and it's working.
Please try again

I don't see any error related to tagify component doesn't exist:

I rally can't get what exactly are you trying to achieve using tagify and what is the problem you're having?

Weird and embarrassing!
The data source for this tagify input is a database query as you can see. I'm expecting to see the text field and the secondary filed like in the following image


Your expression for the data source is getTeamsMembers.data.query while your query returned by the server action is called query_copy that's why no data is returned.

That is not the problem because I've created query_copy to remove an identity condition before creating the link for you. Anyways, I've edited it and still not showing. I don't know what's happening!

Never mind. It's working!
Sorry for wasting your time. That's why I have added it into "Need Help" first.
Thanks a lot man.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.