Javascript put attribute to a element - javascript

I'm using uikit and to open a dropdown i can set some attributes like:
data-uk-dropdown="{mode:'click',justify:'#my-id',}"
this kind of way it's usable from html view in the input. Is it possible use the justify directly from javascript? I mean something like:
$(document).on('focusin', '#my-id', function () {
$('.uk-dropdown').justifly('#my-id');
});
of course $('.uk-dropdown').justifly('#my-id'); it's not the correct way and it's not working.

You need to use .attr() for setting the attribute value:
$('.uk-dropdown').attr('justifly','#my-id');
for setting multiple attributes:
$('.uk-dropdown').attr({'mode':'click','justify':'#my-id'});

Related

Using HTML5 Data Attribute in jQuery Selector

Noob Question on Data Attribute
I was wondering will using data-attribute in jQuery Selector can bring any trouble in the future?
I'm trying to reduced the usage of .class and #id as jQuery Selector, since most of data I'm working on will generated from data-attribute
example of the code
$(document).ready(function(){
var mydata = $(document).data('my-data-attribute');
});
will the code above slowing the load time?
or
$('[data-suffix-attribute="some_value"]').each(function(){
......
});
or
$('[data-suffix-attribute="delete"]').click(function(){
// delete action happening here
});
will this bring trouble?
$(document).ready(function(){
var mydata = $(document).data('my-data-attribute');
});
The code above will not work. If you want to read the HTML5 data attribute of an element using the jQuery .data() method firstly you need to select the relevant element using a jQuery selector and then you can use the method as is shown below:
var mydata = $('.example').data('suffix');
This will read the value of the data-suffix attribute of an element with a class of "example".
The other important thing to note when using the .data() method is that you have to omit the data- prefix from the selector to read the value stored in that attribute.
The way you have selected the attribute before the .each() method will work:
$('[data-suffix-attribute="some_value"]');
However, it would be better if you can narrow it down to a specific element like:
$('div[data-suffix-attribute="some_value"]');
This is because the first selector will go through every node in the document which will take more time whereas the second will only go through the div tags in the document.
The attribute selector is supported by the native query selectors so it is fine. As far as future is concerned I don't think in near future it will be a problem.
But it will be better if you can use a element selector attached to the attribute selector like $('div[data-suffix-attribute="delete"]')
If you are very worried about performance it will be a better choice to add a class attribute to the desired elements and then use class selector
It would be better to use id in selector which is fast obviously,
If you have multiple data attributes then it is better to use $('[data-suffix-attribute="delete"]').click();.
Instead of this you can use the parent selector for your data-attribute elements like,
$('#parentId').on('click','[data-suffix-attribute="delete"]',function(){
// delete action happening here
});
#parentId contains all data attribute elements

Change NAME attribute onClick with Jquery

I am trying to change the NAME attribute of a DIV for the content of a textbox using jQuery.
Here's my fiddle: http://jsfiddle.net/e6kCH/
What am I doing wrong?
The biggest problem is a logic problem.
content = document.getElementById("theid").value
This gets the current value of the input. The problem is, it does not get updated when you change the value of the input. To solve that, move the line into the click event handler.
Once the various other javascript errors are fixed (Click the JSLint button!!!), it will work. http://jsfiddle.net/e6kCH/4/
Instead of:
$(#divId).attr("name")=content;
Use:
$("#divId").attr("name", content);
attr is a function not a property.
Keep the same code, only change the JS for this:
$('#buttonId').click(function() {
$('#divId').attr('name', $('#textId').val());
});
Keep in mind it only changes the name of the div, you'll need something like Google Chrome's developer tools to see it change.
The way to use .attr() to set the value of the attribute is:
.attr( attributeName, value )
Description: Set one or more attributes for the set of matched elements.
attributeName: the name of the attribute to set.
value: a value to set for the attribute.
$('#divId').attr("name", content);
Note: don't forget to surround your selectors with quotes (or double quotes) within the jQuery function $()
http://jsfiddle.net/e6kCH/10/ That should get you what you want.

jQuery label 'for' attribute selector

I am using Remy Sharp's labelover plugin for jQuery and I would like to exclude a label with the attribute for and value nature.
Here's an example of the code working:
$(document).ready(function() {
$('form.default label').labelOver('over');
});
and what I'm trying to do:
$(document).ready(function() {
$('form.default label').not($('label').attr('for','nature')).labelOver('over');
});
Can anyone see where I'm going wrong? Feels like I'm pretty close to what I need to do.
attr is not a selector, it's a function that gets the attribute value with attribute name as the 1st argument, or sets it with a new value if one is passed as a 2ng argument.
Also, you excluded labels after selecting them with your not call, because the selector label matched all labels, and attr as I said did not filter that.
To select based on attribute, use this:
$(document).ready(function() {
$("form.default label[for!='nature']").labelOver('over');
});
As you may have guessed, the [attribute='value'] is the selector for an attribute "equal" to some value, and [attribute!='value'] is the "not equal" version of it.
For reference see:
http://api.jquery.com/attribute-not-equal-selector/
For reference on all selectors:
http://api.jquery.com/category/selectors/
This is also referenced at my JavaScript & Web Dev Newsletter site.
.attr('for', 'nature') is setting the value for the for attribute to nature
To filter by attributes, use [attribute="value"]:
$('form.default label').not('[for="nature"]').labelOver('over')
working code: http://jsfiddle.net/3nQbr/1/
$('label').not('[for="nature"]').labelOver('over');

What is the easiest way to link radiobuttons to enable/disable other controls?

My webpage has a bunch of radiobuttons across a bunch of different radiobutton groups. Each radiobutton selection which is made will enable a directly corresponding element in the page and disable all other elements which correspond to the other radiobuttons in the group. What is the easiest way to make this link between the elements?
To use javascript-framework like jQuery by adding attribute 'disabled'.
For example:
$('#targetElement').attr('disabled', 'disabled');
Also you should keep in mind that it's easier to query for parent element and disable it's child elements.
Also, it's good to wait for the document being loaded and then add click-handlers on the radio controls
If you really want a slick way to do something like that, you should look into the eval(). It will allow you to dynamically execute a piece of code, based on a string. So, in your case, you can store this relation (maybe the ID of the corresponding element) as an attribute and then when any radio button is click. You extract this particular attribute and make an expression and eval() it to get it hide:
e.g. using jQuery:
eval( '$("#"' + some_attr + '").show()' );
However, this is generally not considered a good practise, but is pretty "automated".

jQuery Hide using ID

I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});
This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});
I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});
Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.

Categories