showing undefined data and cannot find my dropdown id - javascript

I have question about the query selector, because I am passing a lot of function for my textboxes that will update different chart when using the dropdown list. I am always getting undefined in my console.log() Undefined screenshot this is my drop down Dropdown Screenshot.
const selectory = $('#needed').filter(":selected").val();
//const selectory = $("div.chartNine select").val();
function interactiveChart() {
console.log(selectory)
console.log(bzvaqxnufhyd1.value)
if (selectory == 'vdn6') {
updatingValue = [bzvaqxnufhyd1.value, bzvaqxnufhyd2.value, bzvaqxnufhyd3.value, bzvaqxnufhyd4.value, bzvaqxnufhyd5.value, bzvaqxnufhyd6.value, bzvaqxnufhyd7.value];
nineChart2.data.datasets[0].data = updatingValue;
nineChart2.update();
nineChart2.render(); }
}
needed is my id tag for my select under the div chartNine.
and this is my textbox
<input type="text3" id="bzvaqxnufhyd1" onchange="interactiveChart()" value="0" />
I will be using that function for 7 different charts that is why I need to have that select value so whenever I selected a new drop down, if else will do the magic in my interactiveChart function.
I hope someone can help me or lighten me up regarding my situation. Thank you.

Solved. I just added multifunction on my textbox which is this one.
<input type="text3" id="bzvaqxnufhyd1" onchange="interactiveChart()" value="0" />

Related

How can I change selected option based on database value?

In order to get you familiar with my work, I have table filled with data from database and it's basically CRUD - Create, Read, Update, Delete table.
Now, I have one table column where are EDIT and DELETE buttons placed. When I click on EDIT button, Bootstrap 5 modal pop-ups and inside of that modal there're <input> elements, also filled with data from database. Everything works fine (is filled correctly and based on ID of selected row) except that I can't get <select> to change its value on value from database.
Here's my <select> element (HTML):
<div class="mb-3">
<select name="carStatus" id="carStatus" class="form-control form-control-lg" required>
<option value="U obradi" selected disabled hidden></option>
<option value="Na cekanju">Na cekanju</option>
<option value="U procesu">U procesu</option>
<option value="Zavrseno">Zavrseno</option>
</select>
<div class="invalid-feedback">Niste unijeli status!</div>
</div>
This is js code where I handle values of input fields inside of modal:
// Fill in values and handle edit event
tbody.addEventListener("click", (e) => {
if (e.target && e.target.matches("a.editLink")) {
e.preventDefault();
let id = e.target.getAttribute("id");
editUser(id);
}
});
const editUser = async (id) => {
const data = await fetch(`action.php?edit=1&id=${id}`, {
method: "GET",
});
const response = await data.json();
//Here I am handling value of carStatus (<select>)
if(response.carStatus == "Na cekanju"){
selectElement("carStatus", 'Na cekanju');
}
else if(response.carStatus == "U procesu"){
selectElement("carStatus", 'U procesu');
}
else if(response.carStatus == "Zavrseno"){
selectElement("carStatus", 'Zavrseno');
}
else{
selectElement('carStatus', '');
}
//There are a lot of others element that I handle on the way like this:
document.getElementById("id").value = response.id; //This works
enter code here
//But I didn't want to put all of them because it'd take too much space...
//Here's my function where I am trying to handle value of selected element:
function selectElement(request, valueToSelect) {
let element = document.getElementById(request);
element.value = valueToSelect;
//Also I am getting the correct value -> when I select some row where Zavrseno is placed I really get Zavrseno in console...
console.log(response.carStatus);
}
};
Ohh, by the way there are 4 possible values that can be selected:
"U obradi", "Na cekanju", "U procesu", "Zavrseno"
I actually found out what's the reason why my code didn't work, even though it should've worked perfectly fine, because code itself was written correctly.
The problem was I also had the add modal at the same page with same id which was carStatus (id="carStatus"). Removing it was enough to fix the problem.
Now, the thing is I know that you can't have same id's at the same page, but can somebody explain me why's element which is placed inside Add modal causing problem when I am triggering this action on edit button?

How to create a clickable list with multiple values in an element?

