get index of element selected by Document.getElementByID("id_name") - javascript

For a page ("Bill4Time"), the Dashboard shows a table for displaying time entries and entering a new time entry but several control elements do not have ID's associated with them. Interestingly enough, the control to add a new time entry line (an icon of a clipboard with a small plus sign in the lower right hand corner) always has the same index number (so I can select it with Document.all("index_no") to add a new time entry. But once you edit that line by entering a new time entry, the control icon changes (to a generic clipboard, like all the other time entries in the table) and the index becomes dynamic -- and there is no id associated with that control. However, I found that the parent element (i.e., the table cell) does have a unique ID which never changes (while it is the most recently added time entry) so currently I go to it (using Document.getElementByID("unique_id").focus()) and then send a {tab} to move over to the control element (and send {enter} to go to the correct details page).
If I could get the index number of the unique_id element, and increment that by one, I could more reliably get to the control I want, so my question is, if one has gotten a DOM element by id, how can one find its index number?
When I search here (or google) I get a lot of results for finding the index of the included elements within the parent, or results based on .selectedIndex and the like, and I suppose I could loop through all the DOM elements until I find the one with ID = unique_id, but there should be a better way to get an index number of a selected element.
TIA,

At least if doing it with IE and AutoHotkey this will give you the index
index := wb.document.getElementByID("unique_id").sourceIndex
But you don't need the index if you have the parent element
element := wb.document.getElementByID("unique_id").childnodes[0]
Also a lot of times elements that don't have an ID often have a Name or Class attribute, both of them can also be used to find the element you need...

You mentioned looping, but I think that may be the way to do it since IDs are unique. Getting a matching element by its ID gives you that element, not an array of elements (like if you matched by class) which would all have an index.
If you know the ID of the table you want to focus on, you can do something like this if you don't want to use jQuery.
//get all the tables
var thisEleArr = document.getElementsByTagName('table');
var indexOfTableIWant;
//loop through the array of tables
for (var i=0;i<thisEleArr.length;i++) {
//if the id of the current table in the loop matches the known id
if (thisEleArr[i].getAttribute('id')==='knownTableID') {
//get the index of it
indexOfTableIWant = i;
}
}
My example using lists: https://jsfiddle.net/ksumarine/ga06n54u/

Related

How to make js generated elements interact properly with static html elements?

