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.
Related
Is there any way to keep the current selection inside a Jodit-editor, when clicking outside of it? E.g. I'd like to have a button completely outside the editor (e.g. in a sidebar of the application) that can insert some elements in the editor window at the current position.
You can store the selection by using editor.selection.save() and it will be temporarily written in the markup. This can be restored using editor.selection.restore(). This mechanism would actually work for my use-case, but unfortunately, the 'helper-markup' is also removed/reset in the moment of the editor losing focus.
Also, I didn't find something like a 'selection'-event, that I could use to 'remember' the selection in my own state. Plus the selection. The set method from the selection doesn't seem to work, but I haven't dug into that yet.
I had the same problems and I have solved that a small trick.
As you know you can catch selection in the "onBlur" event and in there I added a special string for the check after losing focus.
for example "{}".
and then string replace with my want.
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();
I'm building a jQuery plugin to style checkboxes. I hide the real one and after it insert button which when clicked toggles the hidden checkbox. But if I check the hidden checkbox via JavaScript, fake button doesn't change of course. I thought about making it to change using jQuery's .change() but it also doesn't trigger the change when made by JavaScript and not by actually clicking the checkbox.
I want plugin to be universal and to also work if someone has a button like "check all" or "uncheck all" which does the thing with JavaScript, I want my fake checkbox-buttons to change accordingly.
The question is what method should I use instead jQuery's change() in order to watch not only changes made by mouse clicks, but also by javascript for example $('checkbox').prop('checked', true);
edit2:
I realized there is no proper way to watch properties with JavaScript, except checking the property several times a second for each checkbox which is very unattractive.I decided not to include such inefficient feature to my plugin and instead leave it to user to also trigger the change if he wants to manipulate values via JavaScript.
You can't watch properties. You could set up a timer that looks for changes every few milliseconds, but that is not satisfying.
Instead, you should rely on all other code to trigger the change event, when they want plugins like yours to update (there may also be cases when they don't):
$(':checkbox').prop('checked', true).change();
You need to trigger the change event manually.
$('#checkbox').attr('checked', 'checked').change();
Have a look at this :
JsFiddle
Is there a way using Javascript and HTML(5) to make a checkbox be partially selected, like the checkboxes in a program installation menu when you select only some of the sub options?
HTML5 defines the indeterminate boolean property.
I've tested it only in the latest Safari, Chrome, and Firefox. They all support the indeterminate state.
Example: http://jsfiddle.net/5tpXc/
Edit: Note that this wont work with older browsers and maybe not with current versions of IE. You'd need to rely on hacks as described in other answers here if you want to support all browsers.
HTML checkboxes (that is, input elements of type checkbox) don't have a third state (partially checked). So no, there is no direct way to do this.
What you'd probably have to do is make a custom checkbox-looking image and bind to its various events (click, for example) to store its current "state" in a hidden form field via JavaScript. You may run into a number of issues with this approach, though.
For example, keyboard navigation of the form may not be possible for this particular element. (Can one tab to an image and send it keyboard events? I'm not sure.)
Additionally, you could try manipulating custom attributes on a checkbox element via JavaScript to store a third state. But the rendering of the element itself has no visual indicator of something like that. You could probably manipulate its style (color, background color, border color, etc.) to try to mimic the visual behavior. But you may not be able to achieve the exact visual style that you're using for reference.
It's certainly an interesting prospect, and I'm intrigued enough that I may try to implement something like this in the near future. But with a native checkbox element, it's not possible. It has only two states.
Edit: Refer to #kassens' answer for doing this in HTML5. If you're limited to previous versions of HTML for any reason, then it's going to have to be a hack as described here. But if you can rely on users supporting HTML5, then it looks like native support is there.
Nope. You would have to make a custom checkbox graphic and fake it.
Edit: Refer to #Kassen's answer for a way to have partially checked boxes in HTML5-compliant browsers.
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.