I am building a simple web page to register some associations between documents and post codes.
On the left side there is a text with the document's information, and on the right side there is a select element which contains all the values the user will select.
Currently what I am doing is running a query in the documents table , creating an html table whose first <td> is the text needed and the second <td> contains a select.
That select is populated with data from another query from the post_codes table.
My problem is that even though this runs fine it creates a huge web page. The post_codes table contains over one thousand rows and the documents table will contain typically over four hundred rows.
Is there a way to put all the options for the (over 400) select elements somewhere (like a link) and then make the select elements show those options?
Here is what is currently created
<td name="document_123342">Code:123342 Name:mister mister</td>
<td name="post_code_123342">
<Select>
<Option value="1234">1234</Option>
<Option value="1235">1235</Option>
<Option value="1236">1236</Option>
....
</Select>
</td>
Ideally what I would want is something like this: (I have no idea if it is possible just mentioning it)
(some sort of source statement here with a name like post_code_values)
<Option value="1234">1234</Option>
<Option value="1235">1235</Option>
<Option value="1236">1236</Option>
<td name="document_123342">Code:123342 Name:mister mister</td>
<td name="post_code_123342">
<Select>
(somehow insert everything with the name post_code_values)
</Select>
</td>
How about in your table, where you currently have the drop-down with the postcodes, you replace it with a 'select postcode' button, which shows a pop-up or lightbox, with the list of postcodes. Then when the user selects a postcode, it is stored in a hidden field in your table for that row. This way, you only need one copy of the select list of postcodes.
See what I mean in this jsfiddle
Related
I actually have two issues that I am trying to solve and Javascript is not my strong suit.
I have some Javascript that allows me to clone a table row in my HTML. The first issue is that I have an HTML table where the user can input some data into combo boxes/input boxes. There are buttons that allow the user to add or remove rows so that they can add the data they want to input. The first problem I discovered was that if the user enters a row's worth of data and adds another row, the row clones both the control and the data entered into the control.
https://i.stack.imgur.com/1IpbT.jpg
It makes sense based on what the Javascript is doing... I am cloning the entire row, but what is the work around so that I can repeat this row with the controls regardless of whether or not the user has entered data.
function create_tr(table_id) {
let table_body = document.getElementById(table_id),
first_tr = table_body.firstElementChild
tr_clone = first_tr.cloneNode(true);
table_body.append(tr_clone);
}
Any thoughts on how I could adjust this javascript so that I am only repeating the controls and not the values in the controls.
The second issue is that the comboboxes are special jquery widgets that have an autofill function. Obviously when I add a new row, the comboboxes on the new row are not initialized to use the jquery code that operates the autofill functionality. Here is all I need to do to initialize them...I think.
$( "#supplement" ).combobox();
$("#brand").combobox();
$("#measurement").combobox();
It's actually pretty messy, because the comboboxes are populated by a dataset that I grab from my database. an example:
<tbody id="table_body">
<tr>
<div>
<td><div class="ui-widget">
<select id="supplement" name="supplement[]">
<option></option>
{% for c in supplements %}
<option value={{c.supplement_description}}>{{c.supplement_description}}</option>
{% endfor %}
</select>
</div></div></td>
Any thoughts on how I could access the ids of the controls in the newly generated row so that I could initialize those new controls and they would also have the autofill/dropdown functionality? And then, how can I ensure that they are also populated with the same data that the original comboboxes in the first row are populated with... sheesh i didn't realize it was this complicated when I first realized I had a problem.
I have a PHP page with:
<td class="short" id="inhouse-val<? echo $row['id'];?>"><? echo $row['inhouse'];?></td>
This table cell shows a user's selection of a drop down list called 'inhouse'. The options are 'Portland' and 'Remote'.
If a user clicks an Edit button, it fires a JS page with this:
document.getElementById("inhouse-val"+id).innerHTML="<input type='text' id='inhouse_text"+id+"' value='"+inhouse+"'>";
Obviously I will want to change <input type... to a Select list, however, the main thing I can't work out is how to have the JS file (or php) append 'selected' to the list option that is currently selected (inhouse) so that when this JS page stops executing and the returns to the PHP page, it shows the drop down list with the selected option as default.
For context, what happens is that the user is on the PHP page (which is an html table of rows from a database table) where a user can select a row and edit it. The JS file triggers and sets all the cells in the row to editable text fields. The user can then edit one, press Save and another PHP jumps in to overwrite those changes to the DB.
The problem I am having is that not all the table cells are text fields. 4 are selections from drop lists (like the example above).
My JS knowledge is weak but I can deal with PHP, so I am not sure how to script the example above so that it returns not a field with the current user text in it but rather it returns a drop list with the current user selection on it.
Here is the demo working page:
http://antistandard.com/projects/pathfinder/
Any help is greatly appreciated.
Thank you
<select>
<option selected="selected" value="first"/>
<option value="second"/>
</select>
I think this is what you're looking for.
I stuck on one problem and would really appreciate your hint. I've got a typical PHP loop which is populating comments for thread as:
<tr><td>'.comment_date'.</td><td>'.comment_author.'</td><td>'.comment_content'.</td></tr>
Now, each populated <tr> and has additional <td> on his right which is a dropdown-menu presented as small icon, with options (listed as <li>). One of these options is "Reply to Comment", so that people can not only reply to the main thread, they would be able to reply to comment, which will be indented. The entire <table> is surrounded by <form> of course, for having some logic possibilities into inserting and processing response to comments.
Now the question is, how do I tell jQuery - where he listens for that form submit, for which comment -- <tr> -- dropdown item (like reply to comment) was clicked? So that I POST reference comment id and content for that particular row? Thanks in advance!
On clicking reply to comment set a value in a hidden field where you can set the id needed for posting the data. You can build your logic with this for multiple comments as well.
<td><select name = 'dropdown_1'>
...
</select>
</td>
<td>
<input type='button' id = '1' value='reply' onclick = 'setId(this.id)' />
</td>
make sure both the character next to name of tag ('dropdown_') and the id for the reply buttons have the same values, preferably use the database id value of the thread for easy flow. Set the id values of the different reply clicks in a single common hidden field separated by delimiter like a ,.
On php side explode the hidden element values using the delimiter and out of all the dropdown values received via $_POST update the values of dropdowns which are in the list of ids received from the hidden field.
You can use 'this' object to identify which li is clicked.
I have three dropdown select boxes. Each contains a different set of demographic attributes. I'd like to display a score corresponding to whatever combination of selections is made by a user. For example, if a user selects Male, 18-24, Asian-American, I want to hide the current div and display the div corresponding to that combination.
I have seen answers for how to do this with just one select box, but since I have three and there are significantly more combinations, I wanted to see if there was a simple way to do this efficiently. I can provide specific code if needed, though a general example of how to do this would be just fine as well - thanks!
Keeping hidden divs for all possible combinations is not a good idea. That will make your page size bigger. Why don't you get only the relevant information as needed using ajax and show it ?
In your page, keep only one div to show the information
<select id="Age">
<option value='1'>18-24</option>
<option value='2'>25-50</option>
</select>
<select id="Place">
<option value='1'>Asia</option>
<option value='2'>America</option>
</select>
<div id="info"></div>
Now listen to the change event of the dropdowns, get the selected value of dropdowns and make an an ajax call to the server page and get the markup to show to user. In the below script, I am using jquery load method to load the new markup in the info div.
$(function(){
$("#Age,#Place").change(function(e){
var age=$("#Age").val();
var place=$("#Place").val();
$("#info").load("yourServerPage.php?age="+age+"&place="+place);
});
});
Assuming you have a server page called yourServerPage.php which accepts the age and place from the querystring and return the markup for the information div.
Honestly been looking everywhere..
The traditional 3-dropdown list dynamically populated from database:
1st table gives airport departure
2nd table gives airports choices
from 1st choice
3rd table show routes between 1 and 2.
That works perfectly!!
When passenger chooses a route from the 3rd drop list I want to check if the value from 3rd dropdownlist is represented in a 4th table called "donations"
Some routes are marked for donation possibility where passengers can donate their unused baggagecapacity to charity
My last hurdle is:
when 3rd list is selected --> check for donationpossibilities--> if possible then show a hidden div on submit
...
I've tried and read so much and gotten a lot more clever and I think I have the query to check the values in order, but I'm lost...
Not sure what programming language you are using to load the dropdowns from your database, but one option that you could try is that when you are adding the html option elements to the 3rd dropdown list you could add a data attribute to each, for example:
<option value="route 1" data-can-donate="true">...</option>
Then if you are using jquery you could bind the change event to the 3rd dropdown and do something like this:
$('#ddlRoutes').change(function() {
var canDonate = $('#ddlRoutes > option:selected').data('can-donate');
if (canDonate) {
$('#myDiv').show();
}
};
Obviously this is untested but it may work for what you are trying to do.