Js student here.
I have made an example CODEPEN.
In this test case,as you can see in the above code on the right side i have 6 hardcoded html inputs,3 for first name and 3 for last name.
On the left side i have a <button> which is called ADD,and with every click of this button (with a maximum of 3 clicks) the function addInputs() generates a <li>element inside <ol id="originContainer"></ol>.
This generated <li> element contains 2 html inputs,one for the first name and one for the last name,every generated input gets a unique id using a counter variable (var inputscounter=0;).
The goal is to copy dynamically,whatever i type in the generated inputs -to the left- to the hardcoded ones -to the right-,first name to first name,last name to last name,all that by using the function changeValues() which runs with every keyup of the generated inputs.
My problem is,the function changeValues() works fine but only after i generate all 3 of the elements ( As its visualized in THIS picture ) on the left,but not with just one of them,or 2 ( like THIS )
What am i missing ?
When you try to get the value of an element that is not created yet, the function throws an error. That is, in your changeValue function where you try to get the value attribute on FnameX when it is undefined (since it can't find the element in the DOM). Same for adding the click handlers on undefined elements.
You could fix that by either checking if Fname1 etc are defined before you try to get their value.
A nicer approach would be to store in an array which elements you have generated so far. Then loop over those elements and transfer its values.
You can either store an array of ids you can use to find an element when you don't need to access them that often. In this case I would store the objects themselves.
Also you don't have to add click handlers on every element, every time you add one.

Storing post display order in database

I am developing a web application which will have images displayed in a slider. It is important that I am able to modify the order that they are displayed in.
Currently, I have a column in the table of images called 'order', which must be set to ensure the ordering works correctly, but changing it requires changing every other, too, which becomes tricky when dealing with hundreds of records.
This table, as well as queries for modifying it, are in development, so it's completely fine to change the way I do this.
My questions are:
When I'm inserting a new row, how can I make sure it appears at the end of the list? Auto-Increment in SQL tends to leave gaps if you delete entries from the table. How do I make sure that the row is assigned an order 1 greater than the highest order in the table?
How do I reorder the table? Imagine that I use a drag and drop interface (or similar) to reorder one image, bringing it to the top, or a different part of the list. If I do that, I need to reset the numbering of every item, which is, again, inefficient when dealing with hundreds of rows.
How do I prevent two rows from having the same order at any given time? The UNIQUE flag on the column? Presumably if I set that flag, changing the order from, say, 8 in one row opens up another to use that number. Right?
Thank you for your time, and I hope this isn't too vague a question to be easily answered!
Query the table you are about to insert into to find the MAX id in the table. Then on your insert just do this +1.
When re-ordering, say you want to set image order 6 to order 3. You will want to update all rows from order 3 and onwards to order+1 then set the image to order 3.
UPDATE table SET id = id+1 WHERE id IN (SELECT * FROM table where id >= 3)
If you are using unique on the order column to re-order you will have to update the current value to a temp value such as 99999, then use method in 2. However method 2 should keep this table from receiving any duplicated values.
sidenote
You could on delete of a picture re-evaluate the ids to keep no gaps
UPDATE table SET id = id-1 WHERE id IN (SELECT * from TABLE WHERE id > 3)
Where 3 is the deleted id
It will be in the end of the list. Just use auto increment feature and do not set ID manually (like lastID + 1) and you'll never have described problem.
You can allow user to change order of the list and then just update all order cells (for each member of the list). Or you can use Ajax and exchange order value for two members every time user drag-and-drops.
Use one of approaches described in 2 and you'll never have this problem.

How we can pop element from one table and push the same element in other table when i click the submit button in Javascript?

I am new in javascript. So, I need to help.
Blockquote
var fruits = ["mango","apple","orange","kiwi"]
Blockquote
This is my array. I have two box in HTML. In One box there are one array which holds 4 Element and In Second box there is also An Empty Array.
Now when , I can perform onclick function on that time One element Pop from one box and push the same Element in other box at same time.
And Also i want to move all elements one by one. not all elements move in single click.
I want to move all elements in other box in 4 click, because of there are 4 Elements in array. So Every time i want to pop one element and Push 1 element in other.
So, Now How can i Perform this Push-pop operation in JavaScript. I really have no idea about this. Please help. Thanks in Advance..!!!
Try this, pop removes the last one from an array and returns it. Push adds to the end of an array. Put together you can remove an item from ine array and add to a different one in one statement.
var fruits = ["mango","apple","orange","kiwi"];
var emptyArray = [];
emptyArray.push(fruits.pop());

posts array of all element names by class

I have numerous elements on a page. I am using Jquery toggle to toggle a class.
I need to post a php array containing the names of all the elements that contained that class. (were toggled on).
My first thought was to simply create an form with display:none with a listbox. Everytime the element is toggled the name will be added to the listbox and then when the user clicks next all the values from the listbox are posted to the next page. I am hoping that there might be a cleaner and simpler solution than this.
So, to clarify, I am wanting to detect all the elements that I toggled on, and post those values to another page.
How would I achieve this?
Thanks
You can create an array of all the element names (is this the name attribute, or the id) with the .map() function:
var names = $(".targetClassName").map(function() {
return this.name; //takes the `name` attribute, change to `id` for ID
}).get();

Ways to make a change listener for all HTML objects following similar ID structure?

I have several hundred HTML input and select fields on a page in table format, all with unique ID's. The ID's all follow a basic structure, and there are 3 particular ID structures I'd like to listen to for change. ID structure is described below:
xx-rownumber-jobnumber
The xx is simply a 2 digit letter combination to describe the column, rownumber is the row number of the table the field exists on, and jobnumber is just the job number of the job being bid on (will be the same for every item on a single table).
I need to listen to all ID's that follow the structure:
js-rownumber-jobnumber
wi-rownumber-jobnumber
qt-rownumber-jobnumber
How can this be achieved?
Not sure if this helps, but at any one time I will know the maximum number of rows on the screen, but this number is variable (overall max of 300).
Extra information -
The general problem I have here is I have a table being used to bid jobs. Each row is for a line item for the bid, and the various columns hold information about that line item. Once a bid has been created, it has to be finalized. Once it is finalized, any changes need to be recorded to notify someone that the changes need to be run by the client.
You can use jQuery to listen for the change event, and then use regular expressions to parse the IDs once a change event has occurred.
Xenph Yan's post seems very relevant to what you're trying to accomplish: jQuery selector regular expressions. Specifically, the regex selector plugin for jQuery:
http://james.padolsey.com/javascript/regex-selector-for-jquery/.
You could delegate it to the parent:
var table = document.getElementById('parentTable');
table.addEventListener('change', function(ev) {
var target = ev.target;
// where the regex below matches the pattern
if ( target.id.match(/(.*?)-(\d+)-(\d+)/) ) {
console.log(target);
}
});
Please note that the change event does not bubble in IE < 9. You may be able to use onpropertychange for those, but I don't know for certain. Using jQuery would also allow the change event to bubble in previous versions of IE.
Using jQuery you can try to find elements whose id begin with js $("[id^=js]"), wi $("[id^=wi]") and qt $("[id^=qt]").
You can use wildcards in selectors in various ways. Here is the jquery documentation on the subject
If changing the design of the existing table is an option, then I think you should be better off with assigning multiple classes to each element (input) rather than IDs:
For instance,
Assign class row-i to all elements belonging to row i
Assign class job-j to all elements belonging to job j
Assign class attr-c to all elements belonging to column c
Now you can find any input element by specifying any of row, job & attr.
In this specific case, you can listen various events on input.attr-js, input.attr-wi or input.attr-qt. I think this approach should save you a lot of overhead of working with regex and provide you a tag based search in your input fields.

Categories

Resources