Im trying to make a dynamic select menu where you select a customer and then filter the contacts for that customer.
when i select a customer it properly filters the contacts but the customer select menu does not show that anything is selected.
<template name="newLeadForm">
<form id="lead">
<fieldset>
<legend>New Lead</legend>
<br/>
<select id="customer_id" class="span12">
<option id="null" value="null">Select One</option>
{{#each customers}}<option id="{{id}}" value="{{_id}}">{{name}} - {{city}}, {{state}} {{zip}}</option>{{/each}}
</select>
<select id="contact_id" class="span12">
<option id="null" value="null">Select One</option>
{{#each contacts}}<option id="{{id}}" value="{{_id}}">{{first_name}} {{last_name}}</option>{{/each}}
</select>
<input id="submit" type="submit" class="btn">
</fieldset>
</form>
</template>
Here is the data being supplied to the template
Template.newLeadForm.customers = function () {
return Customers.find();
};
Template.newLeadForm.contacts = function () {
console.log(Session.get("_customer_id"));
return Contacts.find({customer_id: Session.get("_customer_id")});
};
and the event handlers
Template.insert.events({
'change form#lead #customer_id' : function (event) {
customer = $("form#lead #customer_id").val();
Session.set("_customer_id", $("form#lead #customer_id").val());
},
'submit form#lead' : function (event) {
if (event.type === 'click' || event.type === 'submit') {
event.preventDefault();
var customer_id = $("#customer_id").val();
var contact_id = $("#contact_id").val();
var lead_source_id = $("#lead_source_id").val();
var lead_number = $("#lead_number").val();
if(Leads.insert({id: Leads.find().count() + 1, customer_id: customer_id, contact_id: contact_id})) {
$("#customer_id").val(null);
$("#contact_id").val(null);
Session.set("_customer_id", null);
}
}
}
});
After Meteor re-renders the option elements in your select element, you should tell it to set the selectedIndex property on the select element so that it updates. You can do this with the rendered event:
Template.newLeadForm.rendered = function() {
$("#customer_id")[0].selectedIndex = 5; // possibly track the index so you know what to set it to
}
Simple workaround:
Template.newLeadForm.rendered = function(){
$('#customer_id').val(Session.get("_customer_id"))
}
Since newLeadForm depends on Session["_customer_id"], it will be re-rendered whenever Session["syntax"] changes, and thus template.hello.rendered will be called every time Session["syntax"] changes.
Another option, you can add an autorun for each select you want to keep updated:
if (Meteor.isClient){
Meteor.startup(function() {
Deps.autorun(keep_cust_select_updated)
})
function keep_cust_select_updated(){
$('#customer_id').val(Session.get("_customer_id"))
}
}
Whenever the Session.set("_customer_id", xxxx) is called, keep_select_updated will be rerun (as it is dependent on Session.get("_customer_id")) and the correct value will be selected (by the jQuery $('#customer_id').val(...) call).
The advantage of the latter method is you don't need to bother adding "selected" correctly into the html for each <option>
Related
I am developing a search engine for a website; now it's working fine and responding to input search keywords with no issues in its interaction with the (Django-based) local web server. The problem (well there are actually two, but I'm presenting only one here) is with the datalist. When I select an option from the list, although it goes into the search input field, nothing happens until I click the submit button.
I have written an event listener for each option, but I'm clearly missing something (important). Here's my minimal working code:
const searchForm = document.getElementById('search-form');
const enter = document.getElementById('enter');
let options = document.querySelectorAll(".option");
options.forEach((item, index) => {
item.addEventListener("click", () => {
return searchForm.action;
})
})
<form id="search-form" action ="{% url 'search' %}" method='POST'>
{% csrf_token %}
<input id="enter" type="search" list="options" name="query" />
<datalist id="options">
<option class="option" value="Happy">
<option class="option" value="Puzzled">
</datalist>
<button id="go" type="submit"><strong>🔎︎</strong></button>
<button id="reset" type="reset"><strong>X</strong></button>
</form>
Maybe the event should be something else; I've tried "keydown" and clicking twice but nothing has worked.
Try using the input event fired on the input element. The input event's data property only shows the latest addition to the input's value by clicking an option, typing or pasting, while the value property shows everything entered. Check it out in the snippet.
The event listeners on the option elements never get called - probably best to leave them out.
"use strict";
const enter = document.getElementById('enter');
let options = document.querySelectorAll(".option");
options.forEach((item, index) => {
item.addEventListener("click", () => {
console.log("clicked option ", this.value);
return searchForm.action;
})
// debug:
enter.oninput = e=>console.log('event.data: %s, enter.value: %s',e.data,enter.value);
})
<form id="search-form" action ="" method='' onsubmit="console.log(event);return false">
<input id="enter" type="search" list="options" name="query" />
<datalist id="options">
<option class="option" value="Happy">
<option class="option" value="Puzzled">
</datalist>
<button id="go" type="submit"><strong>🔎︎</strong></button>
<button id="reset" type="reset"><strong>X</strong></button>
</form>
In answer to my question, here is a solution I adapted from an article by Keith (2020) which worked for me:
JavaScript
const enter = document.getElementById('enter');
document.querySelectorAll('#enter[list]').forEach( function (formfield) {
var options = document.getElementById('options');
var lastlength = formfield.value.length;
var checkInputValue = function (inputValue) {
if (inputValue.length - lastlength > 1) {
options.querySelectorAll('option').forEach( function(item) {
if (item.value === inputValue) {
formfield.form.submit();
}
});
}
lastlength = inputValue.length;
};
formfield.addEventListener('input', function () {
checkInputValue(this.value);
}, false);
});
Reference:
Keith, J. (2020) Submitting a form with datalist. Available from: https://adactio.com/journal/17337 [Accessed October 31, 2022]
Goal: Have a select whose option have nested structure when user clicks on the select, but when user selects an option the option should be displayed "normally" (ie with no leading spaces).
Attempted solution using JS and Jquery: My JS is far from sophisticated so I apologize in advance :)
I attempted to use .on("change") and .on("click") to change the selected option value (by calling .trim() since I achieve the "nested" structure with ). I'm also storing the original value of the selected option because I want to revert the select menu to its original structure in case the user selects another option.
The problem: The function registered for .on("click") is called twice, thus the select value immediately resets itself to its original value.
I suspect there is a much, much easier solution using CSS. I will be happy to accept an answer that will suggest such solution.
JSFiddle: https://jsfiddle.net/dv6kky43/9/
<form>
<select id="select">
<option value=""></option>
<option value="a"> a</option>
<option value="b"> b</option>
</select>
</form>
<textarea id="output"/>
var orig;
var output = $("#output");
output.val("");
function onDeviceSelection(event){
output.val(output.val() + "\nonDeviceSelection");
var select = event.target;
orig = select.selectedOptions[0].text;
select.selectedOptions[0].text = select.selectedOptions[0].text.trim()
}
function resetDeviceSelectionText(event) {
output.val(output.val() + "\nresetDeviceSelectionText");
var select = event.target;
if (orig !== undefined){
select.selectedOptions[0].text = orig;
}
}
$("#select").on("change", onDeviceSelection);
$("#select").on("click", resetDeviceSelectionText);
If you are already using jQuery, why not utilize data function to store the original value. This way you will also be able to specify different nest levels.
(function($){
$(document).on('change', 'select', function(event) {
$(this).find('option').each(function(index, element){
var $option = $(element);
// Storing original value in html5 friendly custom attribute.
if(!$option.data('originalValue')) {
$option.data('originalValue', $option.text());
}
if($option.is(':selected')) {
$option.html($option.data('originalValue').trim());
} else {
$option.html($option.data('originalValue'));
}
})
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="select">
<option value=""></option>
<option value="a"> a</option>
<option value="b"> b</option>
</select>
</form>
Once caveat I see is, the selected option will appear trimmed on the list as well, if dropdown is opened after a previous selection has been made:
Will it still work for you?
Instead of keeping the state of the selected element i would simply go over all options and add the space if that option is not selected:
function onDeviceSelection(event){
// Update textarea
output.val(output.val() + "\nonDeviceSelection");
// Higlight the selected
const {options, selectedIndex} = event.target;
for(let i = 0; i < options.length; i++)
options[i].innerHTML = (i === selectedIndex ? "":" ") + options[i].text.trim();
}
$("#select").on("change", onDeviceSelection);
Note that you need to use innerHTML to set the whitespace...
On my jQuery Mobile page I would like to implement multiple filter select menus. It works totally fine with only one select menu and an id, but not with multiple.
JSFiddle with my problem:
http://jsfiddle.net/asvyY/40/
(By contrast, my fiddle with ONLY ONE select menu and a select menu id works: http://jsfiddle.net/asvyY/41/)
Error message:
Uncaught Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh'
My code:
HTML:
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<form>
<select class="filter-menu" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="filter-menu" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="filter-menu" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</div>
</div>
JS:
$(document).on("pagecreate", "#page1", function(){
$(".filter-menu").selectmenu( "refresh", true );
});
$.mobile.document
.on("listviewcreate", "#filter-menu-menu", function (e) {
var input,
listbox = $("#filter-menu-listbox"),
form = listbox.jqmData("filter-form"),
listview = $(e.target);
if (!form) {
input = $("<input data-type='search'></input>");
form = $("<form></form>").append(input);
input.textinput();
$("#filter-menu-listbox")
.prepend(form)
.jqmData("filter-form", form);
}
listview.filterable({
input: input
});
})
// The custom select list may show up as either a popup or a dialog,
// depending how much vertical room there is on the screen. If it shows up
// as a dialog, then the form containing the filter input field must be
// transferred to the dialog so that the user can continue to use it for
// filtering list items.
//
// After the dialog is closed, the form containing the filter input is
// transferred back into the popup.
.on("pagebeforeshow pagehide", "#filter-menu-dialog", function (e) {
var form = $("#filter-menu-listbox").jqmData("filter-form"),
placeInDialog = (e.type === "pagebeforeshow"),
destination = placeInDialog ? $(e.target).find(".ui-content") : $("#filter-menu-listbox");
form.find("input")
// Turn off the "inset" option when the filter input is inside a dialog
// and turn it back on when it is placed back inside the popup, because
// it looks better that way.
.textinput("option", "inset", !placeInDialog)
.end()
.prependTo(destination);
});
Here is my working JSFiddle: http://jsfiddle.net/asvyY/46/
I deleted the following lines, because jqm automatically transforms the select-tag into a select-menu
$(document).on("pagecreate", "#page1", function(){
$(".filter-menu").selectmenu( "refresh", true );
});
The correct syntax for the listviewcreate event is:
$( ".selector" ).on( "listviewcreate", function( event ) {} );
In the listviewcreate event i changed the id's to classes and initiated the listbox
listbox = $("<ul class='.filter-menu-listbox'></ul>");
I hope i could help you and sry for my bad english :)
You are running into problems because with multiple selectmenus you are using class names and no ids.
Give your selectmenus unique ids as well as the common class name. For the listviewcreate you can use the classnames and find other dom elements using closest()/find().etc.
$.mobile.document.on("listviewcreate", ".ui-selectmenu-list", function (e) {
var input,
listbox = $(this).closest(".ui-selectmenu"),
form = listbox.jqmData("filter-form"),
listview = $(this);
if (!form) {
input = $("<input data-type='search'></input>");
form = $("<form></form>").append(input);
input.textinput();
listbox
.prepend(form)
.jqmData("filter-form", form);
}
listview.filterable({
input: input
});
})
In the case of a long list showing as a dialog. I am retrieving the base ID of the selectmenu and then using it to build selectors as needed:
.on("pagebeforeshow pagehide", ".ui-selectmenu.ui-dialog", function (e) {
var id=$(this).prop("id").replace("-dialog","");
var form = $("#" + id + "-listbox").jqmData("filter-form"),
placeInDialog = (e.type === "pagebeforeshow"),
destination = placeInDialog ? $(this).find(".ui-content") : $("#" + id + "-listbox");
form.find("input")
// Turn off the "inset" option when the filter input is inside a dialog
// and turn it back on when it is placed back inside the popup, because
// it looks better that way.
.textinput("option", "inset", !placeInDialog)
.end()
.prependTo(destination);
});
Updated FIDDLE
I'm using ASP.NET MVC 4
Let's puttig this way, this is my Html:
<select id="cmbProducts" name="Products" class="form-control">
<option value="1">Product1</option>
<option value="2">Product2</option>
<option value="3">Product3</option>
</select>
<button id="cmdAddProduct" type="button">Add selected product</button>
<select id="cmbAddedProducts" name="AddedProducts" size="8" class="form-control">
<!-- These options are added dinamically on click via jQuery -->
</select>
And this is my jQuery function
$(function () {
$("#cmdAddProduct").click(function (e) {
var productName = $('#cmbProducts :selected').text();
var productValue = $('#cmbProducts :selected').val();
var exists = false;
$("#cmbAddedProducts > option").each(function () {
if (this.text == productName) {
exists = true;
}
});
if (!exists) {
$('#cmbAddedProducts').append($('<option>', {
value: productValue,
text: productName
}));
}
});
It works perfect adding elements to my list.
My problem is I'm trying to get the options array which were added dinamically on 'cmbAddedProducts' (these are being added using .append on my function).
On my controller, I'm using an ActionResult to retrieve the options on the <select>
public ActionResult AEventos(FormCollection form) {
string[] AddedProducts = Request.Form.GetValues("AddedProducts");
}
But it only retrieves the <option>'s that I added directly on html code, not the added dynamically using jQuery on my buttons click.
I think this is related to the DOM not updating but I've been searching for help without success, and still have no idea about how to solve this.
Update your javascript to
$('#cmbAddedProducts').append($('<option>', {
value: productValue,
text: productName,
selected: true
}));
so that option you add will get selected in your DOM and thus this will be getting accessed from your controller.
I have a main select "main", and a list from 2 till 9, depending the situation, of more selects.
What if I want to change the value in all this secondary selects, with the same value that the main select?. So the main select will change more than 1 select at the same time:
So, I have got the main select:
<select name="main" id="main" onchange="document.getElementById('item').value = document.getElementById('main').value">
<option value = p>Please Select</option>
<option value = b>BOOK</option>
<option value = d>DVD</option>
</select>
And the next selects are made in php inside a loop, so I will have 2,3,4,5,..,9 selects depending the situation. Each of them with a different name (because I use this name in POST)
<select name=item_".$itemnumber." id="item">
<option value = p>Please Select</option>
<option value = b>BOOK</option>
<option value = d>DVD</option>
</select>
With this I want to have the possibility to select in one time the option for all the selects, but maintaining the possibility to change only some of the selects.
I made it work like that:
function changeValue(theElement) {
var theForm = theElement.form, z = 0;
for(z=0; z<theForm.length;z++){
if(theForm[z].id == 'item' && theForm[z].id != 'main'){
theForm[z].selectedIndex = theElement.selectedIndex;
}
}
}
But I dont know if thats the best way, I heard here that jQuery would be easier, so I would like to know how to make it in jQuery, please.
What I understand is, you have a <select> dropdown, and on change of the text in this one, you want to change the the selection in one or more of other dropdowns on your screen. Am I right?
If this is the case, then you have to have a javascript function and call this in the onchange of the <select>.
In this javascript function, you have to set the selected value of all the dropdowns you want.
If this is not what you want, Can you please rephrase your question and tell us what you exactly you want?
EDIT
function setElement()
{
var selectedValue = document.getElementById("main").value;
selectThisValue(document.getElementById("child1"), selectedValue);
selectThisValue (document.getElementById("child2"), selectedValue);
}
function selectThisValue(selectElement, val)
{
for ( var i = 0; i < selectElement.options.length; i++ )
{
if ( selectElement.options[i].value == val )
{
selectElement.options[i].selected = true;
return;
}
}
}
Call setElement() in your onchange of the main. This function gets the selected item from the main <select> and selects the items in the other dropdowns that have the same value.
You call the selectThisValue function once for every select you need to change.
Change the ids as per your code.
Never put the same id in all the select elements... ID is supposed to be unique for elements in a page.
change your html to look like
<select id="main" class="master">....</select>
<select id="test1" class="child">....</select>
<select id="test2" class="child">....</select>
<select id="test3" class="child">....</select>
<select id="test4" class="child">....</select>
Class attribute for multiple elements can be the same.
Your function needs to be modified to look like this
(i havent tested this, but should work..)
function changeValue(theElement) {
var theForm = theElement.form, z = 0;
for(z=0; z<theForm.length;z++){
if(theForm[z].className == 'child'){
theForm[z].selectedIndex = theElement.selectedIndex;
}
}
}
by the way, do the options inside these select boxes vary? if so, you'll have to match by value rather than index
EDIT: here's the code i wrote later.. modify it to suit your need
<html>
<head><title>select change cascade</title></head>
<body>
<select id="main" class="master"><option value="1">book</option><option value="2">cd</option></select>
<select id="test1" class="child"><option value="1">book</option><option value="2">cd</option></select>
<select id="test2" class="child"><option value="1">book</option><option value="2">cd</option></select>
<select id="test3" class="child"><option value="1">book</option><option value="2">cd</option></select>
<select id="test4" class="child"><option value="1">book</option><option value="2">cd</option></select>
<script type="text/javascript" src="./selectchange.js"></script>
</body>
</html>
and in selectChange.js
var main = document.getElementById("main");
main.onchange = function (){
sels = document.getElementsByTagName("select");
for(z=0; z<sels.length;z++){
if(sels[z].className == 'child'){
sels[z].selectedIndex = this.selectedIndex;
}
}
}
I don't see any question marks.
The only issue I see is that you should use .selectedIndex instead of .value.
jQuery solution:
$(".selectorClass").each(function(index, selectorToUpdate){
selectorToUpdate.selectedIndex = $('#main').selectedIndex;
});
Put this in a function and call that function for onchange.