I am using select2 version 4.0.2(rc1)
What I am seeing is that when using select2 with isMultple=true, opening the dropdown and then dynamically removing the select from the DOM, the menu sticks around.
You can see it happening in the select2 examples by focusing on control so you see the time zone options, then in the console typing $('.s2-example').remove(). The list of options sticks around.
Edit: Above is an example of what I am trying to work around. What is happening in my case is the dom is being manipulated to remove the select box by a framework in such a way that I can't hook into it before it happens. What I am trying to do is find a way to respond to the element being removed in the hopes that I can manually remove the options list if it exists.
I'm trying to figure out a clean approach to handling this. I've tried hooking into destroy like so:
$("#select-2-id").on("destroy", function(){...})
but destroy doesn't appear to be fired.
I have considered using a mutation observer but that feels kind of hacky to me. Could anyone suggest a better way to handle this? Any advice would be appreciated. Thanks!
Definitely buried in the documentation (under adapters), but you should be calling the destroy method on the select by passing "destroy" to the jQuery object's .select2() method
$(".js-example-basic-multiple").select2('destroy');
This destroys the instance. You can then safely call .remove()
$(".js-example-basic-multiple").select2('destroy').remove();
Related
I'm trying to use the SelectBoxIt jQuery plugin and it looks great and promising and everything though i have 1 issue with this plugin, it seems that there is no native way to update the original select element with the selected value.
at first look on the documentations it seems that indeed there is an option to do so:
Aggressive Change Mode
Note: Aggressive Change Mode will select a drop down option (and
trigger the change event on the original select box) when a user
navigates to an option using the up and down arrow keys via the
keyboard, or searches for an option using the keyboard.
the words:
trigger the change event on the original select box
confused me for a moment but as you can see this is not my use case, it is only referring for a navigation with the keyboard and updating the new drop-down created by the plugin.
am i missing something or there is no native way of doing what i ask for?
and if so, what would be consider a best practice for updating the original select element?
i already thought of some options using callbacks or change events but not sure what would be consider as best practice.
For the life of me I cannot figure out how to trigger a suggestion selection on a TypeAhead input
I've tried all kinds of things like
.trigger('suggestionClicked', $('.tt-dropdown-menu .tt-suggestion:nth-child(1)'))
I suppose there are really two parts to this problem.
1. Properly selecting the actual TypeAhead object.
I do this primarily by focusing (focus()) on the input field, and then using jQuery to find the element that is active ($(document.activeElement)). This might not be the best way. It's quite difficult to test in the browser web-inspector because every time I go to the console I lose focus and then the menu disappears (literally removing the results from the DOM)
2. Triggering the correct event.
I'm not sure exactly on which object or which event to trigger, but my best guess is either suggestionClicked on either the TypeAhead object or the TypeAhead.Dropdown object. Second best guess would be click.tt.
I might be overthinking this.
If you really care about the reason behind this, it's because I need to test the functionality via Capybara/Selenium.
I've been browsing the source code on github for some insight.
Here is a step in my Capybara attempt. I feel like I'm getting close but it's not there yet.
steps.rb
Then /^I select result number "([^\"]*)" from typeahead$/ do |num|
find('.tt-dropdown-menu')
#within('.tt-dropdown-menu') do
page.execute_script %Q{$(document.activeElement).dropdown().trigger('suggestionClicked', $('.tt-dropdown-menu .tt-suggestion:nth-child(#{num})'))}
#end
end
I have a web app built on KO and for the most part it has been a god-sent. However, I have one very frustrating problem.
When I move an element with jQuery from one spot in the DOM to another, the bindings seem to randomly break. Sometimes they survive the move, sometimes they don't. Anyone know what might be causing this? I wish I could give a specific example, but I can't seem to re-create it in a simple case (for a fiddle) and it truly is random (3 in 10 tries).
Is there a way to refresh the bindings in an element?
Cheers,
Had a similar issue. It was happening for me when I was moving the DOM element before applying bindings.
Make sure that all the applyBinding calls are made before you move the DOM element.
That is about all the help I can give without a code sample.
Perhaps try using ko.cleanNode to clear the bindings from the moved element, then ko.applyBindings( model, element ) to rebind them?
See also How to clear/remove observable bindings in Knockout.js?.
I recently found and applied the changeTracker/dirtyFlag approach successfully in my code and everything was good. Very neat and useful. Though, today, I was trying to use it again and something weird was happening: the somethingHasChanged trigger was firing as soon as I opened the page.
I looked, searched and nothing. I was not doing any change to the observables after setting the tracker.
After a couple of hours of this, I found the root of the problem:
One of the observables is binded to a <select> element thus setting the currently selected <option>.
If I remove this binding, it no long triggers.
I don't know why this happens, since the value is only read (supposedly).
Any thoughts on this?
My guess would be that you are binding against numeric values and the selected one is being written back to your view model as a string, as KO reads it out of the DOM element.
I have a select list where a change event has been bound to the element using jQuery. Something like this:
$("#someId").change(function() {..});
When someone chooses a new option in the select list, another part of the UI will change accordingly. Now this works fine when I use the mouse and click things, however, when using Watij to write my tests I need the jQuery change event to fire which it isn't doing.
The Watij test will correctly choose the select option required but the actual event does not get triggered. I have tried calling fireevent("change"); and fireevent("onchange"); to no avail. I have also tried ie.sendKeys("{ENTER}"); and ie.sendKeys("{TAB}"); which also does not seem to do the trick.
Any ideas?
The only solution I've found so far is to roll back the version of jQuery in use. I'm currently using version 1.4.1 (the offending version in regards to the testability of the change event on select boxes) and after going back to version 1.2.6 the problem goes away.
Use $('#someId').trigger('change'); to fire the event manually.
See the documentation for trigger().
When the combo/list value is changed with script the onchange is not supposed to fire. I don't know how Watij is doing that, but this is one case.
Second thing is that Watij is working with IE (as long as wikipedia is rght) and IE is putting a system control in place of Your list or combo and it might break something too. Try upgrading to IE8 which has a tiny bit better realisation of form components (eg. select finally supports "disabled" attribute in options after 10 years)
You might also be interested in a normal application GUI testing apps and use them on a browser with the webapp. Record a macro and check screenshots.