Dynamic dropdown list without ASP.NET - list

I want to create something like that:
3.bp.blogspot.com/-RlGu3mmu6jA/URJdWWtt9XI/AAAAAAAADoU/ryaRZ3DKkzc/s1600/1.gif
but without ASP.NET.
Is that possible somehow?

As others have stated, you can easily use client-side code such as Javascript.
Here is an example using Javascript and jQuery: http://jsfiddle.net/ET5JW/9/
HTML:
<label for="firstBox">First Select</label>
<select id="firstBox">
<option value="">Select Option...</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
<br />
<div id="secondBox_frame" style="display:none;">
<label for="secondBox">Second Select</label>
<select id="secondBox">
<option value="">Use first box first</option>
</select>
</div>
Javascript (with jQuery):
var options = new Array("a","b");
options["a"] = new Array("1a","2a","3a");
options["b"] = new Array("1b","2b","3b");
$("#firstBox").change(function(){
if ($("#firstBox").val()) {
$("#secondBox").html('');
var selectedOptions = options[$("#firstBox").val()];
for (var i in selectedOptions) {
$("#secondBox").append('<option value="'+selectedOptions[i]+'">'+selectedOptions[i]+'</option>');
}
$("#secondBox_frame").fadeIn(400);
}
else {
$("#secondBox").html('<option value="">Use first box first</option>');
$("#secondBox_frame").fadeOut(400);
}
});
If you are interested in doing this server-side PHP could help.

Is that possible somehow?
yes, um ... but what language do you want to use? do you want something like that for a web page (here)? or in an desktop programm (e.g. java - swing)? android/iOS app ?

Related

Bootstrap-Select not updating on mobile

I am using Bootstrap-select for multi-select items with Django. It works fine on desktop, but when the native mobile drop-down is enabled, the selected values of the dropdown do not populate.
HTML
<!-- start product brand info -->
<div class="row">
<div class="col-md-6 col-xs-*">
<div>
<label for="id_brand-name" class="form-label">Products</label>
</div>
<select multiple class="form-control selectpicker mb-3" id="id_brand-name" name="brand-name" mobile="true" multiple required>
{% for product in products %}
<option value="{{product.id}}" id="optiion">{{ product.brand.name | title }} - {{product.name | title}}</option>
{%endfor%}
</select>
<div class="invalid-feedback">
Select at least one product.
</div>
</div>
</div>
<!-- end product info -->
<script>
//Enble native drop down on mobile
window.onload = function () {
$('#id_brand-name').selectpicker({
container: 'body'
});
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$('#id_brand-name').selectpicker('mobile')
}};
</script>
No matter how many items are selected, the selector always shows Nothing selected. When the data is posted, it is apart of the form though.
I like to use bootstrap-select, but this problem has been bothering me for a long time
Similar questions can be found on github, but no perfect answer.
The reason is that it will always refresh his title, no matter how remove() is done externally, and you can't change it's style on iphone Safari and Firefox.
So my solution is: if you can't remove it, then join it.
You have to change the original file: bootstrap-select.js
Search for: bs-title-option, next line you will find:
this.selectpicker.view.titleOption.value = '';
And add two lines down:
this.selectpicker.view.titleOption.value = '';
// new add
this.selectpicker.view.titleOption.disabled='true';
this.selectpicker.view.titleOption.textContent=this.options.title;
//
Done
When you use $('#id_brand-name').selectpicker('mobile')
The title text show on first empty option, and it can't be choose.
try it!

How to get the value from the drop down box django? without submit button

How to get the value from the dropDown Box in Django Without Submit Button
<div class="single-shorter">
<form action="." method="GET">
<label>Sort By :</label>
<select name="val" id="val">
<option selected="selected" value="name">Name</option>
<option value="price">Price</option>
</select>
</form>
</div>
You can simple obtain it using Ajax but as mentioned in comments in dont want to use that u can use value attribute in option value and using event listner and window.loction.href we can obtain this... This is one example
<select id="foo">
<option value="">Your Dropdown</option>
<option value="http://www.google.com">x</option>
<option value="http://www.facebook.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
as u are using django use this and also dont want to change the value attribute
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>

OpenCart 3 common/header variable in extension

