Creating Dynamic dropdown in django modelform - javascript

I have a single class with three fields in in my model. I want to make a dynamic dropdown so that when I select first field the second has to change and so on. I have gone through this question Django/jQuery Cascading Select Boxes?
but it seems like the solution there assumes multiple classes but I have a single class.
PS: I am a novice in Jquery and Javascript so anything which mainly involves django manipulation would be of great help.

There is a great library for django called django-autocomplete-light
You can look at http://django-autocomplete-light.readthedocs.org/en/latest/dependant.html

Related

Multi select Dropdown with filter

I have a requirement where in I have to create a multi select drop down where the elements can be searchable and the count of selected items should be displayed upon selection.
I have found the partial part of the requirements at this link
But not sure how to make the drop down collapsible and expandable
Wire frame image as below
Has anyone come across and worked on such requirements?
Well it depends also a bit if you are using plain Javascript or if you are also using a Framework like Angular/vue/ember or so
here is one component that looks like it makes what you want
http://selectize.github.io/selectize.js/

Customising Symfony2 CollectionType Form field display

I've been experimenting with Symfony forms for some time. Without a doubt Symfony's FormType is a great feature which help create robust forms, especially with related entities (eg. ManyToMany, OneToMany etc.). The FormType makes my job a lot less complicated and easy when it comes to persistence. One of these case is the embedded forms, where u have multiple(lets say Category and Tag) entities with ManyToMany relation. Using FormType, I can create a 'Select dropdown' field using ChoiceType form field to choose category from, embed another CollectionType field with multiple 'text input' fields to accept multiple tagname, and finally a submit button. All I need is to add the cascade = {persist} option using annotations on the categoryname property of the Category entity and Wallah!
Now what if I wanted to create a single input field which can accept multiple tags, instead of having multiple input fields. Like this:
To do this I can create an <input> element using CollectionType form field, and then in my html.twig I can insert the javascript(jquery/AngularJS) dependency as attributes.
This can be done by using jquery Chosen or Select2 https://www.sitepoint.com/jquery-select-box-components-chosen-vs-select2/
or by using AngularJS ngTagsInput component http://mbenford.github.io/ngTagsInput/
Not just this particular case, I know that jquery delivers almost everything u want to do on the client side, and works good with Symfony, but I've been looking into AngularJS for some time now and it is undoubtedly true that it is further a step ahead of jquery or any other javascript framework. Thus my opinion is a little biased towards AngularJS.
The thing is, jquery(Chosen/Select2) uses <select> element and the AngularJS(ngTagsInput) uses custom <tags-input> element to display this field. Although with AngularJS I can make some elementary changes and convert the <tags-input> element to <div ngTagsInput> but I can't convert it to <input ngTagsInput> because the standard HTML<input> element has no closing tag, thus many features like auto-complete don't work. Customizing ngTagsInput & autoComplete directives (AngularJS)
Problem: For Symfony to persist the CollectionType field input in the standard way I need to use the <input> element to display the field.
Questions:
How do I make this work?
How compatible are Symfony and AngularJS? And is it recommended to use them together?
All help is appreciated.
Thanks in advance!

Dynamically use SelectToUISlider

My current project creates user forms dynamically from a database. One of the tables defines what type of input a question should be formatted for the user. I am having difficulties getting a slider UI element working with this paradigm. SelectToUISlider, originally designed by the Filament Group, seems to be a good fit; however, I have been unsuccessful calling the UDF on the generic SELECT element from JQuery when there are more than one on a page.
If there is only a single SELECT I have no issues. If I hard-code the ID tag to be selected I have no issues. But getting it to use the ^= or |= selector has been completely unsuccessful.
Any help is appreciated.
$("select[id^='slider']").selectToUISlider();
http://jsfiddle.net/wolfphantom/zuvtpnLg/1/
As stated in the JsFiddle example you have provided it is working, isn't it?
So it seems you have a problem related to the dynamic select that gets populated at run-time after a certain operation...
So If you want to initiate the selectToUISlider on a single strip you can do is,
$(document).find("select[id^='slider']").selectToUISlider();
And i have created a Demo JsFiddle that includes a dynamic select being added in run-time.
But you want to implement selectToUISlider for each and every select individually, then why not run the loop on those element and initialize it individually.
$("select[id^='slider']").each(function(){
$(this).selectToUISlider();
});
So, the downfall, however will be, it will not work on dynamic elements, So you need to initialize those after the element is added to the DOM.
And here is the Demo JsFiddle for it.
P.S
I don't have a prior knowledge of the plugin, But I hope it will work for you.
Regards.

How to create a custom "autocomplete" asp.net mvc, (like google)?

I'm just hoping to get an idea on how to go about creating the following functionality on a screen. I've been using webforms in the past so I felt the need to get over it and start using MVC before I get left behid, so to speak.. thus the project is in Asp.NET MVC, (& JQUERY, but have been getting more comfortable with it lately), so I feel it should be do-able at this point)
I basically want an autocomplete. The employee no textbox should act as input, and as the user types, the items below should render/be visible & update, something to that effect. I'm id like to colour code them by relevancy/or by time.
I think I've got the following problems/questions.
1.) How would I submit without a button click.
and my controller would return a JSON result (I'm assuming would be the best route)
2.) Update/Render my results without redrawing/posting the page
3.) Applying the colours (but its minor at this stage)
I know its asking a lot. So thank you in advance.
Any links of tuts would be appreciated as well.
UPDATE
I just relized that how google's search is working would be a perfect example. Autocomplete on the textbox & results start displaying as you type
As your using jQuery and MVC3 the default MVC3 template aslo contains jQuery UI with has an autocomplete widget that is easily adaptable to what your after.
http://jqueryui.com/demos/autocomplete/#remote
Have you considered usign jQuery UI Autocomplete?
It seems to be valid for all the points that you mentioned.
You can check it out here:
jQuery UI Autocomplete

Auto populate combobox

IN my case i want to implement multi select auto complete combobox using html,javascript.
Is there any body who knows how to implement it.
Which will be similar to text field shown in stackoverflow while adding multipal tags to any question.
If you are talking about multiple drop down boxes that are linked, so that the selection in the first drop down menu determines the possibilities in the next, then the ASP.NET Toolkit has a nice cascading drop down sample. This will only, of course, come in handy if you are programming in ASP.NET. I would not recommend trying to reverse engineer the solution.
What do you mean by auto populate?
If you want to populate the drop down box dynamically you can just use a normal HTML Select tag and use Ajax to fetch the list of values to be shown in the drop down

Categories