We Keep Coding

Add database default value to dropdown list using jQuery AJAX

I'm working with CRUD operation using jQuery AJAX and bootstrap modal in laravel. But the problem is when I want to edit something. I can't populate my dropdown list after an AJAX success request. How can I set database default value in my edit modal Dropdown List?
My Code:
$(document).ready(function() {
$('.acedit').click(function() {
$('#form')[0].reset();
$('#modal_form').modal('show'); // show bootstrap modal
var id = $(this).data('id');
$.ajax({
url: "{{route('academic.edit')}}",
method: 'post',
data: {
id: id,
'_token': "{{csrf_token()}}"
},
success: function(data) {
//$('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");
$('.degree').val(data.degree).attr('selected', true);
$('.divison').val(data.division);
$('.year').val(data.year);
console.log(data); //{id: 2, user_id: 5, degree: "ssc", division: "First", year: "2009", …}
}
});
});
});
My Controller Method:
public function acadedit(Request $request){
$id=$request->id;
$info=Academic::find($id);
return $info;
}
My edit modal Dropdown list:
<select class="form-control degree">
<option value="">-Select Degree-</option>
<option value="SSC">SSC</option>
<option value="HSC">HSC</option>
<option value="BBA">BBA</option>
<option value="MBA">MBA</option>
</select>

