add attribute to DOM element

Question

I have a modal form that is generated using bootstrap 3. It doesn't look like there is a reliable way to determine when that form is being shown onscreen. I am attempting to create one. I attached two events to my DOM element that signal when it is shown and when it is hidden.

jq_modal_login_form = $('#modal-login-form')[0]
jq_modal_login_form.on('shown.bs.modal', function () {
    jq_modal_login_form.active_onscreen = true;
});
jq_modal_login_form.on('hidden.bs.modal', function () {
    jq_modal_login_form.active_onscreen = false;
});

I tried to give an attribute named active_onscreen to the DOM element above. When I look at the DOM element in the debugger later, the attribute is not present.

I should mention that I am VERY new to javascript. Is attribute even the right word to use here? It looks like attribute is a bit of a misnomer as well. It could be an attribute of the object but could also be an attribute of the object.attributes attribute, right? I assume the later is where styling ect., goes and is not what I want to change. Does anyone have some insight as to what I should be doing here?

score 2 · Accepted Answer · edited May 23 '17 at 12:05

2

In jQuery:

$('selector').attr('attribute_name', 'value');

However, you can should only use predefined attributes as creating custom attributes requires additional setup (see this question) that is not necessary in your case.

In your case, you may just want to add a active_onscreen class to the element. Classes are meant to be used to identify elements (and not just for CSS), so they are perfect for this applicaiton. You would use this to add a class to an element:

$('selector').addClass('active_onscreen').

When it is no longer active, you would use this to remove the class:

$('selector').removeClass('active_onscreen').

edited May 23 '17 at 12:05

Community

1
1

answered Mar 26 '14 at 21:19

zsaat14

1,110
2
10
20

I saw this earlier during my research, but I need more than that. I'm trying to learn here, not be spoon-fed answers. Why is this valid but what I did is not? – Nick Mar 26 '14 at 21:20
@user1556487 See my edit. Basically, creating a custom attribute is not necessary nor is it as easy as you thought. – zsaat14 Mar 26 '14 at 21:25
okay, that sounds valid. I am going to read more about classes – Nick Mar 26 '14 at 21:28

SomeKittens · Answer 2 · 2014-03-26T21:32:40.993

0

If you just want to see if a given modal is open, Bootstrap does that for you. You can check the bs.modal data attribute:

$("element").data('bs.modal').isShown;

or a class (but this method is prone to race conditions):

$('#myModal').hasClass('in');

edited Mar 26 '14 at 21:32

answered Mar 26 '14 at 21:20

SomeKittens

38,868
19
114
143

I had read that that the first choice is unreliable elsewhere and will create race conditions. As far as the second choice, my modal form does not have a data property, so I keep getting an undefined error. Thoughts? – Nick Mar 26 '14 at 21:31
@user1556487 Updated my answer. Not sure why you don't have the data attribute. – SomeKittens Mar 26 '14 at 21:34
I had seen the same thing posted elsewhere... I don't think it's correct. It's not in the bootstrap documentation anywhere – Nick Mar 26 '14 at 21:37

score 0 · Answer 3 · answered Mar 26 '14 at 21:21

0

What you are doing here is adding a property of the DOM object - not an attribute of the element.

Adding an attribute does not necessarily make the property mirror it. Only built-in properties do this.

If you want to set an attribute, but not the property, you can use jQuery's .attr() method.

answered Mar 26 '14 at 21:21

Scimonster

32,893
9
77
89

You're right. I used incorrect word choice. But what is wrong with adding and checking a property of the DOM object? Why does this not work? – Nick Mar 26 '14 at 21:27
There's nothing per se wrong with it. You just can't access it as an attribute of the element. – Scimonster Mar 26 '14 at 21:28

add attribute to DOM element

3 Answers3