Develop Reference

combine two selections to query database

I have a div which represents a category of items ...when I hover over the div a drop list of countries shows, then when the user selects a country....the items of that category of that country should be queried and retrieved from the database ...
Each category has it's own div(with the image inside). The countries are a list in a div.
I check some answers like this one ...but none fits for my case
Combine two html selections with jquery
My query should contain 2 fields ...when hover on Category need to pick its name , and country.
Trying a "form" didn't fit for this. Maybe JQuery or even React could handle this I hope...I've no clue in either one :)
Or maybe there is another approach!
P.S: I'm using spring boot 5, thyme leaf 3, Java and MySQL for DB.

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.

JavaScript Arrays, and displaying the Data in lists

I'm creating a site for my JavaScripting class and one of the first issues that has arisen has been the entry of data into arrays, and doing it in an efficient and quick pattern and then allowing the user to select entries and then use their selections in a function that updates either on refresh, or automatically.
My first task is to create multiple arrays that are linked and contain data for all the tanks offered in the game. That's more than 100 tanks.
My thought is to create a 'tank' object that then has a list of properties; 'armor values', 'nation', 'tank name'.
Assuming that works we move on.
The formatting and syntax is most likely wrong in the following uses.
Then we take each tank object and assign it to an array.
As an example, tank{0} would access values about the m4 Sherman.
I also need a method to display drop down lists of the available data that the user can select. For example;
Nation: American Tank: M4 Sherman Rotation of tank: 30 degrees.
The user's selection of nation should also narrow down the available tanks that can be selected. I'm assuming I would need another function that looks at the 'tank' object array that can then narrow down the results?
What I've Tried
I tried to make a simple list with Html and JavaScript and got this far:
<div id="select_nation">
<select>
<script>select_nation();</script>
</select>
</div>
I can't do that.
What I was trying to test was the ability to create a list using <select> from HTML and then populating that list with a function that would access an array that would return all values in the Nation Array that would then be used with .innerHTML to populate the different selection in the <select> tags.
Thank you for your help ahead of time and the small fence of text in front of you.

This demo will show you how you can build a select list from an array of javascript objects. From there you can look at which option they select and narrow your list of tanks to display elsewhere. This will all be done in javascript
EDIT - showing tanks list based on nation
Updated demo that displays the tanks that are from the selected nation:
http://jsbin.com/segojezosi/1/edit?html,output

Putting tank objects into an array is fine.
You can put your script anywhere and add options to the <select>.
Let's say that your <select> has an id.
<select id="mySelect">
Here is how you add options to that using JS.
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Tank";
x.add(option);
Consider using a framework which can do all these for you in a single command.
Angular is my favorite. jQuery is little flat - but would also do the job.
Please follow this and this tutorial before you go any further in this project.
Good luck.

Getting multiple selected options with javascript from collection_select, RoR

I have a view in my Ruby on Rails application where there are two collect_selects on the right side, one of which is a list of users and the other a list of objects which has :multiple => true. When the user has selected a user and at least one object I want to display a chart on the right side with the user and whichever objects have been selected (likely using the gem Flot). I have seen how to get the selected object using selected_index, but I'm stumped as to how you can get an array of all of the selected objects when multiple selections are allowed. I was hoping to do everything in the javascript without having a submit button or anything, but is this possible?

I finally found my own answer. To get all of the selected objects in javascript, for example in a collection_select with id "user_id" you just need to use:
$("#user_id option:selected").each(function() {
// Do whatever with $(this).text() or $(this).val() for each option.
});

How to list the items of a sortable grid-list in jQuery?

I am currently playing with the sortable interactions in jQuery. As for now, I added an unsorted list which is being displayed as a grid to my project. The source code is equivalent to the one I found in the jQuery demo section. I want the users to be able to display some values of a database, let them move each item to a position of their choice and send the changes back to the server. I implemented pretty much everything to do so, I however don't know how to obtain a list of the items on the client side, after users sorted the list according to their needs.
My question is: How can I get an array of all items after the user has moved the items around? I attempted to access the list's source code using something like this:
$( "#sortable" ).toArray()[0]
Which returns a HTMLUListElement object. The field innerText is undefined and innerHTML returns the source code of the entire unsorted list, I however would like to iterate through all the items of this list.
There has to be an easier way to access them. Any help would be appreciated.

$('#sortable li')
returns all the elements in your sortable.
If you want to display the values of them you can use
$('#sortable li').text()
which will print out all the text values of all the nodes in the right(sorted) order.
To access each of them separately you can use
$('#sortable li').eq(index)
or
$('#sortable li')[index]

It looks like this is what you need:
$("#sortable").sortable( "toArray" )[0]
http://jqueryui.com/demos/sortable/#display-grid
$(#sortable) gets you the tag that is sortable, .sortable gets you access to the sortable methods.