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.
Related
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.
I have a form which have a select drop down. i have disabled it by default and will re enable it based on some conditions. i don't want anybody to access the select option values when it is disabled(now it can be viewed by inspecting the element from browser). how do i make it secure?
I don't think you can. You might be better off populating it when it's needed instead of enabling it. You could do that with an Ajax call.
You need to use ngIf directive.
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
Usage
<select ng-if="someCondition"></select>
If you use a simple binding library like knockout.js you can use container-less binding which will only render the select DOM when you want.
Knockout is is a great little library which plays nicely with most other libraries so shouldn't cause any trouble, all you ned to do is import the js file.
Container-less binding will only render the DOM when it needs to, so inspecting the page element will not display the select box.
<!--ko if: IsShown -->
<select>Render Me</select>
<!--/ko-->
Here is a simple fiddle to show you how to make it work.
Knockout Containerless Binding
You could avoid rendering it, which would hide it from the DOM inspector, but the data would still be in the browser and available to a user who cared to look in the right place.
If you don't want the user to see the data, then don't send it to the client in the first place.
When you want to display the select element, make an Ajax request to the server. Then perform authentication and authorisation to make sure the user is allowed to see the data. Then return it in the response and have Angular generate the select using that data.
There is no way to hide part of code from viewing by user in browser, because browsers have to see the code to run it, so it can be viewed by user. But, using php can help you to generate content for page only when it's needed. I think you can generate content for your drop-down, or the whole dropdown using that way.
I'm new to Ajax and was told need to use it for what I'm trying to accomplish here.
Here is the website... http://modocom.ca/gillons
If you scroll down up will see a section called Find an Office with drop down menu in it. What I need is for when someone click on for example Emo in the dropdown menu the location info from.... http://modocom.ca/gillons/emo goes under the dropdown and so on for each location in the dropdown and also when your on the Emo page for example you click on the dropdown menu and can choose different location and get new info as well for selected location.
Hope that makes sense and hopefully someone could give me a hand.
Thanks,
Mike
OK, I'm not going to write code as it looks as though you haven't actually tried anything yourself yet.
However, the sequence of events, one version of them anyway, might look like this.
Using jQuery, put a change event on your dropdown.
When the event triggers, and this depends on your backend as you have not spcified APS.Net, MNV, Java etc, you need to post back to a code file of some sort and pass in the value within the dropdown.
From there, in your c#, java, pythod, whatever, code, take that value, generate some HTML and return that HTML to the client.
At the client, you accept the HTML and fill say a DIV with the returned HTML.
If you are using MVC, you can return a PartialView which is a better design.
I have an object, that describes an application and one property can have several values from a list. I am using JSRender and JSViews for the databinding, I'm getting pretty good with the rendering part and I still have a lot to learn on JSViews.
I have several dropdowns in my application where the correct value is selected but I don't see how I can databind with several values inside a list box.
I created a JSFiddle to demonstrate the concept but again, I have a problem, my fiddle seems to work only when I am logged in, I gave it a name, I can see it in my public fiddles but, when connected as a Guest, I can see the code but it doesn't seem to run.
Here it is: [http://jsfiddle.net/ClaudeVernier/73pyx/]
If you could help me getting this work where the listbox is in the Red rectangle with IDs 100 and 200 selected, that would help me a lot, next, if anyone could suggest a way to have the same thing but we checboxes next to each item in the list box, it would be perfect !!!!
I think it exists as a JQuery plugin but I am not sure, if anyone has experience of such plugin and making it work with JSViews... it would be a dream... :-)
Thanks for any help,
Claude
In your jsfiddle, you are using render(), not link() so in effect you are using just JsRender, not JsViews, and you won't get JsViews data-binding.
Did you see this sample: http://www.jsviews.com/#samples/tag-controls/multiselect? It shows a multiselect listbox using JsViews.
I'm working on my own custom google calendar, so far i'm able to get everything to work, i've loaded all the data and everything works great, each event shows up on a select box.
What i want to do now is to load each event name on the LIST part. How exactly can i do that? i'm very lost with it.
I looked at the sample code that dashcode has for the list part but i really am lost with populating the list in real time, can somebody help me? i can provide more info as needed, thanks!
In dashcode under library/code there is an example titled 'List Data Source'. You will also need to alter the list object datatype to dynamic and then select your datasource from the dropdown list.