Changing an ID using JQuery - javascript

I'm trying to change the ID of an element here:
http://moemonty.com/chirp/CHIRP-JSON-test.html
By using this line:
$('.databaseID').attr('id', 'test');
I would like to change the id of this line to test, so I can proceed to put in a pre-fix via a string and a variable from JSON data. But for now, I just wanted to see if I could replace it with test at this line:
<li class="databaseID" id="np-44701">
Thanks in advance.

Yes, you can change the ID of an element with $().attr(). The code you give will work, but you should ensure that you only change one element:
$('li.databaseID:first').attr('id','test');
On the other hand, I'd urge you to think this through so you're sure that you really need to change the id of an element. I can't quite imagine the circumstance where it would be necessary.

Related

Getting Element Value

I have been trying to solve one issue for about 2days.
Let's imagine I have this kind of Html element in my code (actually anywhere in my code)
<p id='el'>some values</p>
If I want to get the element by id I can write this kind of js code
getElementById('el')
But How can I get the value inside of p
Actually I'm working on Angularjs code and I tried to get the element by id by writing
angular.element('el') //but it not worked
Is there any good or better ways to get the element value?
Please share your ideas. Also if possible not jquery solvings.
Thank you
angular.element uses the 'css query' syntax, so you need '#el' to select element with id 'el'.
In general you could probably use a two way binding (<p>{{values}}</p>) but I don't understand your situation

How to make "val()" work in html form?

I have an online order form which works great! the only thing thats wrong is that i cant seem to find a way to send the input data from the text fields with Naam:, Adres: etc. (which is at the bottom of the code) i found out that i could use this code : $("#txt_name").val(); but it does not work properly. And i don't really know in which function i have to pace de code. Can someone help me? i'm not very experienced with jquery.
working website
javascript without the html
In your code you have the following
$(".txt_name").val();
You are using . as a class selector, you should use
$("#txt_name").val();
With # as an id selector
The first one gives you an array because you are selecting multiple elements and the second one gives you an element. I testet it in the browser console and it returns the value of the #txt_name Naam, but the first one returns undefined since .txt_name does not exist.
The same applies to the other fields, give them and id and you can get their values the same way.
$("#txt_name").val() should return a string which you can store in a variable of pass to a function.
if you want it to return something usefull "#txt_name" must be an input element or an element with a value attribute.
lets say you have a test inpu tag with the id="txt_name" if a user writes something that elements value attribue will be that text, even if you dont see it on the tag itself.
so $("#txt_name").val() will return the value of the value attribute of the htmlElement.

Accessing a parent added via wrap function

I have an input field fld. I wrap this field inside a div in one part of my code.
input.wrap('<div>')
In another part of the code I obtain the field 'fld' which is a jQuery object.
fld.el contains the input field.
Now, I want the div I previously wrapped around this fld.
fld.el.parent() does not work for me. Nor does fld.el.parents(). Tried fld.el.closest('div') with no luck.
If I load the input element again via id, I am able to access the parent objects.
$('#'+fld.id).parent() works. But I do not want to introduce any ids.
Any way in which I can just make use of the fld.el I have and obtain the parent?
What's the ".el" in fld.el.parent() about? Try fld.parent().
Not 100% sure but try:
parentdivs = fld.el.parents("div:first");
OR
parentdivs = fld.parents("div:first");
This will get your first parent div of an item
Without seeing your code and based on the behavior you're describing, I would guess that fld.el is not a jQuery object.
Try:
$(fld.el).parent();
If you're 100% certain it is a jQuery object (and the above doesn't work) you should post your code, or at least recreate your issue using jsfiddle.net

How to retrieve an id of an html element in JavaScript

I want to know is there any way to identify an html element by its "id"?
If so than
how can I call another html element e.g html table by is id all this using java script.
<a id="a" class="menuheader" >New Arrivals</a>
<a id="a1" class="menuheader" >Concepts</a>
I want JavaScript to identify the id of the above two elements and upon identifying the id call another html element i.e a table.
I am not quite sure what you want.
To get an element by its ID, you can use document.getElementById(id).
To get the ID of an element, you need a reference to the element and access the id property: element.id.
To access an object in your DOM by its id you can use document.getElementById("...").
To enumerate the children of a container:
for (var i in containerElement.childNodes)
var elementId = containerElement.childNodes[i].id;
You could always use the jQuery JavaScript framework, which IMO is way better than plain old JavaScript for the most part. In jQuery you would just pass the eleent's ID you want to select (prevexied by the hash symbol to identify the selector is an ID) as a string to the jQuery function. Then , your action would follow a period after the selector
jQuery('#a').actionGoesHere()
But you would more commonly call the jQuery function by it's alias, the dollar sign:
$('#a').actionGoesHere()
Not so sure by what your second part of the question means, so if you clear that up a little, I'd be glad to help.
https://developer.mozilla.org/en/document.getElementById
I think something like this is what you are trying to do if I understand you correctly.
The first one is if you are using named anchors to call your tables
$("a").click(function () {
if ($this.has($("#a"))) { $this.attr("href", "#myfirsttable") }
if ($this.has($("#a1"))) { $this.attr("href", "#mysecondtable") }
});
I haven't had time to try it out yet, and I'm a bit sleepy right now and not at my sharpest, but this is the simplest way I can think of at the moment.

Stick ID to the HTML element (using js) instead of id-attribute?

First post on stackoverflow. Hope everything is right!
I'm thinking of attaching an ID value to the HTML element itself via JavaScript, instead of using the HTML id attribute.
For instance, say that JavaScript variable htmlElement is a div. So htmlElement.cssName would tell us its CSS class.
Now, how about doing
htmlElement.idProperty = "someValue"
in JavaScript instead of doing <div id="someValue">? Then I can use the idProperty in say event handlers.
this.idProperty
That simple!
Is there something wrong in doing so?
EDIT: Thanks for yor answers! Very helpful and instructive. I wish I could check green on all of them!
no, you can do it the way you like it, if you are dynamically creating this item you should use this method, if you are doing this inside html I recommend you to just put the name of the id in html too.
However a small note. Use element.id instead of idProperty.
element.id = 'my-id';
You can use the createAttribute method to add an id to the element like this:
id = document.createAttribute('id');
id.value = "someValue";
htmlElement.setAttributeNode(id);
What you're doing there is adding a runtime property (in your case, called idProperty) to an HTMLElement object instance. You can get away with doing that in your JavaScript code (the Prototype library does it all the time). Makes me uncomfortable, but it does work on all major browsers.
If you want to be able to specify these in HTML markup as well, though, I'd use attributes instead. You can create attributes with any names you want, although to be careful I'd use names like data-xyz (e.g., use a data- prefix) as that's the HTML5 standard way of using your own attributes. Then you use getAttribute to get the value and setAttribute to set/update the value.

Categories

Resources