custom-data-attribute – Tarik Billa

Custom sorting on values in a data-sort attribute with Jquery Datatables

January 6, 2024 by Tarik

You can use data-order attr, for example <table class=”table table-bordered table-hover”> <thead> <tr> <th>Date</th> <th>Count</th> </tr> </thead> <tbody> <?php $count = 0; foreach($users as $user) {?> <tr> <td data-order=”<?php echo $count ?>”> <?php echo $user[‘createdDate’]; ?> </td> <td> <?php echo $user[‘count’]; ?> </td> </tr> <?php $count++; }?> <tr> <td data-order=”999999999999999999999999999″> <!–always last–> Total </td> <td> … Read more

Can I use HTML5 data-* attributes as boolean attributes? [duplicate]

December 27, 2023 by Tarik

The example you show is valid. (Just like using disabled or checked in a form. Only xHTML force the presence of a value) Although, the value returned is not a boolean. When you query this resource, you’ll get an empty string for any empty data-* attributes. Like so: domNode.dataset.draggable; // log “” domNode.dataset.notAdded; // log … Read more

Escaping/encoding single quotes in JSON encoded HTML5 data attributes

December 21, 2023 by Tarik

removeData() jquery method not working

December 18, 2023 by Tarik

There is bit of gotcha I wanted to clarify in case anyone else stumbles upon it… If you have HTML5 data-* attributes on an element you need to use jQuery’s removeAttr() instead of removeData() if you want to remove them from the element in the DOM. For example, to actually remove a data attribute from … Read more

Pass javascript function as data-* attribute and execute

December 5, 2023 by Tarik

One way is to use eval() jQuery(“.container”).on(“click”, “button.marker”, function (e) { var callback = jQuery(e.currentTarget).data(“callback”); var x = eval(callback) if (typeof x == ‘function’) { x() } }); Demo: Fiddle Note: Make sure it is safe in your environment, ie there is no possibility of script injection because of bad input from users Why is … Read more

Get custom data-attribute in select2 with

September 5, 2023 by Tarik

There is no direct method with select2, you can use a combination of select2 data and jQuery like following : $(“#example”).select2().find(“:selected”).data(“id”); First you get the select2 data then you find your selected option with jQuery and finally the data-attribute.

How to do data- attributes with Haml and Rails?

August 29, 2023 by Tarik

Try this: %a{“data-toggle-description-length” => “toggle_me_ajax”, href: “#”} OR %a{href: “#”, :data => {:toggle_description_length => “toggle_me_ajax”}} For more details refer here You can also use html2haml converter available online EDIT: As mentioned in comments there are a couple more syntaxes which would work %a{href: “#”, { “data-toggle-description-length”: “toggle_me_ajax” }} OR %a{href: “#”, { :”data-toggle-description-length” => “toggle_me_ajax” … Read more

Store and retrieve JavaScript arrays into and from HTML data attributes

June 30, 2023 by Tarik

You could use the HTML escaped characters in the element data attribute to have JSON-like array (encoded are quotes): <div id=”demo” data-stuff=”["some", "string", "here"]”></div> And then in JavaScript get it without any additional magic: var ar = $(‘#demo’).data(‘stuff’); See this JSFiddle demo. However, escaping isn’t necessary. You can do this, instead: <div id=”demo” data-stuff=”[“some”, “string”, … Read more

Are empty HTML data attributes valid?

June 19, 2023 by Tarik

Yes, perfectly valid. In your case, data-modal-target would represent a boolean attribute: 2.4.2 Boolean attributes The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

Is there any problem with using HTML5’s “data-*” attributes for older browsers?

June 8, 2023 by Tarik

There isn’t really, they’re not 100% correct/valid usage in HTML4 of course….but they don’t cause problems either, so they’re still a great way to solve the “I need an attribute for this” problem. If it helps, I’ve used these while supporting IE6 and have had zero issues thus far, and I can’t recall a single … Read more