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
Related
Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.
I was wondering if there is already a framework or a jquery plugin which i can use to add constraints to form fields. With "constraints" in this case I don't want to say that field x is an e-mail field and needs to be validated as such but i want to define relations between form fields like:
If there is something selected in checkbox A --> enable Button B
If there are at least X entries selected in list A --> enable form field B
and so on and so forth..
I'm currently on the point of implementing it myself but I wanted to make sure that I don't reinvent the wheel.
It could be any JavaScript framework (standalone or jquery plugin).
Why a plugin? This is fairly easy with just jQuery:
$('input.A:checkbox').change(function() {
$('button.B').prop('disabled', !($(this).prop('checked'));
});
$('select.C').change(function() {
$('button.D').prop('disabled', !($(this).find('option:selected').length >= 10));
});
We're just assigning handlers to the events that happen when the inputs are changed - and I enable or disable the field depending on my condition.
I think it's better than getting a plugin because:
You're saving on HTTP requests for more files
You're saving performance by not loading more JS code
This is fairly simple as-is and there's no point to overcomplicate it.
See demo
If you use something like knockout you'd be able to make use of the knockoutvalidation framework.. or, in the past I've used jqbootstrapvalidation... the latter obviously requires bootstrap as well.
There are quite a few code samples on both sites & both frameworks are pretty easy to use. Feel free to comment on this post if you need any more specific help/advice.
Just a word of warning. If you do use knockout. Go with knockoutvalidation, and not bootstrap validation... or you'll have sleepless nights trying to get the 2 to play nicely.
Here is a jQuery plugin you could use:
http://github.com/keyo/jQuery-Form-Dependency
I am working on a project that use MVC 2.0 with Kendo UI. We decided to use AJAX validation instead of MVC Model level validation; which means validation happens during most "onchange" events on HTML controls. We coded the red CSS "highlight" on HTML controls when error happens and remove the highlight when there is no error. If there are multiple controls (e.g. checkboxes) we will highlight all of them when error occurs...and of course, error messages related to multiple fields validaton....
We get it sort of working but we had to implement a lot of javascript/jQuery coding on each web form page (including control id/name matching on the validation message) and does not seem to be able to implement it as a common routine against all web forms. We are also wondering if there is some sort of validation library already out there that more or less achieving the same thing...
Any suggestions?
If you tag your question with kendo-ui you are probably using it so it might be worthy taking a look into kendo.ui.Validator
You should try jQuery Validation
Its very easy to use, but you do still need to link each input to they type of validation required
i am using the jquery-ui autocomplete feature with multiple values for tags,
The thing is that it doesn't provide the feature to handle the hidden values and display current values as buttons (with the delete button and more usability via keyboard),
I am looking for some plugin just like this one but that works with jquery and no need of mootols or prototype
Do you know if there is any?
If not i am thinking of implement it mysel, the hidden input and displaying a list with all the options i need, but some JQuery alternative to the plugin on the link will just do it for me
Well i found this one and this one and few more (not so similar to the mentioned in question) all in here (weird couldn't find them in google separately)
Morning folks.
Novice Rich here once again requesting assistance.
I have just started dabbling with javascript and although I have set up a few onclick/change for setting the focus of radio buttons,that's pretty much my limit.
In my c# code behind, I would like to have an 'onchange' function whereby once a client starts to type in my autocomplete textbox, a drop down list (which is likely to have been populated previously) is reset/cleared to it's original state.
Anyone got any ideas how to do this?
(Chances are I haven't exp[lained myself very well here)
What you want here is to start exploring jQuery. When you find yourself familiar with it, create a server-side ASP.NET Handler that returns JSON data to your jQuery.getJSON call and from that, populate your autocomplete textbox.
Or, you can of course not reinvent the wheel and just use one of the plethora of jQuery Auto-Complete plug-ins available out there. Whether you'd still need the server-side handler to provide the auto-complete plugin with data depends on your use-case, but in most cases you'd get much better performance out of pre-populating the data when the page loads.