Change NAME attribute onClick with Jquery - javascript

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.

Related

Javascript put attribute to a element

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'});

Getting attribute set by a function jQuery

I have a function attached to the div #Browse's click event that toggles a variable isOpen to true or false. Another click event has the following statements
alert($("#Browse").attr('isOpen'));
alert(document.getElementById('Browse').isOpen);
The first one yields "undefined" while the second one says true or false and is correct. How can I get the value of isOpen using jQuery?
Use data attributes to both set and get the data:
// to set
$("#Browse").data('isOpen', true)
// to get
$("#Browse").data('isOpen')
Documentation
jQuery data method - http://api.jquery.com/data/
There is no "jQuery way" to do this, because isOpen is an ad-hoc property. If you are able to change how the property is set, follow the recommendations in Chris' answer.
Otherwise, the closest you can get is to use jQuery to get the DOM element, and then unwrap it:
alert($("#Browse")[0].isOpen);
With new versions of jQuery, you need to use .prop to get this.
alert($("#Browse").prop('isOpen'));
To get access to the dom element in jQuery, you have to get the element by its index in the jQuery collection: With an id, there's hopefully only one element in your collection, so you can use get(0)
$('#Browse').get(0).isOpen;
For more convinient setting of attributes on jQuery elements, just use the data method

Append jQuery values not affected by javascript

I'm appending values into a div through jQuery, but I've realized what gets appended isn't affected by my javascript functions.
$(".div").append("<input type='text' class='textForm' placement='Value' />");
What I have setup in my javascript code is that it takes the attribute placement of any class "textForm" and makes it a value. But I've realized that once a value is appended, it isn't effected by my javascript. Any ideas on how to fix this issue?
If you are currently using
$(".textForm").click(){}
then now use
$(document).on("click",".textForm",function(){//Dtuff here})
This will attach the .on("click") to the document object and as such it will be enabled on all elements that exist and all elements that are created matching the .textForm selector.
I guess you have some events bounded to some elements like which are not working after the append . something like this.
$(function(){
$(".someClass").click(function(){
//dome some thing
});
});
If you want the same functionality to work on the newly injected( dynamically added via append /jquery ajax etc...) DOM elements, you should consider using jquery on. So your code should be changed like this
$(function(){
$(document).on("click",".someClass",function(){
//dome some thing
});
});
on will work for current and future elements
I'm not sure I understand the bit about why you're copying values from the placement attribute into the input value, but I can offer this suggestion to get your form fields to appear.
$("div").each(function() {
$(this).append($("<input type='text' class='textForm' placement='Value' />"))
});
I'm assuming that you want to identify your div via the tag name, and not the class name. If this is the case, your jQuery selector will need to be "div", and not ".div". Also, you need to wrap your HTML in $() in order to generate a DOM element.

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');

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