I am querying three databases and want to show their columns in three click-able lists. I want the user to select a number of columns from these lists and then on pressing a button, only the selected columns and the lists/tables that they came from would be passed to a function for processing.
I found some code online that does this with forms. Is there any way to do this without forms? I am used to using JList with java and have little experience with javascript.
.
The code that does something similar to what I am trying to do (with forms) for one list is:
http://www.mredkj.com/tutorials/tutorial006.html
EDIT: I just found out about Javascript ListBoxes. I think I am just going to use them. It seems like using forms is going to inevitable when creating lists.
jQuery is a really simple JavaScript library for doing things like this (and for user interaction in general).
For example, if you want to select the second column of a table and store the cells' data into an array, this simple code would do it (I'm notorious for making mistakes, so correct me if it doesn't):
var elements = [];
$('#id_of_your_table tr td:eq(1)').each(function()
{
elements.push($(this).html());
});
Now, elements contains the values of the second column of the table.
You're talking about plain 'ol HTML <select>, I think. Paste this into an HTML document to see what I mean.
<select id="my_listbox" multiple="yes" size="6">
<option>Foo 1</option>
<option>Foo 2</option>
<option>Foo 3</option>
<option>Foo 4</option>
<option>Foo 5</option>
<option>Foo 6</option>
</select>
To get the selected values, this code should work:
var values = [];
$('#my_listbox :selected').each(function(i, selected)
{
textvalues[i] = $(selected).text();
});
If your users can't figure out how to check the items, writing your own checkable listbox is really easy. Check out my example here: http://jsfiddle.net/2hDVR/2/.
Javascript doesn't 'make lists'. Lists are HTML. Your JavaScript can render HTML, but I assume you're getting this from the server anyways.
I'd probably do this via HTML:
<ul>
<li><label><input type="checkbox" id="column1" />column 1</label></li>
<li><label><input type="checkbox" id="column2" />column 2</label></li>
<li><label><input type="checkbox" id="columnn" />column n</label></li>
</ul>
I'm not sure what you are asking in regards to wanting to do this without a form. Either way you need to pass data back to the server to get the data to render the completed table. That's what forms are for.
Related
HTML
<label for="fld1">Module</label>
<span class="control"><select id="fld1" name="mod">
<option value="Account" selected>Account</option>
<option value="User">User</option>
</select></span>
<label for="fld2">Send me an alert</label>
<span class="control"><select id="fld2" name="alert">
<option value="1" data-params='{"mod":"Account"}'>when my balance...</option>
<option value="2" data-params='{"mod":"User"}'>when my login...</option>
</select></span>
So this is existing code that someone else worked on and is no longer a resource.
This little sample just changes the second select list based on the selected item in the first select list. This works just fine in FF and Chrome and after some digging I've been told that one can not hide options in a select list in IE.
I've also read up on this question here but still drawing up short on getting it working for IE. Can anyone advise? Thanks.
jsfiddle
remove instead of hide as shown in the linked post seems to work in IE. Another possible implementation is to empty the option list and add only the options in question:
var alertselect, modselect, orgalerts;
var showAlerts = function (module) {
alertselect.empty().append(
orgalerts.filter(function () {
return $(this).data('params').module === module;
}));
};
Of course for this to work, you have to store the original options:
orgalerts = alertselect.children();
Fiddle
I am using play framework for the first time.
I want to update the web page when a value is selected from drop down with out refreshing the web page.
Consider the following example:
<select>
<option value= "Apple"> Apple </option>
<option value = "Banana"> Banana </option>
</select>
When a value is selected from drop down it should be posted to server. Then server should return some information based on the value it got. Now we should display the content corresponding to the value selected from drop down with out page refresh.
I didn't find a way to implement this using play framework. Conventionally we can do this by hiding a div initially and when a value is selected from drop down we can add content (fetched from back end) to the div and show it. I didn't understand how to implement the server side part. In play framework, controller generally returns Result type. How to return a Json value on a request in play framework ?
Can anyone please suggest other ideas ??
Thanks
A solution using jQuery (see change() and load()):
<select id="select">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>
<div id="result"></div>
<script>
$('#select').change(function() {
$('#result').load('/foo/bar?fruit=' + $(this).val());
});
</script>
EDIT: To address the JSON/server-side part of the question have a look at ScalaJsonHttp (or JavaJsonActions).
If I ve dropdown of
<select id="city">
<option value="blore">Bangalore</option>
<option value="delhi">Delhi</option>
<option value="che">Chennai</option>
<option value="jaipur">Jaipur</option>
<option value="hyd">Hyderabad</option>
<option value="mum">Mumbai</option>
<option value="pune">Pune</option>
</select>
then the value of dropdown selected can be extracted using :
document.getElementById('city').value
But since we cant style the select-option dropdown, I was wondering is there any way where I define a list type dropdown and can extract the value user selects in javascript.
Something like.
(Dropdown using lists)
<ul id="city">
<li value="something1">Something1</li>
<li value="something2">Something2</li>
<li value="something3">Something3</li>
</ul>
and document.getElementById('city').value
Kindly correct me if m wrong or is there any other way to define a styled dropdown menu whose value can be extracted in javascript for processing.
If more code is required kindly put it in comment.
Thanks in advance :)
Since you're basically looking to mimic the functionality of a form element without using one, it's going to take a little extra work in javascript. jQuery will greatly simplify this, so I'll use it for this example. Common practice these days when wanting to attach arbitrary data to an html element is to use an attribute prefixed with "data-". You'll see why in a second.
So, for your example, you could use the markup:
<ul id="city" data-value="">
<li data-value="something1">Something1</li>
<li data-value="something2">Something2</li>
<li data-value="something3">Something3</li>
</ul>
Style your list however you like, including js to create the "dropdown" effect, etc. I'd suggest looking into bootstrap's dropdown component if you'd like to save more time.
Finally, you'll need to create the javascript to select a value, and put that value as the 'selected' one in your parent element:
$('#city li').click(function() {
$(this).parent().data('value', $(this).data('value'));
});
This is making use of jQuery's .data() method as a shortcut for setting and getting data- attributes.
You can now access the currently-selected value by calling:
$('#city').data('value');
Without jQuery, there is more involved. I'll leave it up to you whether you think it's useful to pursue a vanilla js solution.
So I am trying to use XMLHTTPRequest to get some information from another page. It will have several <option>s, a variable number of them.
My thoughts were that I could get all of these options, outputted as text, and insert them wholesale into the select menu. Would this be possible? An example of what I want to do:
<select name="culture[]" onSubmit="formValidation()" multiple="multiple" id="cultpicklist"></select>
is the select menu, and then I would do something like this (pseudo-code)
txtobjfromXMLHTTPRequest would be this:
<option value="41" name="culture[]">testculthy</option>
<option value="47" name="culture[]">ereeevvv</option>
<option value="49" name="culture[]">yep</option>
<option value="50" name="culture[]">addanother</option>
txtObj = txtobjfromXMLHTTPRequest //to shorten what I have to write/what you have to read
document.getElementById("cultpicklist").value(txtObj)
Would this work? Am I on the right path? How should I change this?
You should try using .innerHTML:
document.getElementById("cultpicklist").innerHTML = txtObj;
You should however thoroughly test this in all the browsers you support, as there are some cross browser issues with this.
...and here's the fiddle: http://jsfiddle.net/5PGF6/
I would like to 'toggle' the list of options in a select box.
I have the two sets of options as strings (American states and Canadian Provinces). However, I notice that in the DOM, the select object has no 'innerhtml' property (at least not according to w3schools).
Do I have to go and remove and replace the options one by one? How do I do this?
Making use of jQuery, I usually do something like this:
var html = '[your html string with all the options elements]';
$('#mySelectId').empty();
$('#mySelectId').append(html);
As for the one-by-one idea, make sure you keep in mind the general slowness of DOM interaction. Wholesale replacement with the entire string is going to be pretty quick, but if you manipulate the DOM for each element in the select then expect it to be slow.
What I would do is create both, each in a DIV; then just hide whichever is not needed. This eliminates the need for heavy DOM manipulation (as you're only doing that once, on page load, there are fewer opportunities to leak memory in certain browsers cough cough), and is harder to accidentally mess up the app state (what with Alberta and Alabama sharing the same code and all that).
This would be the initial page:
<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select"></div>
<div id="canada_select"></div>
and JavaScript to go with it (jQuery used here for brevity):
$(document).ready(function(){
// hide both <div> containers on page load
$('#canada_select').hide();
$('#usa_select').hide();
// create and populate both <select> boxes:
$('#canada_select').append('<select name="province_canada">'
+ '<option value="AL">Alberta</option>'
+ '<option value="BC">British Columbia</option>...'
+ '</select>'
);
$('#usa_select').append('<select name="state_usa">'
+ '<option value="AL">Alabama</option>'
+ '<option value="AK">Alaska</option>...'
+ '</select>'
);
};
// we'll also need handlers to show the correct list,
// depending on the selected country
$('#country_usa').click(function(){
// we want US states
$('#canada_select').hide();
$('#usa_select').show();
});
$('#country_canada').click(function(){
// we want Canadian provinces
$('#usa_select').hide();
$('#canada_select').show();
});
This should be the result:
<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select">
<select name="state_usa">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
...
</select>
</div>
<div id="canada_select">
<select name="province_canada">
<option value="AL">Alberta</option>
<option value="BC">British Columbia</option>
...
</select>
</div>
At the backend, process state_usa iff country=='USA'; process province_canada iff country=='Canada'.
Why not replace the entire <SELECT>? There are a number of ways to do this. Easiest is to wrap the <SELECT> in a SPAN/DIV and replace its innerHTML.
If you're pulling your lists from an array, you can set the list length to zero, then insert the new elements in a loop.
When you say they are held as strings - do you mean that each item is a seperate string or that the list items are one string (i.e. var variable = "<li>item 1</li><li>item 2</li>";)
If the latter, could you not include the <select> tag in the string and use the jQuery replaceWith function?
Just add a multiple="multiple" attribute to your select tag if you want multiple selection or add size=".." if you want single selection