I am trying to create a list of names an user could chose from to select a object with multiple hidden values. I work with a PHP backend.
The code I wrote works but I think it is probably not the right way to approach the problem and could be written alot better, but I can't seem to find a better way.
Right now I print a <div> for every object which are clients in my case. Within the div I have four checkboxes that are hidden, which I check and uncheck on the background with a javascript function. The values of those checkboxes is what I need in javascript for an API call after the user choses the client.
I select and deselect the with a javascript function.
foreach($clients as $client) {
echo '<div class="'.$client->name.'-'.$client->id.' client-style" name="'.$client->name.'">
<input type="checkbox" class="'.$client->id.'" name="client_id" value="'.$client->id.'">
<input type="checkbox" class="'.$client->id.'" name="client_fb" value="'.$client->facebook.'">
<input type="checkbox" class="'.$client->id.'" name="client_insta" value="'.$client->instagram.'">
<input type="checkbox" " class="'.$client->id.'" name="client_wb" value="'.$client->website.'"></div>';
}
For every element I create an on click event handler
for (var i = 0; i < clientList.length; i++) {
const {name, id} = clientList[i];
$(`.${name}-${id}`).on('click', function() {
selectClientFromList({name, id});
});
}
I am trying to get a list of clickable "names". When a "name" is clicked, you want to get the "name" but also "id", "facebook", "instagram", "website".
Might be useful to use the <select> tag with multiple values like this but I don't want a dropdown. I need a scrollable list, because I also have use searchbar for this list.
With a lot of clients the html would grow fast. How do I clean my php code and keep the information about a client that the user selected?
Thanks in advance!
A good approach can be to use a hidden input. Give your div a class and then
foreach($clients as $client) {
echo '
<div class="'. $client->name.'-'.$client->id.' client-style" name="'.$client->name.'">
<input type="hidden" class="aclass '.$client->id.'" name="client_id" value="'.$client->id.'">
<input type="hidden" class="aclass '.$client->id.'" name="client_fb" value="'.$client->facebook.'">
<input type="hidden" class="aclass '.$client->id.'" name="client_insta" value="'.$client->instagram.'">
<input type="hidden" class="aclass '.$client->id.'" name="client_wb" value="'.$client->website.'"></div>';
}
And then instead of creating a click handler everytime. One works too.
$(`.aclass`).on('click', function() {
let type = $(this).attr('name'); // client_id or client_fb
let client_id = $(this).attr('class').replace("aclass",""); // $client->id's value is here
let value = $(this).val(); // credentials
});

Angular UI-Bootstrap Typeahead: Accept top item as selected on ENTER

Simple question, but is there a way to have the first item in the dropdown results be the selected item when ENTER is pressed?
An example of this is the user types in "PC0" and sees "PC001" listed as the first option, can we have it use "PC001" on the typeahead-on-select option when ENTER is hit?
I am currently using typeahead-on-select to run a function that calls the input via id and grabs the Value for use in the function. It seems to use what was entered into the textbox instead of the selected value, either on ENTER or Click.
HTML:
<input id="applicationComboBox"
type="text"
ng-model="applicationComboBox"
uib-typeahead="a as a.Value for a in applicationList | filter:$viewValue"
typeahead-on-select="getApplication()"
class="form-control">
JS for the getApplicationValue() looks like this:
$scope.getApplication = function () {
$scope.ApplicationValue = applicationComboBox.value;
}
The issue is the applicationComboBox.value is what text the user has typed into the input at the time of the click/enter instead of the clicked/highlighted value respectively. So in previous example "PC0" would be the value instead of "PC001".
When the user selects/press enter the ng-model applicationCombox is is updated automatically. If you want another value $scope.ApplicationValue to be updated after the selection, do the following
$scope.applicationCombox = ""; //your existing model.
$scope.getApplication = function () {
$scope.ApplicationValue = $scope.applicationCombox;
}
Let us know.
I was able to get a solution that worked for me.
HTML:
<input id="applicationComboBox"
type="text"
ng-model="applicationComboBox"
uib-typeahead="a as a.Value for a in applicationList | filter:$viewValue"
typeahead-on-select="onApplicationSelect($item, $model, $label, a)"
class="form-control">
JS:
$scope.onApplicationSelect = function (item, model, label, application) {
applicationComboBox.value= item.Value;
}