There is no selected attribute on the <select> element, it's only for the <option>s. However, you don't really need it, because setting the value of the <select> element is enough to change the selection. But you need to match the value exactly with the proper letter casing, so all capital letters in your case.
Change this:
$('.degree').val(data.degree).attr('selected',true);
To:
$('.degree').val(data.degree.toUpperCase());
If you really prefer to do it with the attribute on the <option> instead of the value of the <select>, then you need to add the <option> to the jQuery selector like this:
$('.degree option[value=' + data.degree.toUpperCase() + ']').attr('selected', true);
Demo:
$('.degree option[value=SSC]').attr('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control degree">
<option value="">-Select Degree-</option>
<option value="SSC">SSC</option>
<option value="HSC">HSC</option>
<option value="BBA">BBA</option>
<option value="MBA">MBA</option>
</select>

If you want to use response data from your Controller by Ajax, then it better to return it in Json format:
Use return response()->json($info); instead of return $info;
As I can see from your console.log output you receive degree: "ssc", whereas
your select option is SSC, so you need to uppercase the data before use it: $('.degree').val(data.degree.toUpperCase()); or to downcase values of select options: <option value="ss">SSC</option>.

Select box options not getting selected by jquery with ajax response data

I have an update form in which the data is pre-populated by an ajax call. All the data is getting populated well except the select box. Im using jquery to populate data.
My select code:
<div class="test " id="test">
<select id="gender2" name="gender2" class="required">
<!-- <option value="" selected></option> -->
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</div>
Ajax call:
$.ajax({
type: "POST",
url: 'fetchData',
data: {
'custId': custID,
},
success: function (paxUpdateData) {
var cust = jQuery.parseJSON(paxUpdateData);
$("#firstName").val(cust.firstName);
$("#middleName").val(cust.middleName);
$("#gender2").val(cust.gender);
},
error: function (e) {
alertify.error('Error in retreiving details');
}
});
I have tried these but none worked:
$('gender2 option[value='+cust.gender+']').attr('selected', 'selected');
$('#gender2 option[value='+cust.gender+']').prop('selected', true);
$("div.test select").val(cust.gender);
Note: im getting data from backed as cust.gender=M for male and cust.gender=F for female.

Try
$('#gender2').change(function() {var selectvalue =$('#aioConceptName').find(":selected").val(cust.gender);});

$("#gender2").change(function() {
//your ajax
});
Try this

When it comes to select box it requires change() event,
$.ajax({
type: "POST",
url: 'fetchData',
data: {
'custId': custID,
},
success: function (paxUpdateData) {
var cust = jQuery.parseJSON(paxUpdateData);
$("#firstName").val(cust.firstName).trigger('change');
$("#middleName").val(cust.middleName).trigger('change');
$("#gender2").val(cust.gender).trigger('change');
},
error: function (e) {
alertify.error('Error in retreiving details');
}
});

See This Demo is working , now u can put your ajax function inside document ready function , and please check in ajax Response console.log() value is same as your select option value.
$(document).ready(function(){
$('#gender2').val("O");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test " id="test">
<select id="gender2" name="gender2" class="required">
<option value="F">Female</option>
<option value="M">Male</option>
<option value="O">Other</option>
</select>
</div>

Confused in slim framework and javascript ajax combination

I'm traying to make an ajax action in my project which is developed by Userfrosting system (A system that uses slim framework and twig).
There are 2 html select tags in sections.php called country and city.
When country is chosen, cities in that country will ve selected from the
database and will be shown in city tag with an ajax action.
I can do this with a normal php script, but can't do it in slim.
sections.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".country").change(function() {
var veri = $(this).val();
var dataString = 'veri=' + veri;
$.ajax({
type: "POST",
url: "deneme.php",
data: dataString,
cache: false,
success: function(html) {
$(".city").html(html);
}
});
});
});
</script>
<label>Country :</label>
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<option value="1">India</option>
<option value="2">United States</option>
<option value="3">United Kingdom</option>
</select>
<br/>
<br/>
<label>City :</label>
<select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
Posted value 'veri' will be taken by deneme.php and cities in that country will be fetched from database and all the cities will be listed in options.
deneme.php
require_once("../userfrosting/config-userfrosting.php");
require_once "../userfrosting/models/mysql/MySqlSiteSettings.php";
$veri = $app->request->post('veri');
if (isset($veri)) {
while ($data = $app->site->getCities($veri)) {
$cities = $data[city];
echo '<option value="'.$cities.
'">'.$cities.
'</option>';
}
When i choose the country, city option becomes empty and i get this error in error log;
"PHP Fatal error: Call to a member function getAktiviteler() on a
non-object in C:\xampp\htdocs\userfrosting\public\deneme.php on line
119"
I used many diffent ways but couldn't solve the problem.
Please help !

As alexw said, i went through UserFrosting and Slim tutorials and restructured my code. There was problem in fetching data from database and also in javascript part. Now my problem is solved. Thanks Alex.

jQuery & Ajax - Load items to a select input when page loads

I have 2 <select> inputs:
<select id="state">
<option value="" selected>Select</option>
<option value="california">California</option>
<option value="new-york">New York</option>
</select>
<select id="city">
<option value="">Select</option>
</select>
And the jQuery/AJAX code:
$('#state').change(function() {
var id=$(this).val();
var dataString = 'state='+id;
$.ajax({
type: 'POST',
url: scriptpath+'../ajax/fields.php',
data: dataString,
cache: false,
success: function(output) {
$('#city').html(null);
$('#city').append(output);
},
});
});
Explanation: Everything works fine. The #city input changes depending on the #state input value... Now if I load the page having "california" as the default value -- the #city input doesn't change since it's using the .change() event. How do I detect the selected value on the #state input when the page loads?
I've tried $('#state').on("change load",function() { without success.
Any ideas? Thanks in advance

Just trigger the change event when first page loads:
$('#state').change(function() {
//your code...
}).change();//trigger on page load

Set value of Select option in Javascript

Is there any function to set value of a <select> tag option? I have an ajax response array and I want to put this array in a <select> tag.
This is my code :
$.ajax({
type: "GET",
url: "http://.......api/1/AbsenceType",
dataType: "json",
success: function (data) {
// It doesn't work
var ind = document.getElementById('mySelect').selectedIndex;
document.getElementById('mySelect').options.value="2";//
}
})
And my select tag is :
<select id=mySelect name="mySelect" required="required" data-mini ="true" onchange="myFunction3();"/>
<option id ="type" value=""></option>
</select>

I have an ajax response array and I want to put this array in a tag.
Why don't you just add the options from the array to the select, then set the selected value, like this :
Start with an empty select :
<select id="mySelect" name="mySelect">
</select>
Then use this function as a callback :
var callback = function (data) {
// Get select
var select = document.getElementById('mySelect');
// Add options
for (var i in data) {
$(select).append('<option value=' + data[i] + '>' + data[i] + '</option>');
}
// Set selected value
$(select).val(data[1]);
}
Demo :
http://jsfiddle.net/M52R9/
See :
Adding options to a select using Jquery/javascript
Set selected option of select box.

try this...
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>`
</select>
$("select").val("3");
visit live demo here: http://jsfiddle.net/y4B68/
thank you

Are you looking for something like that -
DEMO
You can add option like this -
$(function(){
$("#mySelect").html('<option value="2">2</option>');
});
Sorry i just missed that you are doing it in ajax callback. i have also updated in my demo.
you can also this too-
document.getElementById("mySelect").innerHTML = '<option value="2">2</option>';
Why don't you add new option instead of adding a value in option.