HTML and custom component - strange behaviour with a link (<a>) in the HTML

App Development
1

In my navigation start page I use cards to navigate to different sections in the app.
I had to use the custom component for that.
That works, but there will be a (not-needed) query on one of the tables, which makes it slower.
Better would be to user a standard html component for that, but when I copy/paste the html-code from the custom component, the <a>-tags get deleted on save of the html component.

I don’t understand why this is.

in the custom component the code:

<div class="card-style-custom-3 card-custom-3-primary col col-md-12">
    <a style="text-decoration : none" href="https://mylink">
        <div class="blog-card">
            <div class="meta">
                <div class="photo" style="background-image: url('myphoto.png');">&nbsp;</div>
            </div>
            <div class="description">
                <h1>ISO 9001</h1>
                <h2>Quality Management</h2>
                <h2>Management System </h2>                
            </div>
        </div>
	</a>
</div>

Copy this code in the html-component (in the source code editor) will lead to following code on save:

<div class="card-style-custom-3 card-custom-3-primary col col-md-12">
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url('myphoto.png');">&nbsp;</div>
</div>
<div class="description">
<h1>ISO 9001</h1>
<h2>Quality Management</h2>
<h2>Management System</h2>
</div>
</div>
</div>

<a>..</a>-tag is gone.

  1. Why?
  2. Can I use a html-component with a link to a page in my application which would work?

This is what it looks like, the whole card is a hyperlink:
image

2

You cannot do scripts or hrefs inside of general html components (from what know). You can use javascript or jQuery to add it. I believe this should work for you. Put this inside the javascript tab on the page. Change the component id (just hover over the info button of that particular component on the page builder page to get the id). Change the class to the class you want to wrap the link around (in this case blog-card). Change the link after href to the link you want to go to.

> TB.render('component_7',function(){
>     $('.blog-card').wrap('<a style="text-decoration : none" href="https://mylink">')
> });
1 Like
3

It works well, thanks.

FYI and for others:
I had to copy/paste the CSS for each card, as it seems that the JS spills over to the other earlier html components, even though they have different component_numbers to render, with the consequence that the last link will overwrite all the other links from the other html components.

So I have a blog-card1 upto blog-card18 (as I have 18 cards).

1 Like
4

Glad it worked. Yes if you have multiple items with the same class name it will impact all of them the way it is currently written. TB.render() is just causing the function inside of itself to run when the specified component has loaded. It is not causing it to only impact that component. If you want all objects with the same class to open the same link then this would work. If you want them all to open to separate fixed links you can give them each unique class names or use the parent divs to reference specific ones (I would recommend the first as you did). If you want them to open to “dynamic links” (links based on the record being displayed) you would need to add the record id to then end of your url.

Here is a really good post on an alternative method Standalone Button for Add Record Popup Modal - Showcase - Tadabase Community.

1 Like