custom-data-attribute

I have to choose between custom data tags or ids. I would like to choose custom data tags, but I want to be sure that they do not cause browser compatibility issues for the most widely used browsers today. I'm using jQuery 1.6 and my particular scenario involves a situation where I need to reference a commentId for several actions. <div data-comment-id="comment-1" id="comment-1"> <a class="foo"></a> </div> It's easier to extract data tags in jQueryin: $('foo').data('commentId'); Extract a substring from the id seems a bit complicated and could break for one reason or another: <a id="comment-1"

I'm trying to create a form with some custom data attributes on the inputs: <input type="text" data-family="Dinosaurs"> This seemed like a nice clean way to have easy front-end access (haha!) with jquery: $("[data-family='Dinosaurs']").doSomething() The problem is I can't get Rails (3.0.3) to render the attribute. <%= f.text_field :question, :id=>"poll_question", :class=>"BigInput", :style=>"width:98%;", :attributes=>"data-submit_clear='1'" %> I've tried many permutations to no avail and can't find an example of how to do this. Do I need to modify the text_field helper to support any custom

This question already has an answer here: Are empty HTML5 data attributes valid? 4 answers I want to use a custom boolean attribute to mark an element's contents as editable. I'm aware of the data-* attributes, but wasn't sure if they require a value. I don't need data-is_editable="false" , as the lack of the attribute would be equivalent. I only care if it's "true" (if the attribute exists). I know I can use other attributes like class but I don't want to as it seems slightly inappropriate (correct me if I'm wrong about that). Here's the resource I'm reading, maybe it's the wrong document or

I have a grid with image links on my page. When clicking one of them a modal should pop up with the image but in big format. Now I'm trying to achieve this without the use of javascript/jquery but just with data-attributes. At the moment I have this code: <!-- Generating the image link with PHP (laravel) --> <a data-toggle="modal" href="#myModal"> {{ HTML::image("img/$photo->Link", "$photo->Title", array("class"=>"thumbnail col-md-3")) }} </a> <!--The modal --> <section class="row"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden=

This question already has answers here : Are empty HTML5 data attributes valid? (4 answers) I am wondering if html data attributes actually need a value to be applied? I wonder this because often all we want to know is if the attribute is actually set to act as a flag. (sure we could use a class for this; but realistically unless you are going to style these items differently then the flags are more data than a semantic item). A perfect example of this is if we want a link to scroll to it's target instead of jumping our jQuery code might look like: $(document).on('click', '[data-scroll-link'],

Something that's been bugging me recently is the use of HTML5 data attributes and when is the appropriate to use them. Typically, on a page that performs a number of AJAX calls to my server, I require the ID that is representative of the page being viewed. I've currently been storing this in a hidden <input> element on the page, which is then accessed and stored in a JS variable at the top of my jQuery doc ready call. I've been considering moving it to a data-id attribute on the body element, which I then would access in jQuery using $('body').data('id'); . Is there any advantages to using

I think I'm using removeData correctly but it doesn't seem to be working, here's what I'm seeing in the dev console, could anyone explain what I'm doing wrong? I'm outputting the current data attribute value, calling removeData, then outputting the value again and its still there. $('.questionList > li').eq(1).data('fieldlength') 3 $('.questionList > li').eq(1).removeData('fieldlength'); [ <li class=​"questionBox" data-createproblem=​"false" data-fieldlength=​"3" data-picklistvalues data-required=​"true" data-sfid=​"a04d000000ZBaM3AAL" data-type=​"Text">​ <div class=​"questionLabel">​Birthdate