this is closely related to this post:
Is there an onSelect event or equivalent for HTML <select>?
...but specifically for the Dojo ComboBox..(I am using Dojo w/ ArcGIS JSAPI).
I have three combo boxes, which populate the successors using queries triggered by the selections from the dropdown list. My problem is that if the second combobox selection remains the same, the query is not triggered. I have tried using onblur and several other events instead of onchange, and tried to reset the value of the selection in JS, but neither has worked. The value is reset but the combobox still acts as if the same value is there, so onchange does not work. I tried many of the methods in the link above, but none worked for me. As far as I can tell, my comboboxes do not generate any selectedIndex.
Any suggestions? Thanks, J
All three dijits dijit/form/Select, dijit/form/FilteringSelect and dijit/form/ComboBox subclass dijit/_HasDropDown and that adds them a property dropDown:
// dropDown: [protected] Widget
// The widget to display as a popup. This widget *must* be
// defined before the startup function is called.
dropDown: null
What you want is to listen on this dropDown widget. The problem is that in the case of ComboBox and FilteringSelect this widget dijit/form/_ComboBoxMenu gets instantiated lazily, i.e. when you open popup for the first time. So you need to hook to opening dropDown in the first place and then add onClick event listener to the dropDown:
var signal = aspect.after(comboBox, "openDropDown", function() {
comboBox.dropDown.on("click", function(node) {
console.log("value:", comboBox.get("value"));
console.log("selectedIndex:", domAttr.get(node, "item")); // <= this is not an identifier
}
signal.remove(); // remove aspect so it called only once
}
It's a bit easier when working with dijit/form/Select, because dropDown exists and you can listen to onExecute on its dropDown dijit/Menu immediately:
select.dropDown.on("execute", function() {
setTimeout(function() {
console.log("value:", select.get("value"))
});
});
See all three in action at jsFiddle: http://jsfiddle.net/phusick/Hp5jr/
Related
I have a bootstrap multiselect html element that i fill with data from a web service call that gets a list of regions in New Zealand. I need to load those options into the <select> and not select the top option by default.
I have tried everything that is done via the bootstrap multiselect built in functions and options. Nothing will work. So i am resorting to vanilla javascript or vanilla jquery to go straight into the plain html and deselect the first option.
All work on this can be done in this jsfiddle
I had to copy paste a minified external resource (xml2json.min.js) into the top of the javascript editor because it wasn't playing nicely when I tried to add it as an external resource.
I have tried this:
$("ul.multiselect-container").find("li").removeClass("active");
And it doesn't work. It removes the active class but doesn't deselect the option. How do I deselect the option?
I have tried this:
$("ul.multiselect-container").find('input[type="radio":checked]').prop('checked', false);
It doesn't deselect the option.
Please see if you can deselect the top option of the select.
So the jsfiddle at url same as above but ending in 182 is my refactoring to try and make it easier for people to understand but it didn't end up working correctly on my friends laptop.
When using the plugin as a <select multiple=true> it doesn't select the top option by default. However I need that same behaviour with a normal <select>
I just had a look in the plugin, And here is what I understood, To remove default selection you must have your selection set as multiple='multiple', This is when you can see a Checkbox in the drop down rather than radio buttons.
If you do not put this multiple option set then you will end up in having a radio button and this will set the first value by default. Here is the Fiddle which doesnt not select any default value. I just added the option multiple='multiple' to your dynamic select tag.
To have the option multi select set and also be able to select only one at a time use the below code. You need to replace your code block with this one
$("body").prepend("<select id=\"a-select\" multiple='multiple' >"
+ optionsText +
"</select>");
$('#a-select').multiselect({
on: {
change: function(option, checked) {
alert('sdd');
var values = [];
$('#a-select').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('#a-select').multiselect('deselect', values);
}
}
});
Logic taken from http://davidstutz.github.io/bootstrap-multiselect/#further-examples, see the 5th example from here which says Simulate single selections using checkboxes.
I have redefined the method "deselect" as follows.
this.deselect = function() {
$('input[type="radio"]:checked').attr('checked', false);
$(".multiselect-selected-text").text("None selected");
}
JsFiddle Demo
Add an empty option to the top of the select element.
I am facing a small problem regarding input validation in mvc telerik grid.
I have it set to batch editting and I'm modifing the cells in an InCell mode.
Now whenever a user enters an invalid value in one of the inputs(Telerik's comboboxes/autocompletes), I'd like to display a message that
the entered value is iligal(this far I've managed on my own).
In addition to the message I'd like to revert the cell's value to it's previus value before
the user input.
So far I've tried:
grid.CancelCell(this);
$('#grid .t-grid-edit-cell input[type="text"]').value or innerText = prevVal;
The closest so far was e.newVal = e.oldVal, although it sometimes throws me a wierd exception in the jquery scripts or displays the combobox's drop down.
All the validatios and things I've tried are from the grid's client event OnSave()
It's same like what i searched before and I have solution for you.
On your OnSave() method has event like OnSave(e) and that 'e' carry all the elemnts and functions inside in my example after validation if not ok i can change that value to old value. Also you can use inspecter element log to look up what is inside 'e'
function onSave(e){
if(!validation)
{
///
}
else
{
e.cell.firstChild.value = "0"; // that is my edited cell
}
}
Our website's page can be seen here and the problem is related to the Year, Make, Model widget at the top of the content area. When a year, make, model, submodel, and engine is chosen... Part Type is the next drop-down and it's values (like the others) are populated via AJAX. Unfortunately, I'm trying to set this value based on the category the person is on and will actually be hiding the field completely.
I'm using the code below to attempt this --
jQuery('div.amfinder-horizontal td:nth-child(5) select').change(function () {
jQuery("div.amfinder-horizontal td:nth-child(7) select").append('<option value="0">Position</option>');
jQuery(this).parent().addClass('active');
jQuery(".popover").hide();
jQuery("#popover6").show();
jQuery("div.amfinder-horizontal td:nth-child(6) select option").each(function() { this.selected = (this.text == "Windshield Wiper Blade"); });
jQuery("div.amfinder-horizontal td:nth-child(6) select option").change();
// The following two lines are commands for a Prototype script, in place to simulate the change event
$('finder-4023--20454').simulate('click'); // This is the ID of the select element ( it is the same as div.amfinder-horizontal td:nth-child(6) select )
$('finder-4023--20454').simulate('change'); // This is the ID of the select element ( it is the same as div.amfinder-horizontal td:nth-child(6) select )
console.log('Changed!');
});
I believe what is happening is that the AJAX population occurs and then the change event tries to trigger before the AJAX function finishes. The AJAX is in a Prototype script and I'm not comfortable changing that. Instead, I'm wondering if I could simply delay the change and simulate events for a second or so that the AJAX population can finish.
Please help out. :-)
Try replacing the first line with this:
jQuery(document).on('change', 'div.amfinder-horizontal td:nth-child(5) select',function () {
This will work for the elements that are added even after the code was called, which is something you must have when you render parts of the page with AJAX.
Read about delegated events here: http://api.jquery.com/on/
I have an interactive basket whereby the user can drag and drop an item into the basket. However, the same item cannot be placed in the basket twice (but it remains visible, albeit faded), so once it is in the basket, the draggable property must be disabled.
I tried doing this:
$("#product_badges li:not(.on)").draggable({
// Options here
});
However, as this just initiates the draggable() property, the element is still draggable even if I do add the on class to it when it has been dropped.
I therefore cannot see a way of achieving this without having several instances for the draggable property like so:
$("#product_badges li:not(.on)").each(function(){
$(this).draggable({
// Options here
}
});
With the above method I can then call the individual product_badge and disable dragging like so:
This only gets called once the item has been placed into the basket (dropped)
$('.item',$('#product_badges')).draggable('disable');
Is there a better way of achieving this? Can you set an HTML element to only be draggable if it does not have a particular class?
Update
See example here: http://jsfiddle.net/mB6GK/2/
use the cancel property.
$("#product_badges li").draggable({ cancel: ".no" })
fiddle:
http://jsfiddle.net/sGguz/
You could use the start event,
$("#container").draggable({
start: function( event, ui )
{ return !$(ui.helper).hasClass('nodrop'); }});
http://jsfiddle.net/mB6GK/4/
I'm trying to create a table of inputs that automatically adds a new row when you enter text in one of the inputs on the bottom line. For the most part, it works fine. However, I'm having some trouble with jQuery UI checkbox buttons.
The checkbox buttons are supposed to change their icon when clicked. This works fine for the original buttons, but the cloned button that appears when you add a new row doesn't work properly.
You can see it in jsfiddle here. To replicate the issue, put some text in the third input down. You'll see that a fourth row appears. If you press the fourth checkbox, you'll see the third checkbox is the one whose icon changes. The wrong button also gets ui-state-focus but doesn't actually get focus, which really baffles me, though the correct button does get ui-state-active and seems, as far as I can tell, to evaluate as having been checked properly.
To be clear, the two checkboxes do not have the same ID, and their labels are for the right checkbox - the createNewRow() function takes care of that. If you comment out the line that turns the checkboxes into jQuery UI checkboxes, you'll see everything works fine. If you console.log the value of $(this).attr('id') in the buttonSwitchCheck function, you'll see that it has the right ID there too - if you click the fourth button, it'll tell you that the id of $(this) is "test4", but it's "test3" (the third button) that gets the icon change.
I'm going mad staring at this and I'd appreciate any help people can give. Here's the code:
// Turns on and off an icon as the checkbox changes from checked to unchecked.
function buttonSwitchCheck() {
if ($(this).prop('checked') === true) {
$(this).button("option", "icons", {
primary: "ui-icon-circle-check"
});
} else {
$(this).button("option", "icons", {
primary: "ui-icon-circle-close"
});
}
}
// Add a new row at the bottom once the user starts filling out the bottom blank row.
function createNewRow() {
// Identify the row and clone it, including the bound events.
var row = $(this).closest("tr");
var table = row.closest("table");
var newRow = row.clone(true);
// Set all values (except for buttons) to blank for the new row.
newRow.find('.ssheet').not('.button').val('');
// Find elements that require an ID (mostly elements with labels like checkboxes) and increment the ID.
newRow.find('.ssheetRowId').each(function () {
var idArr = $(this).attr('id').match(/^(.*?)([0-9]*)$/);
var idNum = idArr[2] - 0 + 1;
var newId = idArr[1] + idNum;
$(this).attr('id', newId);
$(this).siblings('label.ssheetGetRowId').attr('for', newId);
});
// Add the row to the table.
newRow.appendTo(table);
// Remove the old row's ability to create a new row.
row.removeClass('ssheetNewRow');
row.find(".ssheet").unbind('change', createNewRow);
}
$(document).ready(function () {
// Activate jQuery UI checkboxes.
$(".checkButton").button().bind('change', buttonSwitchCheck).each(buttonSwitchCheck);
// When text is entered on the bottom row, add a new row.
$(".ssheetNewRow").find(".ssheet").not('.checkButton').bind('change', createNewRow);
});
EDIT: I was able to find a solution, which I'll share with the ages. Thanks to "Funky Dude" below, who inspired me to start thinking along the right track.
The trick is to destroy the jQuery UI button in the original row before the clone, then reinitializing it immediately afterwards for both the original row and the copy. You don't need to unbind and rebind the change event - it's just the jQuery UI buttons which have trouble. In the createNewRow function:
row.find('.checkButton').button('destroy');
var newRow = row.clone(true);
row.find('.checkButton').add(newRow.find('.checkButton')).button().each(buttonSwitchCheck);
Try using the newer method .on, that allows for delegation, which should help with the dynamic changes to your DOM:
$(".checkButton").button().each(buttonSwitchCheck);
$("table").on("change", ".checkButton", buttonSwitchCheck);
I'm not sure, but it might help with not having to worry about binding events to specific elements.
Also, you could use it for the textbox change event:
$("table").on("change", ".ssheetNewRow .ssheet:not(.checkButton)", createNewRow);
Here's your fiddle with my changes: http://jsfiddle.net/Cugb6/3/
It doesn't function any different, but to me, it's a little cleaner. I thought it would've fixed your problem, but obviously hasn't, due to problems with the button widget.
And funny enough, it doesn't seem they "support" cloning: http://bugs.jqueryui.com/ticket/7959
i think you are using deep clone, which also clones the event handler. in your create new row function, try unbinding the change event then rebind on the clone.