Member Avatar for davy_yg

Hello,

I am trying to understand someone else codes:

articles.blade.php

<div class="notes-nav">
                                                            <a href="#" class="btn btn-green btn-act-delete" onclick="deleteTimeLine(this)" data-id="{{$data->id}}" data-type="article"><img src="{{url('')}}/images//icon-trash.png"/></a>
                                                            <a href="#" class="btn btn-green btn-act-edit" data-id="{{$data->id}}" data-tittle="{{$data->tittle}}" data-content="{{$data->content}}"                
                                                            ><i class="fa fa-pencil"></i></a>
                                                            @if($data->status=="0")
                                                            <a href="#" class="btn btn-green btn-publish" data-toggle="tooltip" data-placement="top" title="publish?" data-id="{{$data->id}}" data-status="1"><span class="glyphicon glyphicon-ok"></span></a>
                                                            @else
                                                            <a href="#" class="btn btn-green btn-publish" data-toggle="tooltip" data-placement="top" title="cancel publish" data-id="{{$data->id}}" data-status="0"><span class="glyphicon glyphicon-minus"></span></a>
                                                            @endif
                                                        </div>

First I wonder why the a href = "#" is empty but you still can go to the next page when you click the button.
Next, what is data-tittle="{{$data->tittle}}" and data-content="{{$data->content}}" for?
Can you pass data using that? Also, where does this syntax comes from?

  • 3 Contributors
  • 2 Replies
  • 365 Views
  • 59 Minutes Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Short, practical summary for , building on and :

href="#" just makes the element a clickable anchor that would jump to the top of the current page if nothing stops it. In your markup a JavaScript handler is taking over the click — that is why clicking appears to "do something." Stop the default jump with event.preventDefault() so only your JS runs. Example:

document.querySelector('.btn-act-delete').addEventListener('click', function(e){
  e.preventDefault();
  deleteTimeLine(this); // pass the element to your function
});

data-* attributes are HTML5 custom attributes used to carry small pieces of data into client-side code. They are always strings in the DOM; read them with element.dataset or jQuery’s .data() (jQuery will try to convert types and caches values). Example:

var el = document.querySelector('.btn-act-edit');
var id = el.dataset.id;        // "42"
var title = el.dataset.tittle; // watch the spelling
var content = el.dataset.content;

If you need to pass structured or large content, JSON-encode on the server and JSON.parse on the client, or better: pass an ID and fetch the full content by AJAX.

The {{$data->tittle}} style comes from Laravel’s Blade (server-side) templating in a .blade.php file — Blade injects values into the HTML before the browser receives it. It is not a client-side Mustache/Handlebars template. Note Blade’s {{ }} escapes HTML by default; outputting raw HTML requires explicit methods and care. Also double-check whether tittle is a real field or a typo for title — that typo is a common source of bugs.

Extra tips: use a <button> (or role="button") for actions instead of an anchor for better semantics; always escape or JSON-encode data to avoid XSS; inspect the compiled HTML in DevTools to confirm what Blade actually produced.

Recommended Answers

All 2 Replies

Member Avatar for pty

href="#" makes an anchor tag appear like a link without actually redirecting you. It's intended to take you to anchors on the same page (<a href="#section-1">Section One</a>) but with no following text does nothing.

The intention is that a JavaScript handler takes over the click event.

Member Avatar for gentlemedia

There is a onclick="deleteTimeLine(this)" on that anchor tag, so that function somewhere in your JS will do something.

In data-* attributes you can store data for that elelment which you then can manipulate with JS .data().

Those tags {{$data->tittle}}are from a JavaScript templating engine such as Mustache or Handlebars, but there are heaps more. Do you use one or don't you know THAT you use one?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.