I have to populate a select box with all avaliable Disciplines that are stored in my DB.
So, in DisciplineController I created an action like this:
def getDisciplinesJson() {
def discList = Discipline.getAll()
return discList as JSON
}
Is that the right way to get disciplines as JSON, and how do I call this action and, using Javascript for example, populate a select box, something like this:
<select id=disc-select> </select>
This select box appears in other page, Student create, for example.
There are a lot of ways. For example using JQuery
<script>
function loadDisciplines() {
$.ajax({
url: "${createLink(controller: 'DisciplineController', action: 'getDisciplinesJson')}",
success: function (data) {
//...
// Parse JSON, create select box etc..
}
});
}
</script>
And change "return discList as JSON" to "render discList as JSON"
Also you can create template with code:
<select id=disc-select>
<g:each in="${discList}" var="disc">
<option value="${disc?.id}">${disc?.name}</option>
</g:each>
</select>
And return from controller already rendered template:
render template:"pathToTemplate/thisTEmplate", model:[discList:discList]
Then in the loadDisciplines() success block you need to put only:
$('#disciplines-div').html(data);
where #disciplines-div is
<div id="disciplines-div"></div>
If you don't mind altering select to data lists then even easier is dataList HTML5 supports data lists and you can find an example here: and show here:
<input type=text list=browsers>
<datalist id=browsers>
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
If you wanted to see auto complete working with dataLists then check out boselecta. I have used it for auto completion and you can find that example here. There are some further complexity of parsing the json as data lists but it is all within that page..
I know your question is 'How to populate a select box with JSON from Grails Controller' but looking at your example. Why do you need to populate it with JSON?
In this case a <g:select> tag could be a simpler approach.
<g:select id="disc-select" from="${my.package.Discipline.list()}" name="myparam"/>
This is assuming that you´re using GSPs
Related
I am using Django Model field values inside a Javascript file by using the following code:
var action_type =$('#id_strength').val();
Here strength is a Charfield.
But the same doesn't work for a ManytoMany Field
var action_type =$('#id_batches').val();
Batches:
When I viewed the source code, the HTML looks like this:
<div class="related-widget-wrapper">
<select name="batches" data-field-name="batches" multiple="multiple" id="id_batches" data-is-stacked="0" class="selectfilter">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
So I did some digging and was finally able to get the JQuery to access the field. Since it is a ManytoMany select field, I just had to treat the batches as a select field.
var action_type = []
$("#id_batches").each(function(name,val) {
action_type.push(val.value);
});
Thanks Daniel Roseman for pointing me to right direction
I am new to Laravel.
I need to populate one select control based on the previous select option that a user selects.
Here is my blade/html(first select is hard coded for now, but the values are what will come from database)
<select id="company_type" name="company_type"class="form-control">
<option value="2">Dealer</option>
<option value="3">Customer</option>
<option value="4">Partner</option>
</select>
<select id="organization_type_id" name="organization_type_id"class="form-control">
#foreach($belongsto as $org)
<option>{{ $org }}</option>
#endforeach
</select>
Here is my javascript
$('#company_type').on('change', function(e){
console.log(e);
var company_type = e.target.value;
$.get("{{ url('dashboard/addOrganization') }}?company_type=" + company_type, function(data) {
console.log(data);
$('#organization_type_id').empty();
$.each(data, function(index,subCatObj){
$('#organization_type_id').append('subCatObj.name');
});
});
});
Here is my Controller (This code is part of a function call that I making within the controller I would be returning a view once I get the data I need)
$companyType = '3';// Input::get('comapny_type');
$orgs = Organization::where('organization_type_id','=',$companyType)->get();
return $orgs;
In my controller, I have hard coded an option that I expect to get from Input::get('company_type') However, the Input call returns null.
The parameters are not showing up in my URL so I am assuming that is the reason it is not working. However, I am not sure how to append ?company_type=3 to the URL, if that is how its supposed to be.
I have a select element as shown below.I am passing the value of the selected option to a PHP page as a variable with javascript as shown below :
<script>
var area1=document.getElementById("area").value;
$("#list").load("selectcity.php?city1="+city1+"&area1="+area1);
<script>
<select id="areas" name="areas">
<option value="Queens Town">Queens Town</option>
<option value="QueensTown">QueensTown</option>
</select>
Now the thing is , In the PHP page I am able to echo $_GET['area1']; when QueensTown is selected but whenever I am trying to pass Queens Town ,its now working.Can anybody help.
You have to escape the values properly, otherwise you would end up with a URL like this:
selectcity.php?city1=xyz&area1=Queens Town
Which is unlikely to work the way you want. Use this instead:
var data = {
city1: city1,
area1: $('#areas').val()
};
$('#list').load('selectcity.php?' + $.param(data));
See also: jQuery.param()
I'm attempting to create a dynamic drop down list, but after searching for hours I'm still completely stumped as to how to do it. So I am experimenting with variables in a list. This is the code I've started with.
<body>
<form method = "post">
<select id = "State" onchange = "a = this.options[selectedIndex].value;">
<option value = ""> Select a state</option>
<option value = "S3"> Pennsylvania</option>
<option value = "S4"> California</option>
<option value = "I4"> Texas</option>
<option value = "I5"> New York</option>
</select>
</form>
</body>
my question is what can I do with the variable 'a' so that I could create a dynamic drop down list based off it? One thing I had hoped to do was use an if-statement to display a second list. I wanted to remain on the same page too.
Note: I apologize if this seems like a basic question, but I've been scouring websites for answers and all I've figured out was that I can't send javascript variables to php, otherwise I'd have gotten this done forever ago
try this way
<select id="appamt" name="appamt">
<? while($amt=mysql_fetch_array($amount)){ ?>
<option value="<?=$amt['amount']?>"><?=$amt['amount']?></option>
<? } ?></select>
When your page detects the onchange event, what you need to do is either have all the combinations of options you want readily available but hidden on the page e.g. $('#sub-option1).hide(); and when the value is selected use $('#sub-option1).show();
Secondly you can have a ajax request that returns a JSON value of key=>value pairs, then use these key value pairs to dynamically build another dropdown using jquery .each() function.
Loop through your json values and add them to a previously hidden selector and then display it.
Hope this helps but if not email me and I will skype you through it.
Jim C
I have a html form
Inside of this form in select option i have called one java script function like
<form>
<SELECT NAME="sel" onChange="split('1')">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
function split(str)
{
var str=str+str;
return str;
}
Now i need to get these return value on inside of the form for example in another select
<SELECT NAME="sel123" >
<OPTION VALUE="str">Milk</option>
</SELECT>
can anyone help me?
HTML can't do anything with variables. It isn't a programming language.
You aren't very specific about what you want to do, but it will probably involve writing JS to perform DOM manipulation.
You can have a place where you can display the value. For example.
function split(str)
{
var str=str+str;
$('classoridofelementhere').html(str);
}
EDIT
Here is an example on how to move option from one list to another: http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/
Remember to download and put a reference to jQuery library.