Remove deselected checkbox value from Array using Angular

This is simple one but i still somehow couldn't get it to work.
I have default value checked, checkbox. So when edit, of course the default value is chosen, but later I want to remove the default value and choose another value. Here it is
array1=[] //empty
After I check a checkbox, it will inserted to this array
array1=["sun"]
If I select 3 values (array1["sun","stars","moon"])
but I deselect the first selection (the default selection), it will be still in the array. (array1["sun","stars","moon"]) but I the expected result is this:
array1["stars","moon"]
No more first selection. So how to remove deselected value from array using Angular/Javascript?
I have tried use splice, remove and set
Same thing developed and used in project :
Template side :
<label *ngFor="let hobby of hobbies" #checkbox class="mdl-checkbox mdl-js-checkbox">
<input type="checkbox" name="hobbies" [value]="hobby"
(change)="populateMyHobbies(hobby,$event.target.checked)" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">{{hobby}}</span>
</label>
Component Side :
selectedHobbies = [];
populateMyHobbies(value , status:boolean)
{
if(this.selectedHobbies.indexOf(value) === -1 && status)
{
this.selectedHobbies.push(value);
}
else if(!status)
{
let index = this.selectedHobbies.indexOf(value);
this.selectedHobbies.splice(index, 1);
}
}
Here selectedHobbies will give you what you want.
Have to change just name as per your app.
i used it once in my project. change the code according to your need. logic is same.
html part
<input type="checkbox" value="{{category._id}}" (change)="pushpopcategory(category._id)" id="{{category._id}}">
component code
pushpopcategory(value) {
if ((<HTMLInputElement>document.getElementById(value)).checked) {
this.categoryAdd.push(value);
} else {
let indexx = this.categoryAdd.indexOf(value);
this.categoryAdd.splice(indexx, 1);
}
}

React: get value from a select field in a DOM node

I'm a novice back end developer and I've been tasked with fixing a feature and I'm stuck on the react portion. I can't seem to find the appropriate syntax to get a value from a select component and that's pretty much my whole issue. I've looked at lots of other posts and the react docs and nothing I'm trying is working. An example of markup is as follows(There's lots of select fields in this view):
<div className="grid-content noscroll medium-6 small-12" style={{overflow: 'visible'}}>
<div className="grid-content"><label>Program</label></div>
<div className="grid-content" style={{overflow: 'visible'}}>
<Select
key="program_key"
ref="program_key"
multi={false}
value={ jobData && jobData.program_key ? jobData.program_key : null}
options={programOptions}
onChange={this.changeField.bind(null, 'program_key')}
/>
</div>
</div>
Then the event handler is as follows:
changeField: function(propName) {
var field = this.refs[propName].getDOMNode();
console.log(field.input);
console.log(field);
var nextProp = field.value.length > 0 ? field.value : null;
var job = Object.assign({}, this.state.job);
job.payload.data[propName] = nextProp;
if(propName === 'user_id') {
this.changeUserId = true
}
this.setState({
job: job,
updated: false
});
}
The result of console.log(field) is:
<div class="Select is-searchable has-value" data-reactid=".0.0.2.0.1.0.1.1.0.1.1.$program_key">
<input type="hidden" value="NHDS" data-reactid=".0.0.2.0.1.0.1.1.0.1.1.$program_key.0">
It goes on from there but the 'value="NHDS"' is the piece that I need and I cannot figure out how to get to it for the life of me. Please let me know if I can clarify or improve this question. Thanks in advance.
Based on your example code it looks like you're using the react-select component https://github.com/JedWatson/react-select. onChange is going to fire with the new changed value as its prop. In your case the changeField method has a bound param ('program_key') that will be injected as the function's first parameter. The next parameter should be the selected value. To test this you can execute console.log(arguments) within the changeField function, it should return an array with 'program_key' and the new value. If that works just add a new param to changeField named newValue and use it where needed.
Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
https://github.com/JedWatson/react-select#further-options

Categories