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

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.

Related

How to match array values which is inside v-for loop in Vuejs?

In my code, I have 3 arrays called, boxes, paints, matchingdata. By using those arrays, i want to perfome the functionality.
After the checkbox is clicked, At present i am showing some information related to paints array
So i need to set the condition here like.
if checkox is clicked, i only need to show the paint array two id's called (100, 101)
You must return something from the computed property status
Just remove the template inside script and add it inside the template inside the other template where you have the rest of html code and it should work well.

JS - dynamic inserting items into array on button click

So while creating a project I've encounter a problem. I have a container, let's call it container with assigned index, so it looks like container0 etc. Inside that container I have buttons to copy ( and delete ) this particular segment with all it's data. I also have index array to make sure all id's are unique. I have a working project, but I want to solve this particular situation, when I have multiple containers, and in page source containers have indexes like [0,1,5,8,6,7,9,12,10,11]. What I am doing right now is whenever somebody clicks button inside let's say container[7] and user wants to copy that container 3 times I will have [0,1,5,8,6,7,13,14,15,9,12,10,11], and the way I've solved this problem is inside button handler I get id of container like const index = parseInt(e.target.id.match(/\d+/)[0]); and then using querySelector I select which container I want to get data from. What I would like for you to help me figure out, how may I get container Id inside which button was clicked in different, easier way instead of matching id from button ( copy and delete button also have id, which is equal to container id). Also one more thing, I use eventDelegetion to add eventListeners for newly created segments.

How does jQuery differentiate between function calls (e.g. on click) when using variable element IDs?

How does jQuery differentiate between function calls (e.g. on click) when using variable element IDs?
I have a number of files that are contained in a table, each row containing a checkbox and filename.
Each of these checkbox input elements has a uniquely generated ID which is "Item_" followed by a 5 unique digit number.
Ideally, I'd like to process the state of a checkbox when it the user selects it or deselects it.
If I were to use the following to access when the user clicks on an item from the list, how would jQuery respond to the checkbox set/unset?
$("#Item_" + file_number).some_function_here();
Would jQuery keep track of the elements on the page which have the ID of Item_#### (e.g. Item_100, Item_1234, etc.)? These items would not be dynamic so the page will only contain elements that part of the page when it is loaded, so all the information jQuery needs for the processing is available when the page is first loaded. But I want to avoid generating a processing function for each element in the list to minimize the size of the page and keep the code clean so that the javascript/jquery would be the same across the pages, and only the file items would be changed.
Thank you for any help you can provide.
How does jQuery differentiate between function calls (e.g. on click) when using variable element IDs?
They're stored in a closure inside jQuery's internals. It's not too dissimilar from the following:
const getElements = (selector) => {
const elements = document.querySelectorAll(elements);
return {
someFn() {
// do something with every element in `elements`
}
};
};
For what you're doing, it sounds like you should give each item a class name instead of a separate ID, then add a change listener to all elements with that class. Then, the this inside the listener will refer to the element that was changed:
$('.item').on('change', function() {
console.log(this); // refers to the input
console.log('was just changed to', this.checked);
});
And then you can process the change appropriately, depending on the element and the checkbox state.

How can I manipulate HTML elements which are added during the runtime?

The code im working on first makes a call to the database. Through this call, it is determined wether there are available workstations in the office or not.
If there are available workstations, "option" elements are added to a "select" element. This is achieved via jquery:
$('#idofselectelement').html(data)
Where "data" represents the markup to be inserted into the "select" element.
Now, my problem is that I'm trying to implement some code which checks wether your "favorite workstation" is available in the selected timeframe and then automatically preselects the respective workstation from the dropdownmenu in the "select" element. Everything is working so far, except for the selection of the workstation from the dropdown menu :/
The part of
I'm rather new to programming with javascript and the HTML DOM, so I'm not sure whether the fact that the options im trying to chose from are added during the runtime?
The code I've tried to manipulate the dropdown menu with is like this:
$('#idofselectelement').val(favoriteworkstation);
However, as I said, this doesn't work.
I've also already tried to output (console.log) the select element's length property right after the code which adds the markup with the available options has run.
But according to the output Im getting, the length is zero Oo
However, the dropdownmenu is definitely being created AND I can indeed manipulate it, but unfortunately not in the way I want to.
If I add an onclick event which sets the value of the respective select element, then the value in the select field indeed changes to the value specified in the event handler.
So I wonder why I can't have the favorite workstation preselected after the timeframe was chosen...
EDIT:
For further insight into the problem, I'm adding a bit more code here.
This is what the HTML Select element looks like BEFORE anything is added during the runtime:
<label for="#sitz">Sitz Nr.</label>
<select type="text" class="form-control" id="sitz" name="sitz" value="">
the markup which is added during the runtime
<option>workstationvalue</option>
<option>workstationvalue</option>
//and so on, depending on the situation...
This is a timing issue.
The js trying to find the element is faster than the actual add of the element to DOM.
Can you describe what you want to do? You might be able to do that before adding the element to DOM.
Editing before adding to DOM is possible if you convert your String to an jQuery object
var $jqueryObject = $(data);
$jqueryObject.find('.classYouSearch').val(value);
$('.whereToAd').html($jqueryObject);

Get values from custom tag of a textbox(autocomplete) and push into an array

I have a one text-box(autocomplete) on page with id main_text,whose value changes dynamically.
'<'my_custom_tag'>'name1|name2|address|country|provison'<'/my_custom_tag'>'
In above tag please do not consider any single quote, for display purpose i have mentioned it over here,other wise it was only displaying name1|name2|address|country|provison.
I want to get all the value between tags and push it into an array. I have tried using .result method of jquery but it was showing an error stating $(...).result not found
$("#main_text").result(function(event,data,formatted){}
Any alternative approach to achieve the same, we need to .split the value from | so i can get individual values ,after that i will set those values into another text-box.
$("my_name1").val(my_array[0]);
$("my_name2").val(my_array[1]);
$("my_address").val(my_array[2]);
$("my_country").val(my_array[3]);
$("my_provison").val(my_array[4]);
Also, if you check this link jqueryui.com/autocomplete it states .autocomplete is not a function in DOM
values = $("my_custom_tag").text().split("|");

Categories

Resources