jQuery next select element on row - javascript

I have 2 select boxes in my html called type and brand. When the type is changed i use the onchange event to create a ajax request to the server and retrieve the brands which produce the products in the type field. That is all working fine but i need to load the retrieved data in the brand select and i don't know how to do that because i have multiple rows containing type and brand select boxes. How can i find the next select element on the same row as the changed type?
My code
HTML:
<tr>
<td>
<select id="type" onchange="on_part_type_changed(this)" name "type[]"> --[options]-- </select>
</td>
<td>
<select id="brand" name="brand[]"></select>
</td>
</tr>
Javascript:
function on_part_type_changed(selectObject) {
// ajax call here (works)
// now need to update the brand select that is on the same row as selectObject (jQuery)
}

Save the brand object before you do the ajax call. It'll be ready for you once the ajax response comes back.
function on_part_type_changed(selectObject) {
//clumsy way of finding the brand object nextdoor
var brandObj=selectObject.parent().next().children('.brand');
// ajax call here
someKindOfAjax(response) {
//put response into brand object we got earlier
brandObj.html(response);
}
}
As others have said, if there can be multiple selects that are "brand", it should be a class instead of an ID.

Try this
function on_part_type_changed(selectObject) {
$(selectObject).next('.brand').html('...');
}

Related

Can't load SelectTagHelper when using the multiple attribute

As a simple test I'm passing 2 lists to a javascript function, only the list without a multiple attribute populates, the second list does get the "select one or more items" option but not 1,2,3 and only after I lose focus from list2. Can anyone tell me how I can repopulate the multiselect?
<select id="lstTest"></select>
<select id="lstTest2" multiple="multiple"></select>
function TestList(obj) {
var x = $(obj);
x.append('<option value="">Select one or more items</option>');
x.append('<option value="1">1</option>');
x.append('<option value="2">2</option>');
x.append('<option value="3">3</option>');
}
Empty Lists
List 1 after javascript call
List 2 after javascript call
Turns out the select is referencing custom js to turn it into a checkbox list as a way of selecting the items instead of highlighting. I need to treat it as a checkbox list and not just a list of options, which I'm still not sure how to do, I need to clear and add new checkboxes.

Clear dropdown Select2 populated from JSP / Ajax with a button only works once

