I have found many similar questions on this subject but none really answer my scenario so I decided to post a new question:
I have one page with several hidden sections (the same content in different languages). The hidden section displays based on a dropdown menu of languages (I'm using jQuery for that and it only hides/displays sections on the same page - the page URL stays the same) this is all working. However, I need to find a way to get people to arrive to the page with their language selected, not the default language which is English.
I would use either one of these: (example.com/page/#german) or (example.com/page/?german) but it then needs to hook into the existing jQuery and HTML so that that URL information selects the correct language. How can I do it?
This is the HTML of the language selector:
<select id="language_selector">
<option value="german">Deutsch</option>
<option value="english" selected >English</option>
<option value="spanish">Español</option>
<option value="french">Français</option>
</select>
and this is the jQuery code I am using to display only the selected language HTML content (based on ID):
hideAllDivs = function () {
$("#English").hide();
$("#French").hide();
$("#German").hide();
$("#Spanish").hide();
};
handleNewSelection = function () {
hideAllDivs();
switch ($(this).val()) {
case 'english':
$("#English").show();
break;
case 'french':
$("#French").show();
break;
case 'german':
$("#German").show();
break;
case 'spanish':
$("#Spanish").show();
}
};
I was thinking that the way to go about it would be to get the URL value, select the parameter only, and then pass that to the jQuery to select the right option but I have no clue how to do it, also without breaking my existing language selector (I still want people to be able to change their language manually)
// url : 'example.com/page?language=german';
let language = (new URLSearchParams(window.location.search)).get('language') ?? 'english';
$('#language_selector').val(language);
handleNewSelection();
Related
I can't figure out how to use Bootstrap's autocomplete dropdown to filter the results as I am typing in the search box. Currently, when I type a word, all of the options possible will appear in the dropdown and matching partial strings will be bolded. Is there a way to make it so that only the options with partial matches appear in the dropdown as I continue typing? This is my current code for reference:
<select class="form-control basicAutoSelect" name="simple_select"
placeholder="type to search..."
data-url="test-list.json" autocomplete="off"></select>
<script>
$('.basicAutoSelect').autoComplete();
</script>
The filtering is up to you. You can do it server sided (I strongly recommend it) or static (it's 'OK' for small items). Whatever option you use, you should use events.search callback. As every use case is different, this component implements only the basic pattern of calling an url passing a qry parameter and showing results.
Imagine I have some webapp with a lot of different filters, which impact e.g. search results on a page.
The filters are optional and I use select element. The first option always means, that the filter is not used and says something like "not used" or "select xyz".
I'm looking now for a way to make it possible to see in a quick glance which filters are currently used and which are not, e.g. by changing the color or background-color.
I didn't find a way to do this via CSS yet, maybe its not possible without javascript?
Solutions needs only to work in latest Chrome.
If you want the color of the dropdown to change immediately as soon as the user changes the selection (without reloading the page), you'll have to use JavaScript. Something like:
<script type="text/Javascript">
function changeColor(element)
{
if (element.selectedIndex != 0)
element.style.backgroundColor = "green";
else
element.style.backgroundColor = "red";
}
</script>
<select onchange="changeColor(this)">
So that's how you would change the color as soon as the user changes the selection.
To change it on page reload, you would have to use some server-side scripting language (which I'm assuming you're using already). So when creating the <select> element, you would check to see if its value has been set. If you were using PHP, it might look something like this:
<select name="mySelect" style="background-color:<?php echo ($_POST["mySelect"] == "select xyz" ? "red" : "green"); ?>;">
I am reading a Chrome extension codes. In one of its html files (used for setting), the source code shows that there is a select element like this
<select id="hostselect"></select>
Note that there is no option element as the child of the select element. However, if I open the setting page of the extension in Chrome, there is a drop-down list corresponding to that select element, and moreover, if I use the Chrome developer tool to inspect this setting page, it shows that the select element has option children:
<select id="hostselect">
<option value="host1">host1</option>
<option value="hots2">host2</option>
</select>
I don't understand why there is no option child if I view the source code of the setting page in text editor, while the option children appear when I view the page's DOM using Chrome developer tool. What could be the most possible reason for this? Could some content scripts in the extension change the DOM of the setting page? Also, what's the benefit to write codes like this?
Thanks!
I do this for an extension at work. I am using Javascript to load extra options in to the select. I do this because the number of options is dynamic. I don't have source available now but I can post an example later if you would like
Update
Here is an example of some javascript that might populate your select element. I am using jQuery to append the options and to iterate over my list of hosts with jQuery's each. I have two static options "Default" and "None" the the dynamic list which was generated with getHosts()
var hosts = getHosts();
if(hosts) {
var selectElement = $("#hostSelect");
selectElement.append($("<option></option>").attr("value", "0").text("-- Default Host --"));
selectElement.append($("<option></option>").attr("value", "-1").text("-- No Host Selected --"));
$.each(hosts, function(key, host) {
selectElement.append($("<option></option>").attr( "value", host.getHostID() ).text( host.getName() ));
})
}
Hello (this is a copy of my post on the Seaside mailing list; first try at stackoverflow),
How do I get the rendered display of a drop-down select list to show an updated selection from another session, in Firefox? (I'm using 3.6.13)
This problem does not appear in Chrome, IE or Opera.
Here is the scenario: I have a domain object with an attribute displayed in a drop-down list. Some other session updates the attribute. I refresh my display, but the rendered selection does not change. Using Firebug, the generated html shows the updated selection. This may be basic HTML knowledge, but should the displayed value not update to show the changed 'selected' option? Or is the value intended to be set only on the initial page display and then only by a user action?
Example: I have a demo Seaside component with a class variable #testStateListSelection which is selected to 'one' in a Seaside session. If I change the value to 'three' in another Seaside session, the displayed value stays as 'one' in the original session after rendering again, even though the "selected" in the generated HTML shows "three".
renderSelectionListOn: html
html form: [
html select
list: #('one' 'two' 'three' 'four' 'five');
selected: self class testStateListSelection;
callback: [:value | self class testStateListSelection: value].
html break.
html submitButton
callback: [Transcript cr; show: self class testStateListSelection];
with: 'Save']
...the displayed value shows 'one', even though the HTML is...
<select name="1">
<option value="1">one</option>
<option value="2">two</option>
<option value="3" selected="selected">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>
How do I get the drop-down selected value to show 'three'?
BTW: all I know about HTML & browser behaviour I've learned from coding Seaside, so I may have a skewed perspective ;-)
Thanks for any help.
The problem is that, when you refresh your page, your browser is remembering which option was previously selected. This feature is designed to make it harder to lose your form data during long forms and is discussed a bit on the Mozillazine forums
Instead of refreshing the page. if you load the page "fresh" by going to the address bar and pressing return, you'll get the page loaded from the server again - with the updated select
Another cause of the problem might be that your browser tries to autocomplete the form for you based on your last submission. Make sure you have disabled this feature in the preferences of your web browser. You can also try to tell the form-tag with an unofficial attribute not to autocomplete:
html form noAutocomplete; with: [ ...
Whenever the page is refreshed the accessor self class testStateListSelection is run.
In fact the code you provide works perfectly for me. Are you sure that the accessors work as expected?
testStateListSelection
^ testStateListSelection " <-- forgetting the return is a common problem "
testStateListSelection: aString
testStateListSelection := aString
If using javascript to refresh the page...
window.location.reload();
...will NOT re-render the select elements. They will retain their dynamic values regardless of what the new source HTML says.
To force the select elements to re-render, use...
window.location.reload(true);
<select id="selectId">
<option>Please select product ...</option>
</select>
i try on firefox and it work
$('selectId').innertHTML = '<option>Test test</option>'
but on ie , it not work, how to add a option by string option like above in ie
Use the Element Class instead:
new Element('option', {
text: 'test option'
}).inject($('selectId'));
Example: http://www.jsfiddle.net/EJH5b/
If you are going to use Mootools, then you should really use the Mootools methods rather than switch between it and vanilla Javascript. One benefit from doing this is that Mootools is already taking care of browser inconsistencies for you. Therefore, if you ignore its methods, you will have to take care of them yourself.
To access the properties of an elements the Mootools way, you can use the set and get methods on any element. The dollar ($) function returns an element so you can just chain set and get to that.
//returns selectId's HTML
var foo = $('selectId').get('html');
//Sets the HTML of selectId to <option>Test test</option>
$('selectId').set('html', '<option>Test test</option>'); //
In this case, you just need to use set.
One thing you should be aware of it is this does not add an option to a select box but instead replaces everything inside of the select box with an option. Consequently, if you wanted to use this to add multiple options to a select box, it will not work as you are resetting the HTML each time. It does not make much sense to have a select box that only has a single option so I will assume you are trying to append an option, rather than replace everything with an option. In that case, do the following:
//get the current options selectId's options
var options = $('selectId').get('html');
//Add your own option onto the end
options = options + '<option>Test test</option>';
//Set the HTML of selectId to whatever is stored in options
$('selectId').set('html', options);