I would like to add a variable/display in common/header twig file, which can be managed from an new extension. The new extension is created. starter_module
I added in:
admin/view/template/extension/module/starter_module.twig
<div class="form-group">
<label class="col-sm-2 control-label" for="input-new">New</label>
<div class="col-sm-10">
<select name="new" id="input-new" class="form-control">
{% if new %}
<option value="1" selected="selected">Enabled</option>
<option value="0">Disabled</option>
{% else %}
<option value="1">Enabled</option>
<option value="0" selected="selected">Disabled</option>
{% endif %}
</select>
</div>
</div>
in admin/controller/extension/module/starter_module.php
if (isset($this->request->post['new'])) {
$data['new'] = $this->request->post['new'];
} elseif (!empty($module_info)) {
$data['new'] = $module_info['new'];
} else {
$data['new'] = '';
}
in catalog/controller/extension/module/starter_module.php
$data['new'] = $this->config->get('new');
$data['new'] = (int) $setting['new'];
in catalog/view/theme/default/template/common/header.twig
{% if new %}Enabled {% else %} disabled{% endif %}
But always I got the result only disabled, what is missing? cannot be sent variable from extension to common header?
Please, help me if you know the issue, the non working files are here https://github.com/bblori/Opencart3
You can see here one of my working variable which was set in setting/setting files and is working.
https://github.com/bblori/Enable-Style-OC3
XML code
<modification>
<name>Starter Module</name>
<code>starter-module</code>
<version>1.0.0</version>
<author>Author</author>
<link>http://domain/</link>
<file path="catalog/controller/common/header.php">
<operation>
<search><![CDATA[return $this->load->view('common/header', $data);]]></search>
<add position="before"><![CDATA[
$data['config_new'] = $this->config->get('config_new');
]]></add>
</operation>
</file>
Many thanks
move your code from your starter module to header.php
$data['new'] = $this->config->get('new');
$data['new'] = (int) $setting['new'];
Neither editing core files or using vqmod is acceptable. Core files should not be modified, because later updates would make your modifications obsolete. Vqmod on the other hand adds an unnecessary complexity to a system well designed.
Since version 3 Opencart team have introduced events. Events are a new way of executing custom functionality when it's needed. Next time your have a similar problem add event (either manually or during installation of your module as shown below).
public function install() {
$this->load->model('setting/event');
$this->model_setting_event->addEvent('my_data_manager', 'catalog/view/*/before', 'extension/module/my_data_manager/beforeAll');
}
Later during execution cycle your function will be called automatically every time common/header is being rendered.
class ControllerExtensionModuleMyDataManager extends Controller {
public function beforeAll(&$route, &$data, &$output){
if ($route == 'common/header') {
$data['my_custom_data'] = 'Mickey Mouse is not a bird!';
}
}
}
Finally, add {{ my_custom_data }} to template/common/header.twig

Component not getting model data that Template gets?

I am an extreme newbie, for which I apologize, but I'm not finding this...
In templates/editor/journal.hbs, this works:
<h2>Journal template</h2>
<select>
<option value="" disabled="disabled" selected="selected">Periodicals:</option>
{{#each model as |journal|}}
<option value="{{journal.id}}"> {{journal.name}}</option> {{journal}}
{{/each}}
</select>
{{outlet}}
But the same code, in my component (journal-list), does not...
with journal.hbs changed to
<h2>Journal template</h2>
{{journal-list title="Crazy Test" model=journal}}
{{outlet}}
And that code in journal-list.hbs,
{{yield}}
<h1>{{title}}</h1>
<select>
<option value="" disabled="disabled" selected="selected">Periodicals:
</option>
{{#each model as |journal|}}
<option value="{{journal.id}}"> {{journal.name}}</option>
{{/each}}
</select>
all stubs generated by ember generate, I do get the title but the listview is unpopulated.
What magic am I missing? Do I need to configure a route to the component, for example?
Thanks
Uggah. I did spend over an hour on that before posting!
It's simple. Instead of journal.hbs having model=journal, it needed model=model.

Meteor with i18next cookies

I have a simple login page with a "option" for select language :
<input type="text" class="form-control" id="identifiant" data-i18n="[placeholder]login.placeholders.username" autofocus>
<input type="password" class="form-control" id="password" data-i18n="[placeholder]login.placeholders.password">
<input id="loginCheckbox" type="checkbox" value="remember-me"/> <label for="loginCheckbox" data-i18n="login.rememberme"></label>
<br>
<center>
<div class="form-group col-lg-6 col-lg-offset-3">
<select id="select-lang" class="form-control">
<option value="en-US" data-i18n="lang.english"></option>
<option value="fr-FR" data-i18n="lang.french"></option>
</select>
</div>
The JS part :
if(Meteor.isClient) {
Meteor.startup(function() {
i18n
.init({
fallbackLng:'en-US',
})
.done(function() {
$('[data-i18n]').i18n();
});
});
}
When you change the language on the login page everything work perfectly :). But when I log a user, I lost the translation for other pages. My question is : How can I save the language setting for all my site ? Cookies ?
Sorry, I'm new with i18next :)
Yep, cookies are the way to go. Session is not enough since it's not persistent.
Cookie.set('lang', 'en-US');
Cookie.get('lang');
Use Meteor Session.
if(Meteor.isClient) {
Meteor.startup(function() {
if(typeof Session.get('lang') == 'undefined') {
//set default lang
Session.set('lang', 'en-US');
}
i18n
.init({
fallbackLng: Session.get('lang'),
})
.done(function() {
$('[data-i18n]').i18n();
});
});
And change the Session when changing language.
Session is active until user closes his browser. If you want to preserve chosen language after re-opening browser store the lang in collection.