I have a page in which to make a query to the database, 12 filters are applied (each filter corresponds to a select2 dropdown).
When the page loads, the selects are filled by default with data from the java controller.
Example from a jsp page:
<select id="selectFPA" name="selectFPA" form="formResult" class="form-control">
<option selected>All the results</option>
<c:forEach items="${fpaList}" var="fpaList">
<option><c:out value="${fpaList.fpaname}" /></option>
</c:forEach>
</select>
But, if the user selects any value in any of the filters, all the filters are updated based on the chosen selection, through an AJAX call.
For example, suppose we have two select filters (dropdown):
Select 1 (Animal group):
- Birds
- Mammals
Select 2 (Animal name):
- Parrot
- Dog
If the user chooses mammals, an AJAX function will be called that will query the database and update the content of the select 2, eliminating the Parrot option. (And so on with up to 12 filters).
The problem comes when I want to clear the applied filters and return to the original select content (the content that appears by default every time the page is loaded from the java controller).
I have tried many things, from similar Stackoverflow questions without success.
The last thing I tried was:
Save the initial content of the select in a variable:
const fpa = $("#selectFPA").find("option").clone();
Onclick event (Reset filters button)
$("#ResetFilters").on("click",function() {
//first we empty the content
$('#selectFPA').empty().trigger('change.select2');
//original value injection
$("#selectFPA").html(fpa),
$('#selectFPA').trigger('change.select2')
})
This works fine if I press the button once, if I press the button a second time, the selects randomly select different values by default and they behave strangely.
I know this is a very specific question, but could someone help me? What am I doing wrong?
Thank you.
I think as per this answer you cannot create constant in jquery that's the reason only first time it works and next time it doesn't .Alternate, solution might be assign that clone value to some div and fetch it anytime when needed.Like below :
//call when page loads for the first time
$(document).ready(function() {
//cloning
var fpa = $("#selectFPA").find("option").clone();
//assigning value to div
$("#abc").html(fpa);
$("#ResetFilters").on("click", function() {
//getting clone value from div
var c = $("#abc").find("option").clone();
//first we empty the content
// $('#selectFPA').empty().trigger('change.select2');
//original value injection
$("#selectFPA").html(c);
//$('#selectFPA').trigger('change.select2')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectFPA" name="selectFPA" form="formResult" class="form-control">
<option selected>All the results</option>
<option>1</option>
<option>2</option>
</select>
<button id="ResetFilters">Reset</button>
<div id="abc" style="display:none"></div>

Google Script - Form - live update for a text field

My client has a huge list of contacts.
I created a form with a scrolling list, in order to select a contact. The issue is that the scrolling list is too long.
Is there a way (and if so, how?) for my client to start typing the first letters of a contact name, so the 'field area' (or other) fills in automatically the correspondant contact name?
Thank you in advance for your help.
Kind regards,
You can load the select with this javascript:
function updateSelect(vA)
{
var select = document.getElementById("sel1");//or whatever you select id is
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}
The html select element:
<select id="sel1">
<option value="" selected></option>
</select>
I often load selects when the page loads with something like this:
$(function(){
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();//a gs function which passes an array to updateSelect via the success handler
});
That way I can use a spreadsheet to store the values that I want. In your case you may want to filter them alphabetically perhaps. And you might want to pass the getSelectOptioptions() function or whatever you call it a parameter to determine how to filter the list.

Grails if checks html select value

I have a problem with checking the select/grails select tag value via grails if tag. My code looks like this,
html:
<select id="select1" name="select1">
<option value=2>2</option>
<option value=3>3</option>
</select>
or grails select:
<g:select id="select1" name="select1" from="${[2, 3] }" value="2"/>
and the grails if:
...
<g:each var="rowNumber" in = "${0..5}">
<g:if test="${rowNumber} < ${select1.value}"> <!-- or ${select1.val()} or select1.value -->
...
</g:if>
</g:each>...
Code throws an NullPointerException, and says that select1 is a null object and he cannot evaluate method val(), or cannot get attribute value.
Anyone have an idea what I should do to fix this problem?
Thanks for help!
EDIT
Inside my if statement I have a render template, and when I change the value of select I want to render this templates again, but with saving what I have already type there (e.g if I have a textfield in my template).
EDIT2
I messed up a little bit. I want to create a dynamic table, e.g at start it could have 2 rows & columns, then I want to be able to enlarge/decreasenumber of rows/columns (e.g. by clicking button/buttons) of course by clicking the button, I want to save already filled table in ajax, then render table with new number of rows/columns, and fill earlier filled cell with their previous values (new cells will be empty).
e.g.
filled table 2x2
a a
a a
when I enlarge this table to 3x2 I want the table looks like this:
a a
a a
_ _
where _ is an empty cell.
Since you want to work on the client side you need to work with Javascript only.
function checkRows(rowNumber)
{
var value= $('#select1').val();
return rowNumber < elem;
}
If you want to trigger the function when the select value changes use
$(document).ready(function () {
$('#select1').change(function() {
checkRows(34 /* use your value here */);
});
});

html/js: Refresh 'Select' options

There's a class 'Car' with brand and model as properties. I have a list of items of this class List<Car> myCars. I need to represent 2 dropdowns in a JSP page, one for brand and another for model, that when you select the brand, in the model list only appear the ones from that brand. I don't know how to do this in a dynamic way.
Any suggestion on where to start?
Update
Ok, what I do now is send in the request a list with all the brand names, and a list of the items. The JSP code is like:
<select name="manufacturer" id="id_manufacturer" onchange="return getManufacturer();">
<option value=""></option>
<c:forEach items="${manufacturers}" var="man">
<option value="${man}" >${man}</option>
</c:forEach>
</select>
<select name="model" id="id_model">
<c:forEach items="${mycars}" var="car">
<c:if test="${car.manufacturer eq man_selected}">
<option value="${car.id}">${car.model}</option>
</c:if>
</c:forEach>
</select>
<script>
function getManufacturer()
{
man_selected = document.getElementById('id_manufacturer').value;
}
</script>
How do I do to refresh the 'model' select options according to the selected 'man_selected' ?
There are basically 3 ways to achieve this:
Use JavaScript to submit the form to the server side on change of the dropdown and let the JSP/Servlet load and display the child dropdown accordingly based on the request parameter. Technically the simplest way, but also the least user friendly way. You probably also want to revive all other input values of the form.
Let JSP populate the values in a JavaScript array and use a JavaScript function to load and display the child dropdown. A little bit trickier, certainly if you don't know JavaScript yet, but this is more user friendly. Only caveat is that this is bandwidth and memory inefficient when you have relatively a lot of dropdown items.
Let JavaScript fire an asynchronous HTTP request to the server side and display the child dropdown accordingly. Combines the best of options 1 and 2. Efficient and user friendly.
I've posted an extended answer with code samples here: Populating child dropdownlists in JSP/Servlet.

Categories