is that possible i get part of my selected option in javascript? - javascript

I have this code in my javascript:
$('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="'+ value3['value'] +'">'+ value['code'] + ' - ' + value2['service'] + ' - ' + nf.format(number) + ' Rp' + ' - ' + value3['etd'] +'</option>');
I need value['code'] and value2['service'] in hidden inputs so i can save them in my DB, is that possible?
update
<script>
jQuery( document ).ready( function( $ ) {
$('body').on('change', 'select[name="city"]', function(e){
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
var cityID = $(this).val();
var weight = ["{{$totalWeight}}"];
if(cityID) {
$.ajax({
url: '{{ url('rajaajax') }}/'+weight+'/'+encodeURI(cityID),
type: "GET",
dataType: "json",
success:function(data) {
$('#des').empty();
$('#des').append(
'<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] +'</p>'
);
$.each(data.data, function(key, value) {
$.each(value.costs, function(key2, value2) {
$.each(value2.cost, function(key3, value3) {
// number format
var number = value3['value'];
var nf = new Intl.NumberFormat('en-US', {
maximumFractionDigits:0,
minimumFractionDigits:0
});
var formattedNumber = nf.format(number);
// number format
$('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="'+ value3['value'] +'">'+ value['code'] + ' - ' + value2['service'] + ' - ' + nf.format(number) + ' Rp' + ' - ' + value3['etd'] +'</option>');
// console.log(value);
// alert(value.code); // jne-pos
// alert(value2.service); //oke -reg
// alert(value3.value); // 43000 - etd 24 jam
});
});
});
}
});
}else{
$('select[name="postchoose"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>
html
<div id="des"></div>
<div id="calcul" class="mb-20 mt-20">
<select name="postchoose" id="">
<option class="form-control" value="">Select Shiping Method</option>
</select>
<div id="courierinfo"></div> // i want my hidden input in this div
</div>
update 2
here is what i added to my ajax code and returning the result i want, but the problem is it return results like 30 times instead of only once:
$('select[name="postchoose"]').on('change',function(){
var selected = $(this).find('option:selected');
var code = selected.data('code');
var service = selected.data('service');
$('div#courierinfo').append('<input type="hidden" value="'+code+'" name="courier" > <input type="hidden" value="'+service+'" name="courier_service" >');
});

Hope this helps.
$('select[name="postchoose"]').append('<option id="postchoose"
class="form-control" value="'+ value3['value'] +'"
code="'+value['code']+'" service="'+value2['service']+'">'+
value['code'] + ' - ' + value2['service'] + ' - ' + nf.format(number)
+' Rp' + ' - ' + value3['etd'] +'</option>');
var code=$('select[name="postchoose"] option:selected').attr('code');
var service=$('select[name="postchoose"]
option:selected').attr('service');

You can add to data attribute of option
<div id="des"></div>
<div id="calcul" class="mb-20 mt-20">
<select name="postchoose" id="" onchange="addInputHidden(this)">
<option class="form-control" value="">Select Shiping Method</option>
</select>
<div id="courierinfo">
<!--i want my hidden input in this div-->
</div>
</div>
<script >
function addInputHidden(element) {
var $option = $(element).find('option:selected'),
code = $option.data('code'),
service = $option.data('service');
if (!jQuery('#courierinfo .code_' + code).length) {
jQuery('#courierinfo').append('<input class="code code_' + code + '" name="code[]" type="hidden" value="' + code + '"><input class="service code_' + code + '" name="service[]" type="hidden" value="' + service + '">');
} else {
jQuery('#courierinfo .code.code_' + code).val(code)
jQuery('#courierinfo .service.code_' + code).val(service)
}
}
jQuery(document).ready(function ($) {
$('body').on('change', 'select[name="city"]', function (e) {
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')}
});
var cityID = $(this).val();
var weight = ["{{$totalWeight}}"];
if (cityID) {
$.ajax({
url: '{{ url('rajaajax') }}/' + weight + '/' + encodeURI(cityID),
type: "GET",
dataType: "json",
success: function (data) {
$('#des').empty();
$('#des').append(
'<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] + '</p>'
);
$.each(data.data, function (key, value) {
$.each(value.costs, function (key2, value2) {
$.each(value2.cost, function (key3, value3) {
// number format
var number = value3['value'];
var nf = new Intl.NumberFormat('en-US', {
maximumFractionDigits: 0,
minimumFractionDigits: 0
});
var formattedNumber = nf.format(number);
// number format
$('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="' + value3['value'] + '" data-code="' + value['code'] + '" data-code="' + value2['service'] + '">' + value['code'] + ' - ' + value2['service'] + ' - ' + nf.format(number) + ' Rp' + ' - ' + value3['etd'] + '</option>');
// console.log(value);
// alert(value.code); // jne-pos
// alert(value2.service); //oke -reg
// alert(value3.value); // 43000 - etd 24 jam
});
});
});
}
});
} else {
$('select[name="postchoose"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>
$('select[name="postchoose"]').on('change',function(){
var $option = $(this).find('option:selected),
code = $option.data('code'),
service = $option.data('service');
// you can use ajax to send
})

SOLVED
I added code below at the bottom of my ajax and it's working without looping results many times.
// show selected shipping information
$('select[name="postchoose"]').on('change',function(){
var selected = $(this).find('option:selected');
var code = selected.data('code');
var service = selected.data('service');
$('div#courierinfo').empty();
$('div#courierinfo').append('Shipping: <span name="courier">'+code+'</span> - <span name="courier_service">'+service+'</span><br><input type="hidden" name="courier" value="'+code+'"><input type="hidden" name="courier_service" value="'+service+'">');
});
Thanks to Bai Nguyen for the idea.

Related

Getting Tippy Nested ToolTip Displayed

I've been trying to get Tippy.js' nested tooltip feature working but haven't had luck so far.
the following lines are placed outside jQuery's Document ready function:
tippy.setDefaultProps({
appendTo: function () {
return document.querySelector('.responseBody')
}
})
popperOptions: { strategy: 'fixed' };
tippy.delegate('.responseBody', {
target: '.tooltip'
});
the tooltip content is being added dynamically based on an extract from ajax response and the ajax function is the following:
function _loadLaunchPad(iSMHost, iSMPort, urlExtension) {
var _serverName = $('#serverName option:selected').text();
var _addOnSelect = $('#addOnSelect option:selected').text();
var _consoleCmdExprValue = $('#consoleCmdExprValue').val();
var dataString = '{ "serverSelection" : "' + _serverName + '", "operationSelection" : "' + _addOnSelect + '", "commandSelection" : "' + _consoleCmdExprValue + '"}';
var stringToSend = " <img class='preLoader' src='images/preloader.gif' title = 'Processing request'/>";
const _toolTipContentHeader = ' <div>' +
' <strong>Server Name    <span class="tooltip" data-title="<strong>hey</strong>" style="color: aqua">%HDRITEM0%</span></strong><br />' +
' <strong>Server IP Address    <span style="color: aqua">%HDRITEM1%</span></strong><br />' +
' <strong>Server #Processors    <span style="color: aqua">%HDRITEM2%</span></strong><br />' +
' <strong>Version    <span style="color: aqua">%HDRITEM3_1%</span></strong><br />' +
' <strong>Build Ref    <span style="color: aqua">%HDRITEM3_2%</span></strong><br />' +
// ' <strong>Build Date    <span style="color: aqua">%HDRITEM3_3%</span></strong><br />' +
' <strong>Configs Count    <span style="color: aqua">%HDRITEM4%</span></strong><br />' +
' <strong>Master Config    <span style="color: aqua">%HDRITEM5%</span></strong><br />' +
' </div>';
const _toolTipContentLine = ' <div>' +
' <strong>Server Name    <span style="color: aqua">%LNITEM0%</span></strong><br />' +
' <strong>Config Process ID    <span style="color: aqua">%LNITEM1%</span></strong><br />' +
' <strong>Config Status    <span style="color: aqua">%LNITEM2%</span></strong><br />' +
' <strong>Config Java Version    <span style="color: aqua">%LNITEM3%</span></strong><br />' +
' <strong>Version    <span style="color: aqua">%LNITEM4_1%</span></strong><br />' +
' <strong>Build Ref    <span style="color: aqua">%LNITEM4_2%</span></strong><br />' +
// ' <strong>Build Date    <span style="color: aqua">%LNITEM4_3%</span></strong><br />' +
' <strong>iBSE Port (If Enabled)    <span style="color: aqua">%LNITEM5%</span></strong><br />' +
' <strong>Master Config    <span style="color: aqua">%LNITEM6%</span></strong><br />' +
' <strong>Registry    <span style="color: aqua">Here</span></strong><br />' +
' <strong>Blue    <span style="color: aqua">Here</span></strong><br />' +
' <strong>Runtime    <span style="color: aqua">Here</span></strong><br />' +
' </div>';
$.ajax({
type: "POST",
url: `http://${iSMHost}:${iSMPort}/${urlExtension}`,
data: dataString,
timeout: 60000 * 30, //60000 milliseconds * 30 = 30 minutes
async: true,
contentType: "application/json",
cache: false,
beforeSend: function () {
$(".terminal .top").addClass('color-change-5x');
$('.terminal .responseBody').html("");
},
success: function (result) {
if (_addOnSelect == 'ConfigsList') {
var h1 = $('<h1 class="responseTitleText">Launch Pad</h1>')
var tabDiv = $('<div id="tabsID"></div>')
var prodTab = $('<div class="tab-container" data-tab-index="0"></div>');
var testTab = $('<div class="tab-container" data-tab-index="1" style="display:none;"></div>');
$('.terminal .responseBody').append(h1);
$('.terminal .responseBody').append(prodTab);
$('.terminal .responseBody').append(testTab);
for (var i = 0; i < result.length; ++i) {
var div = $('<div>'), ulForTest = $('<ul>'), ulForProd = $('<ul>');
var _tempHeaderItem = result[i];
var _tempInstanceFlag = (_tempHeaderItem.host).split(':')[1];
var _tempHostEnvironment = (_tempHeaderItem.host).split(':')[0]
_tempHostEnvironment = ((/p.me.com$/).test(_tempHostEnvironment)) ? 'Prod' : 'Test';
var replacementsForHDR = {
"%HDRITEM0%": _nvl(_tempHeaderItem.host.replace('.me.com', '')),
"%HDRITEM1%": _nvl(_tempHeaderItem.serverIP),
"%HDRITEM2%": _nvl(_tempHeaderItem.processorsCount),
"%HDRITEM3_1%": _nvl(_tempHeaderItem.configs[0].Version),
"%HDRITEM3_2%": _nvl(_tempHeaderItem.configs[0].Build),
// "%HDRITEM3_3%": _nvl(_tempHeaderItem.configs[0].BuildDate),
"%HDRITEM4%": _nvl(('Active: ' + _tempHeaderItem.activeConfigsCount + '/ Inactive: ' + _tempHeaderItem.inActiveConfigsCount)),
"%HDRITEM5%": _nvl(_tempHeaderItem.master)
};
var _toolTipContentHeaderInstance = _toolTipContentHeader.replace(/%\w+%/g, function (all) {
return replacementsForHDR[all] || all;
});
_tempInstanceFlag = (_tempInstanceFlag == '19') ? '1st' : (_tempInstanceFlag == '29') ? '2nd' : (_tempInstanceFlag == '39') ? '3rd' : (_tempInstanceFlag == '49') ? '4th' : '1st?';
if(_tempHostEnvironment == 'Prod'){
ulForProd.append("<li class='tooltip' data-title='" + _toolTipContentHeaderInstance + "'>" + ((_tempHeaderItem.host).split('.')[0]).replace(".me.com", "") + " " + _tempInstanceFlag + "</li>")
}else{
ulForTest.append("<li class='tooltip' data-title='" + _toolTipContentHeaderInstance + "'>" + ((_tempHeaderItem.host).split('.')[0]).replace(".me.com", "") + " " + _tempInstanceFlag + "</li>")
}
for (var j = 0; j < _tempHeaderItem.configs.length; ++j) {
var _tempLineItem = _tempHeaderItem.configs[j];
var replacementsForLN = {
"%LNITEM0%": _nvl(_tempHeaderItem.host.replace('.me.com', '')),
"%LNITEM1%": _nvl(_tempLineItem.processID),
"%LNITEM2%": _nvl(_tempLineItem.status),
"%LNITEM3%": _nvl(_tempLineItem.javaVersion),
"%LNITEM4_1%": _nvl(_tempLineItem.Version),
"%LNITEM4_2%": _nvl(_tempLineItem.Build),
// "%LNITEM4_3%": _nvl(_tempLineItem.BuildDate),
"%LNITEM5%": _nvl(((_tempLineItem.ibsePort.length > 0) ? _tempLineItem.ibsePort : 'NA')),
"%LNITEM6%": _nvl(_tempHeaderItem.master),
"%LNITEM7%": _nvl('http://' + _tempHeaderItem.host + '/' + _tempLineItem.config + '&filter=on'),
"%LNITEM8%": _nvl('http://' + _tempHeaderItem.host + '/yes?configuration=' + _tempLineItem.config),
"%LNITEM9%": _nvl('http://' + _tempHeaderItem.host + '/yes?configuration%7D_' + _tempLineItem.config)
};
var _toolTipContentLineInstance = _toolTipContentLine.replace(/%\w+%/g, function (all) {
return replacementsForLN[all] || all;
});
if(_tempHostEnvironment == 'Prod'){
div.append(ulForProd.append("<li class='tooltip' data-title='" + _toolTipContentLineInstance + "'>" + _tempLineItem.config + "</li>"));
$('#tabLink').show();
$('.terminal .responseBody .tab-container[data-tab-index=0]').append(div.addClass('tracking-in-expand-fwd'));
}else{
div.append(ulForTest.append("<li class='tooltip' data-title='" + _toolTipContentLineInstance + "'>" + _tempLineItem.config + "</li>"));
$('#tabLink').show();
$('.terminal .responseBody .tab-container[data-tab-index=1]').append(div.addClass('tracking-in-expand-fwd'));
}
}
}
}
tippy('.tooltip', {
theme: 'custom',
content: function (reference) {
const htmlContent = reference.getAttribute('data-title');
return htmlContent;
},
interactive: true,
allowHTML: true,
multiple: true
});
popperOptions: { strategy: 'fixed' };
},
error: function (x, t, m) {
$('.terminal .responseBody').html("<p class='error fade-in-fwd'>Something went wrong at the server. Thats all I know! :-(</p>");
},
complete: function (x, t, m) {
$('.terminal .title').html('response pane');
$(".terminal .top").removeClass('color-change-5x');
}
});
return false;
}
the relevant CSS styling info
.tippy-box[data-theme~="custom"] span {
float: right;
}
.tippy-box[data-theme~="custom"] {
width: max-content;
}
Owing to the complexity of the application, I couldn't create a repro on a fiddle/etc. The first tooltip gets displayed well, while the nested does not get displayed.
result:
Any help would be much appreciated.
If the nested tooltip is invoked using data-tippy-content with html, the value gets displayed but the HTML gets displayed raw, meaning, HTML tags appear as-is.

How can i give the input fields here?

I just created ajax response but i dont know how to give input fields here.. im new bie to Ajax, can you suggest any way please..
$.ajax({
type: "GET",
url: 'get/' + vouchno,
// cache: false,
success: function(data) {
alert(data);
alert(JSON.stringify(data));
$('#vochDate').val(data.strvouchdt);
$('#cashbill').val(data.billtype);
$('#cashref').val(data.refno);
$('#cashAc').val(data.acctname);
$('#refdate').val(data.refdt);
$('#payacc_code').val(data.acctcode);
$('#cashAc').val(data.acctname);
$('#cashAc').val(data.acctname);
for (var i = 0; i < data.cashpayments.length; i++) {
$("#tab_logic ").append('<tr><td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].debit + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' + '</tr>');
}
},
failure: function(data) {
alert(data.responseText);
},
error: function(data) {
alert(data.responseText);
}
});
Completely a guess, you want text-fields in row columns with values prefilled in it:
$("#tab_logic").append(`<tr><td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].debit}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td></tr>`);
If you are talking about binding the data into input form from the response:
function populate(data) {
for (var i in data) {
if (typeof (data[i]) === 'object') {
//populate(data[i]);
} else {
$(
"input[type='text'][name='" + i + "']," +
" input[type='hidden'][name='" + i + "'], " +
"input[type='checkbox'][name='" + i + "'], " +
"select[name='" + i + "'], textarea[name='" + i + "']"
)
.val(data[i]);
$("input[type='radio'][name='" + i + "'][value='" + data[i] + "']").prop('checked', true);
if ($("input[name='" + i + "']").hasClass('datepicker')) {
$("input[name='" + i + "']").val($.datepicker.formatDate("dd-M-yy", new Date(data[i])));
}
if ($("input[name='" + i + "']").hasClass('financialValueFormat')) {
var formatedAmount = financialValFormat(data[i]);
$("input[name='" + i + "']").val(formatedAmount);
}
}
}
$('form').find('input[type="checkbox"]').each(
function () {
if ($(this).siblings('input[type="hidden"]').val() == "true" ||
$(this).siblings('input[type="hidden"]').val() == 1) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
}
);
}
You can define this function some where in your project which is available globally and then just call populate(response.data)
Please ignore the functions financialValFormat. This function is just used to format the value for money fields.

how to trigger dropdown change event manually ? when I am selecting data from Modal?

I have a dropdown list which is getting Accountoff data from database through ajax. Now I am selecting data from modal and giving the val to the dropdown list and triggering it change method manually. But its not working.
This is the code where I am giving the selected data from modal to dropdown list.
AccountOf = function (value) {
var lblBrandCode = $(value).closest('tr').find("#hdnCusCode").val();
var lblCusDesc = $(value).closest('tr').find('#lblCusDesc').val();
$("#AccountOfModal").modal("hide");
$("#ddlACof").val(lblBrandCode);
//document.getElementById("ddlACof").value = lblBrandCode;
$("#ddlACof").change();
}
here is the the code that invoke the above method.
$.ajax({
dataType: "json",
async: true,
type: 'GET',
url: '#Url.Content("~/BookingOrder/Select_CustomerDetailModal")',
success: function (data) {
if (data.Success == true) {
var item = JSON.parse(data.Response)
$("#AccountOfTable tbody tr").remove()
if (item.length > 0) {
$.each(item, function (value, item) {
var temp = '<tr id="DelChkListRow1' + (rowCount++) + '" data-tr-count="' + (dataCount++) + '" onclick="AccountOf(this)">' +
'<td>' + SNo++ + '</td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusCode" >' + item.CusCode + '</label><input type="hidden" id="hdnCusCode" value="' + item.CusCode + '"/></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusDesc">' + item.CusDesc + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblNIC">' + item.NIC + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblAddress">' + item.Address1 + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblPhone">' + item.Phone1 + '</label></td>' +
'</tr>';
$("#AccountOfTable tbody").append(temp);
});
}
}
},
complete: function () {
},
});
$( "#ddlACof" ).trigger( "change" );

Clean old results while new option chosen in JavaScript

I get some data by json, and there is small issue.
When I choose some data it returns result to me, but when I choose another data it keeps old result and add new result into it. What I want is to clear old results on new selected data.
Preview of my issue
My JavaScript code:
<script>
jQuery( document ).ready( function( $ ) {
$('body').on('change', 'select[name="city"]', function(e){
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
var cityID = $(this).val();
if(cityID) {
$.ajax({
url: '{{ url('rajaajax') }}/'+encodeURI(cityID),
type: "GET",
dataType: "json",
success:function(data) {
$('#des').append(
'<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] +'</p>'
);
$.each(data.data, function(key, value) {
console.log();
$('#info').append('<h3>'+ value['code'] + '<small>' + value['name'] +'</small></h3>');
$.each(value.costs, function(key2, value2) {
$.each(value2.cost, function(key3, value3) {
$('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="'+ value3['value'] +'">'+ value2['service'] + ' - ' + value3['value'] + ' - ' + value3['etd'] +'</option>');
});
});
});
}
});
}else{
console.log(data);
}
});
});
</script>
My HTML Code:
<div id="calcul" style="margin-top: 30px;">
<div id="des"></div>
<dev id="info"></dev>
<select name="postchoose" id="">
<option class="form-control" value="">Select Shiping Method</option>
</select>
</div>
user .empty() method before appending the new data,
<script>
jQuery( document ).ready( function( $ ) {
$('body').on('change', 'select[name="city"]', function(e){
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
var cityID = $(this).val();
if(cityID) {
$.ajax({
url: '{{ url('rajaajax') }}/'+encodeURI(cityID),
type: "GET",
dataType: "json",
success:function(data) {
$('#des').empty();
$('#des').append(
'<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] +'</p>'
);
$.each(data.data, function(key, value) {
$('#info').empty();
$('select[name="postchoose"]').empty();
$('#info').append('<h3>'+ value['code'] + '<small>' + value['name'] +'</small></h3>');
$.each(value.costs, function(key2, value2) {
$.each(value2.cost, function(key3, value3) {
$('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="'+ value3['value'] +'">'+ value2['service'] + ' - ' + value3['value'] + ' - ' + value3['etd'] +'</option>');
});
});
});
}
});
}else{
console.log(data);
}
});
});
</script>

jQuery on(change) doesn't work second time

I have cascading dropdown menus as below. I am listing selections dynamically on second and third dropdowns. While the first on change function works without problem (i am getting project list), the second on change ( $("#pro").on('change', function(e) ) simply doesn't sense any change on selection of projects. Chrome console shows no problem. What can be the problem?
<div class="form-group">
<label for="projectfamily">Proje Grubu</label>
<select class="form-control" name="projectfamily" id="projectfam">
<option value="">Seçiniz</option>
#foreach($projectfamilies as $projectfamily)
<option value= "{{$projectfamily->id}}">{{$projectfamily->projectfamily}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="project">Proje Adı</label>
<select class="form-control" name="project" id="pro">
<option value= "" disabled></option>
</select>
</div>
<div class="form-group">
<label for="version">Versiyon</label>
<select class="form-control" name="version" id="version">
<option value="" disabled></option>
</select>
</div>
JQuery
$('#projectfam').on('change', function(e) {
var projectfam = e.target.value;
$.get('/ajax_projectfamily_post?projectfam=' + projectfam, function(data){
$('#pro').empty();
$('#version').empty();
$('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger){
$('#pro').append('<option value="' + deger.id + '">' + deger.project + '</option>');
});
});
});
$("#pro").on('change', function(e) {
var project = e.target.value;
$.get('/ajax_project_post?project=' + project, function(data){
$('#version').empty();
$('#version').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger) {
$('#version').append('<option value="' + deger.id + '">' + deger.version + '</option>');
});
});
});
It appears to work as expected in chrome. See this fiddle with the ajax calls replaced. Is it a problem with the ajax call? Or perhaps an html syntax error? Check the validity of your entire HTML page. Since you only posted a fragment I can't diagnose further.
$('#projectfam').on('change', function(e) {
var projectfam = e.target.value;
var data = ['a', 'b', 'c'];
$('#pro').empty();
$('#version').empty();
$('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger){
$('#pro').append('<option value="' + data[i] + '">' + data[i] + '</option>');
});
});
$("#pro").on('change', function(e) {
var project = e.target.value;
var data = ['x', 'y', 'z'];
$('#version').empty();
$('#version').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger) {
$('#version').append('<option value="' + data[i] + '">' + data[i] + '</option>');
});
});
I would do it like this, I had a similar problem before, the onchange events need to be assigned after the elements are loaded:
$('#projectfam').on('change', function(e) {
var projectfam = e.target.value;
$.get('/ajax_projectfamily_post?projectfam=' + projectfam, function(data){
$('#pro').empty();
$('#version').empty();
$('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger){
$('#pro').append('<option value="' + deger.id + '">' + deger.project + '</option>');
});
addOnChangeThingy(); // load onclick functions
});
});
function addOnChangeThingy(){
$("#pro").on('change', function(e) {
var project = e.target.value;
$.get('/ajax_project_post?project=' + project, function(data){
$('#version').empty();
$('#version').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger) {
$('#version').append('<option value="' + deger.id + '">' + deger.version + '</option>');
});
});
});
}

Categories

Resources