Multiple Directives working together - javascript

I have an idea I want to build in Angular but I'm not sure if it is possible and how I can start developing it.
The idea is that by extending html with some own attributes, I could call a webservice without any need for javascript code.
The result for the developer would be something like this:
<div service-url="http://myWebService" service-id="id1">
<input service-id="id1" service-input-id="FirstParameter"/>
<input service-id="id1" service-input-id="SecondParameter"/>
<button service-id="id1" service-submit>Submit</button>
</div>
The idea is you can create a service call with a unique service-id. You can then create elements such as inputs/selects where you use the same service-id together with a unique service-input-id that refers to the field in the webservice the value should be mapped to. Finally by adding the service-submit attribute to an element a trigger can be created to call the webservice.
If I translate this to AngularJS, each of those custom attributes needs to be a custom directive if I'm not mistaking. But I'm not sure how I can let them work together when the scope is isolated. For example: when the user clicks the button with the service-submit, I need to get all the values of the inputs that are linked to the same service-id.
I'm not even sure if I'm thinking in the right direction regarding how to approach this in Angular. So any help would be greatly appreciated.
PS: My idea is not with webservices but it seemed like the closest thing I could use in my question to get the concept across.

Related

ViewModel like validation in AngularJs

I'm having some difficulty envisioning a potential solution to a dilemma I'm facing, and I need some creative inspiration.
Essentially, I'm struggling to picture a good way to validate a form that can be thoughts of as having multiple nested forms. The challenge is that these nested forms are only rendered when a line item in the main form is clicked, causing a modal to open, at which time the rendering, model binding, etc. takes place, and the nested form can be validated.
The goal is to know whether or not there are validation errors down inside any of the main form's line items without having to open/render a modal for the item to find out. I'd also like to make sure that there's no duplication of validation logic, and that things are drawing from a single common set of validations rules that can be shared/accessed everywhere needed.
Ideally, I'd like to abstract out the validation logic such that it can be used by any ng-model bound element, but can also be used independent of rendering a form.
If anyone knows of any plug-ins that work well with AngularJs and sound well suited, please let me know.
Clarification
Though I'm open to checking out any plug-ins that might help, that's not really what I'm after. My main objective to is to find a way to validate my nested item data without opening/rendering the item's modal.
I would use something that ensures that the user fills in these forms in a predefined format in the first place.
I use something called inputmask in my angularJs applications.
You can use a regex to define the format you want the inputs to be in.
You can also make sure that all the fields in the modal are in the right format before letting the user close the modal(This validation logic can come from a shared or common component).
Another option would be to make the modals hidden and not removed from the DOM so that the bindings remain even when the modal is no longer visible. You can add a red asterisk or something against the line which opens the modal to indicate errors in that modal's form.

Odoo9 - How to access the DOM of a formview from javascript?

I Want to change few field colors dynamically.
I couldn't do that directly like the tree view , to do the same on the form view we should use JavaScript (correct me if i'm wrong) , i'm trying a solution ,but i have a problem i don't know how to access to the DOM of a form-view ,can you help me with this ?
Check the web repo for examples. For the tree view search for "color" there. Here are a couple:
https://github.com/OCA/web/tree/9.0/web_context_in_colors
https://github.com/OCA/web/tree/9.0/web_tree_dynamic_colored_field
The approach is the same: you override/extend the class of the widget via JS, like here, no matter if is a list/tree view or a form view.
This one for instance acts on form view. As you see, is plenty of examples. Still, you should provide more info on what you are trying to achieve.
Last but not least, read the official docs about javascript and check stack overflow for existing answers.

Grails: Populate dropdown list when another dropdown is selected

I have a situation where I need to populate a drop down list on my gsp once a choice is made in another drop down list. I am not sure how to go about this. I have the parent dropdown list populated via a model map right before the gsp is rendered.
I can easily provide model info to a gsp from my controller right before the gsp is rendered but I have trouble creating and passing a model to a gsp on the fly i.e. once the gsp is already rendered how to do it? Should I send it as ajax or how? I just can't seem to see it. Im not looking for an exact code answer as much as conceptual advice.
The first step I am doing is to try to invoke a function in the controller when the parent drop down list on the gsp is used to choose a value:
<g:select name = "seleInst" from = "${instlist}" style = "border-radius: 5px" onchange="${remoteFunction(action:'updateUserlist(this.value)', controller: 'admin')}"></g:select>
The problem I face here is how to pass to the controller method the argument(value selected in parent dropdown list). I just put it in parenthesis above to help me think. This is probably not the correct syntax.
Thanks.
The correct way to do this is to populate the second list via ajax. Using jQuery this is pretty simple.
Attach an on("change") event listener to the first select list.
Make an ajax call to get a JSON response from your controller, passing the selected value.
Use the JSON response from the controller to populate the second list with option elements.
I can provide detailed code examples of each if that is really needed, but you stated you just wanted conceptual advice so let's start with that.
updated
Seeing that you are using the remoteFunction (which is going away in future versions of Grails I might mention) you are going to struggle a bit getting your parameters in there correctly.
However, according to this post it can be done. If you are using a 2.x version of Grails then your provider will be jQuery. I have always stayed away from the remoteFunction tag personally and written my own jQuery.

Changing html form index when a new form element is added

I am working on an old legacy application which used document.forms[index] approach to access elements in the form and to submit the form. My task is to add a new top panel with few textboxes and buttons. I am using a form for this. This top panel is to be included in all the pages in the application. Now, all the pages stop working since form[index] needs to be updated in all the pages. I know using the form name is the best approach. I have around 1000 places to change. What is the best approach to avoid this problem? I still want to use form for my top panel since I am using spring forms to get the data. Any valuable advice will be appreciated. Thanks.
If you looked up the definition of "unmaintainable", that would be a good example.
One trick might be to leave one set of forms, hidden, with the legacy stuff in them, then make another set, lower in the HTML, that the user sees. Then use some JavaScript to map the data back into the original forms in order to continue to work with the expectations of the legacy code. This keeps everything in the same index-order.

Implement instant search adding and removing html elements dynamically

I am a beginner at HTML and javascript so apologies if the questions below appear obvious.
I am trying to implement instant search in a website with pure java script but I have a few questions.
Right now I plan to have a function respond to each onkeyup event. Making use of AJAX, the function will contact a server which returns links separated by a newline character. now the questions:
If the text returned by the server is already in the form of html links and paragraphs, is there a way I can insert it after the html input text box? If so how can I do this? I have found references to createElement() and appendChild() methods but am not sure how they work. Also, people have suggested using a tag but I have never used this in html and am not sure what it is.
If the above is not possible I was thinking of doing the following,
When the text is returned by the server,
1. use String.split() to turn the returned text into an array of results.
2. for each element in the array
3. Create an element and insert it . (still need to check exactly how to do this).
4.
end for
A problem being is that I would need a quick way of clearing the previous search results each time a key would be pressed.
Any help is greatly appreciated.
The best way is to return via Json.
Json will have all search result, you can easily use Json via http://www.json.org/js.html
This will be good approach in place of splitting out the contents.

Categories