formatting form input field unbinds my ng-model - javascript

I have a form that i am trying to submit with angular JS
One of the field requires generation of an ethiopian calendar , so i am using an external javascript library to show this date - available here http://keith-wood.name/calendarsRef.html
To show the date picker one creates an input text as below:
<input type="text" id="ethiopianDOB" ng-model='Ethiopian'
And corresponding javascript
$( "#ethiopianDOB" ).calendarsPicker({
calendar: $.calendars.instance('ethiopian')
});
However this interferes with my ng-model binding and hence cannot access my variable in $scope (I reviewed the object on form submission and i have no item like $scope.Ethiopian
I am looking for ways to either
1. Retain the binding of the ng-model OR
2. Not require the javascript to instantiate the calendar OR
3. Improvement on my approach to this problem
Thanks

You should not mix JQuery and Angular if possible. Try to 'think in angular' instead of falling back on JQuery.
Here is a great post about this topic: "Thinking in AngularJS" if I have a jQuery background?
That being said, you should try to replace the JQuery calendar with an angular directive such as the datepicker from Angular UI Bootstrap. I don't know if they have an Ethopian calendar but you could always build your own.
This would fix your issue.
Hope this helps.

Related

Reusability of repeatable code in html

I have 10 inputs in my webpage, out of which 4 inputs requires date(Date of birth, Purchase date and many), I have my own custom calendar. Currently I'm repeating the code below all 4 inputs which requires date, Is there any efficient way to do without repeating
Since you are already using AngularJS, and already have your own custom calendar, you can change your custom calendar to a directive. Since, there are multiple instances of directive in a single page, create directive have isolated scope, and use this directive in your form.
Similarly, for validation too, you can create your own directive to do validations.
I have 10 inputs in my webpage, out of which 4 inputs requires date
What you should be doing for a date input is using the date input type. This gives you a semantically correct form.
I have my own custom calendar
Write your own polyfill for the date input type, overriding whatever you need.
Reusability of repeatable code in html
In the general case, consider using Web Components. https://www.webcomponents.org/ This is a newly revived standard around reusable HTML, and works much the same way a lot of front-end frameworks do.

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!

How do I get live feedback in MVC or html based page?

What is the best way to implement live feedback on a MVC based page?
Let's say if I edit a text box for number of items another disabled text box value for price will change.
Will it use Javascript or will it be similar to validationFor methods ?
If yes how will I go about doing this , if no what other methods would I use sorry for the noob question...
Please consider expanding your question and maybe include some code. Are you using razor to build your input element?
I love angularJS for this you can have an MVC input element and get instant feedback from it.
<input type="text" name="myInput" ng-model="theInput"> {{theInput}}
Angular binding will cause you to get instant feedback of exactly what's in your input element, of course you can just look at the input element too LOL. But in the above case myInput is your model variable ie Model.myInput, and theInput is your angular scope variable, ie. $scope.theInput.

Select to autocomplete angular directive

I am looking for a way to make my select into an autocomplete field. I know of angularJS directives that give you autocomplete functionality, but these don't allow the input name (what the user sees) and the input value (what the system uses) to be different. I need a select box, however, because the option name (that the user will see) and the option value (that the system will use) are different.
I know of such a plugin for jQuery, selectToAutocomplete, which is pretty neat and works well, but I would prefer to stay with AngularJS as much as possible. Is there an AngularJS alternative for jQuery selectToAutocomplete?
Angular UI ( http://angular-ui.github.io/bootstrap/ ) has a directive Typeahead which should fit your requirements. Look at that page for the 3rd example under Typeahead section with title Custom templates for results

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

Categories