Add a link input into item

[AEK-BKF]

Hello, First, I'd like to thank you so much for this amazing package. Please, How can I set a link into item div, so I can click on it and go to link page.

Something like this :

'item': [{
                            'title': `
                                <div class="d-flex align-items-center">
                                    <div class="symbol symbol-success mr-3">
                                        <img alt="Pic" src="assets/media/users/300_24.jpg" />
                                    </div>
                                    <div class="d-flex flex-column align-items-start">
                                        <span class="text-dark-50 font-weight-bold mb-1">SEO Optimization</span>
                                        <span class="label label-inline label-light-success font-weight-bold">In progress</span>
                                    </div>
                                         **<div> <a href="link"> View </a>**
                                </div>
                            `,
                        },

Thanks.

[xscode-auto-reply[bot]]

Thanks for opening a new issue. The team has been notified and will review it as soon as possible. For urgent issues and priority support, visit https://xscode.com/riktar/jkanban

[marcosrocha85]

What language are you using? PHP? Node.JS? You can simply concatenate the id coming from database into your href. Also you have a property called id for every item. Check it out https://jsfiddle.net/marcosrocha85/Lk9t483r/

[AEK-BKF]

Hi, Thanks for quick reply, I'm using Laravel PHP. I set items as I mentioned above, but when I click on the link, nothing happens ! the console log is empty.

[marcosrocha85]

Is your link ok? Is the anchor tag ok? I mean, there's no limitations about links inside item. If you take a look at my jsfiddle I set an anchor and it is working fine.

[AEK-BKF]

Yes! every thing is fine, I can see the correct link on mouse over. I'm really confused. If you can try my code above and test it.

[marcosrocha85]

Yes! every thing is fine, I can see the correct link on mouse over. I'm really confused. If you can try my code above and test it.

Please take a look at your own code in this fiddle: https://jsfiddle.net/marcosrocha85/akvuqors/ It looks like you set up a property on jKanban which is preventing you from clicking on an element inside the item. Can you provide your entire jkanban configuration?

[AEK-BKF]

I test your example on jsfiddle and it doesn't work ! Sure !

var kanban = new jKanban({
        element: '#works_ids',
        gutter: '0',
        widthBoard : '375px',
        dragBoards : false,        
        dragItems  : canDrop,         
        /* click: function(el) {
            alert(el.innerHTML);
        }, */
        dropEl : function (el, target, source, sibling) {            
            var workid = $(el).data("eid");
            var status = target.parentElement.getAttribute('data-id');
            window.livewire.emit('changeStatus', [workid, status]);
        },
        boards: [{
                'id': 'new',
                'title': 'New ({{$news->count()}})',
                'class': 'light-dark',
                'item': [
                    @foreach($news as $new)
                    {
                        'id' : {{$new->id}},
                        'title': `
                            <div class="d-flex align-items-center">
                                <div class="symbol symbol-success mr-3">
                                    <img alt="Pic" src="{{$new->creator->getAvatar()}}" />
                                </div>
                                <div class="d-flex flex-column align-items-start">
                                    <span class="text-dark-50 font-weight-bold mb-1">{{$new->title}}</span>
                                    <span class="label label-inline label-light-{{config('aim.statuses')[$new->status][1]}} font-weight-bold">{{config('aim.statuses')[$new->status][0]}}</span>                                
                                </div>
                            </div>
                            <div class="mt-3">Number : {{$new->number}}</div>
                            <div>Unit : {{$new->unit->name}}</div>
                            <div>Assigned To : {{$new->assignedTo->name ?? ''}}</div>
                        `,
                    },
                    @endforeach                    
                ]
            },

[marcosrocha85]

Forgive me, @AEK-BKF. Anchor tags not work properly inside jKanban items. I don't looked deeper, but I opened a project of mine and found that I just used onClick for Anchor tags in order to make them work. Please take a look again at this fiddle and you see a dialog when clicking View.

[AEK-BKF]

Thank you so much for your time to help me. Yes, I've already used onlick="view(itemid) function to redirect to my URL, it's not professional but it does what I want.

function view(itemid) {
        window.location.replace("/url/"+itemid);
    }

and Thanks again for this nice package.