I have a navbar which populates menu item buttons using dmx-repeat from a server query. This works great.
However, I need to change <a href="#anchor"> to a dynamic value from my database query such as <a href="#userID">
Problem is, the {{userID}} tag won’t work inside of the link and I also can’t seem to prefix the # either. Any ideas?
Hello @max_gb
Please check https://docs.wappler.io/t/dynamic-attributes/2912#Creating-Dynamic-Link
Every attribute like href which exists in HTML has its dynamic alternative, under dynamic attributes, so this way it becomes available for dynamic data 
The problem is it will not let me insert an Anchor Button inside of a repeat!
What do you mean? Can you upload some screenshot explaining the issue maybe?
I can insert an Anchor Button fine in to another element such as Column…
But I cannot see Anchor button or link on the element selector when I try to insert it in to a repeat…
So what is your page structure exactly?
Where is the repeat region added - can you paste the code here as it’s not really clear from the screenshots.
Very simply, I want a link to point to a page anchor which is dyamic.
<div dmx-repeat:repeat1="serverconnect1.data.category">
<a href="#{{categroyName}}">
{{categoryName}}</a></div>
And then further down the page is the content…
<div dmx-repeat:repeat2="serverconnect1.data.category">
<h1 id="{{categoryName}}">{{categoryName}}</h1>
</div>So you are not using the navigation component, but instead insert a repeat region on the page?
My question was more about how is your page structured, where is that repeat placed into? What is the layout where the anchor must be repeated?
Yes, you can insert a link in to a repeat region just fine. But now try and insert an Anchor link inside of a repeat region, it will not let you.
The “Anchor button” element is just a regular link with the bootstrap class="btn" applied …
I will try and explain a bit clearer.
Here is what you can do…
Here’s what I’m trying to do but it will not let me…
Links and Anchor buttons are the same things.
Link:
<a href="#">Link</a>
Anchor button:
<a href="#" class="btn">Link</a>
they function the same way, and they are the same element <a> - one of them just has a class applied, so it looks like a bootstrap 4 button.
You can easily add any class to your link element if you need it:
Ok, so the second question was how do I prefix a Data Binding with a #
Every time I add the # the link stops working. I need this hashtag for the anchor to work.
In the docs i linked in my previous posts it’s explained how to mix dynamic and static content in a href attribute:
If you need to mix static and dynamic data for the link, i.e. point to a page and pass an URL variable then select Template from the drop-down and enter the static part of your link manually
Then click after the static link and select your binding.
Which in your case will look like:
dmx-bind:href="#{{name}}"
Thanks @Teodor it’s been one of those days. I see why it was not working before as I used the data binding window which gave me this error:
Added the {{ }} manually and works a treat now
dmx-bind:href="#{{name.slugify()}}"
Hmm, using the “Template” was it not adding the {{}} automatically?
No, that’s why I was having problems and banging my head against the wall. It also doesn’t like the # either which throws up the error in my screenshot.
Can you remove the value you currently have and start again?
#
#
It seems to work fine here:
