Remove options from dojo comboBox - javascript

Does anyone have idea how to remove options from dijit.form.ComboBox, I know how to do it from select, but the same principle is not working here. I could not find anything in the doc api. I tried with dojo.empty, same luck.
Thanks

Do you use a store with your dijit.form.ComboBox? If so (and the store is writable) you should be able to remove an item from the store and therefore the ComboBox should reflect those changes.
store.fetch({
query: {id: "123145"},
onComplete: function(item_array) {
store.deleteItem(item_array[0])
}
});
I know this works when using a dojo.data.ItemFileWriteStore and a FilteringSelect (which is very similar to a ComboBox). If you used declarative markup, the ComboBox might convert the html s to a data store and you might be able to find that store and do the same.
Also, I'm most familiar with v1.6 of the dojo toolkit. Newer versions use better data store types probably and they will probably have a more straightforward ways of deleting an item from a store than the older ItemFileWriteStore.

After invoking the code given by flauerpower, call:
reset() method on the combobox. This will also clear the selection.
1) Dojo Controls are store aware
2) reset will clear the text/selection from the control.
hope that helps

Related

How to use angular two binding for dynamically created Kendo Grid?

Actually i am creating the whole grid dynamically. In that i need to achieve two way binding using angularjs.
I have looked many examples unable to find releted my requirement.
Here i am attaching one example for two binding concept. but this not my real requrement code. that is very difficult to create dojo. So i attached this Dojo Link.
In this link when ever updating existing data it's updating to the Kendo datasource as well as $scope value. but if i add any new record then it's updating only kendo datasource not updating the $scope. Please give me the solution for this based on this i think i can able to achieve my requirement.
Thanks in advance...
http://dojo.telerik.com/aTIba/8
I achived two way binding for this.http://dojo.telerik.com/aTIba/9

Select2 dropdown menu persists after select removed from DOM

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();

CKEDITOR: Undo All DOM changes

I'm using CKEDITOR's Inline toolbar to edit text. The plugin does a lot of DOM changes and I'm fine with that.
What I want to do is to remove all attributes, elements, classes, ids, and everything that CKEDITOR added to my DOM. I can simply find all the changes and remove them individually but I want to know if there is an easier way. Also I want to be able to undo these changes on button click.
The closest that you can get using the API is by calling editor.destroy(); but I think that some people stated that it still leaves some artifacts in inline editing.
You need to look into getData and setData methods here
What you can do is to save the old state in a variable and then you can replace it using the setData method
var old = CKEDITOR.instances.editor1.getData();
$('#undo').click(function(e){
e.preventDefault();
CKEDITOR.instances.editor1.setData(old);
});
EXAMPLE

Should I use HTML attributes or classes to specify state on input fields?

My problem is a bit more complicated than this, but essentially when the user changes something on the page I would like to mark that field as "dirty" in some way and use a confirm box to ensure the user actually wants to leave the page before losing changes.
I can't use a global "something changed" variable in this case because of the need to add/remove it on certain items based on other events that occurred.
The answer to the question in the subject should take multiple things into account:
General best practices - if such a thing exists for this stuff
Lookup speed - I've seen in many places that class names are faster
Browser compatibility - no super-fancy HTML5/CSS3 whizzbang features, please. I need this solution to work in IE7+, Firefox, Chrome, and Safari. Not too worried about versions on the non-IE browsers.
Basically, I have some jQuery code that looks like this:
$(":input").on("change", function(event) {
// set something on $(this) to hold state for this item
// $(this).addClass("my-dirty-flag");
// or
// this.setAttribute("data-dirty-flag", "data-dirty-flag");
});
Which option is "better" and why?
One thing that made me even consider asking this is that AngularJS seems to use properties on tags to do this sort of thing.
I would use classes for that purpose, because you can look them up with native JS code. Looking for data-* attributes is a much heavier operation, since JavaScript will have to loop through all element attributes. You can check other posts to back me up, like the following:
jQuery select by class VS select by attribute

How do I create cascading/dynamic select lists with backbone

I am attempting to create a reusable backbone view that represents a select element, and supports the following:
Setting a selected value from a model
Binding other select views to it, so that when its value changes, other select views update their collections
I've seen a few different resources on this, such as
http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/
http://railsindirection.blogspot.com/2011/08/backbonejs-and-dependent-selects.html
However neither of them seems to support a generalized object that fulfills both purposes - they seem to be hackish.
Does anyone have any advice on how to go about creating this? Or maybe a link to someone else's code that solves this problem elegantly?
Thanks
I would recommend you to implement event aggreator this way.
http://lostechies.com/derickbailey/category/backbone-eventbinder/
so you bind the change event on your select list inside the first view to a method that triggres the update in the other views.
Hope this helps

Categories