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.
Related
I am new to laravel so excuse me if this is a stupid / obvious question - I will remove if so...
i have a drop down list which displays a variety of flavours for an item all sourced from the database. I have this part working fine, however what I want is when you select a flavour, this then displays below the nutritional information for that flavour and changes when you change the flavour.
This is the select in the blade:
<select name="" id="">
#foreach($flavours as $flavour)
<option>{{ $flavour['name'] }}</option>
#endforeach
</select>
Simple controller function to get data:
function show()
{
$data = Flavours::all();
return view('flavours', ['flavours' => $data]);
}
I have searched online quite alot to find methods / videos which show what I need, however I can not find anything.
There are 2 ways.
1 - you have to get new data via ajax every change select tag value.
2 - If you don't like it, you can get needed data using keyword and full list.
<select name="flavour" id="flavour">
#foreach($flavours as $flavour)
<option value="{{$flavour['id']}}" >{{ $flavour['name'] }}</option>
#endforeach
</select>
$("#flavour").change(function(){
id=$(this).val();
const flavour_list = <?php echo $flavours; ?>;
const goal = flavour_list.find(item => item.id === id);
console.log({goal})
});
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 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
I am trying to make a search form that get results from a feed based on the user's keyword and the feed source. But I have no idea how to pass the user's search term from the input box to the selected feed url in the data-source attribute. I was told that I can't just dump the js variable in the html markup. Is there no choice but to repeat the ajax function for each feed? Any help would be appreciated.
HTML markup
<select id="choosefeed">
<option value="">Select</option>
<option data-source="http://search.com?query='keyword variable'">Feed1</option>
<option data-source="http://find.com?query='keyword variable'&result=25">Feed2</option>
</select>
<input id="input_id" type="text"><button type="submit" id="keywordsubmit">Submit</button>
<div id="searcharea"></div>
JS script
$('#keywordsubmit').click(function(e){
var findsource = $('#choosefeed').find(':selected');
var source = findsource.data('source');
var keyword = $('#input_id').val();
var area = $("#searcharea");
area.empty();
$.ajax({
url: source,
success: function (data) {
................
You can simply use .replace()
var source = findsource.data('source').replace('keyword variable', $('#input_id').val());
However You can use data option of jQuery.ajax to pass value.
HTML code:
<div class="controls" id="display">
<input type="text" name="demos" class="" value="1" id="displays"/>
<select class="input-medium">
<option value="">Select</option>
<option value="1">II</option>
<option value="2">AS</option>
<option value="3">AR</option>
</select>
</div>
Jquery code:
$("input[name='demos']").each(function(i,e){
var SValue = $('#displays').val();
$('option[value=' + SValue + ']').attr('selected',true);
});
I will be displaying the above html code as dynamic one for multiple times.
I will be comparing the value of #displays with the select options and make the select option as selected.
The value in #displays comes from database.
Since, am using multiple times the above html code when I pass the different values from database to that multiple code. All the multiple code shows only the first html code selected value.
However, I want all the multiple html code to show the selected value to their respective #displays.
In debug I found that $("input[name='demos']").each(function(i,e){ is not performing correctly because when i put console for Svalue it shows only the first html code input value for all the multiple html codes.
How can I fix this??
In HTML, the ID attribute is unique. You cannot use the same ID for more than one control in the same page. So, you'll need to use another approach.
I would do something like:
$("div.controls").each(function() {
$(this).children("select").eq(0).val($(this).children("input").eq(0).val());
});
EDIT: And it works, I've just made this demo!
Try this:
$("#displays").blur(function () {
var data = $(this).val();
$("#select > option").each(function () {
if (this.value == data)
$(this).attr("selected", "selected");
});
});
This example will get the input from user then the system will select the matching value.
Here is the fiddle: http://jsfiddle.net/t6kBY/
try
$("input#displays").each(function(i,e){
});