在函数内执行 jquery ajax 调用的问题？

Question

i have following code for Jquery Cange Event

$("input[name=evnt_typ]").change(function(){
    var request = $.ajax({
                            method: "POST",
                            url: "ajaxRequest.php",
                            dataType: "json",
                            data: {fn: 'getCompanyMaster'},
                        });

                        request.done(function (reqResult){

                            $('.dynmic_cotnt').html('');
                            $('.panel-footer').hide();

                            var append_string = '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">'+
                            '<div class="row form-group">'+
                                '<label class="control-label col-lg-3">Select'+ ' Company</label><span class="col-lg-1 hidden-xs">:</span>'+
                                '<div class="col-lg-8">'+ 
                                    '<select class="chosen" name="company_master" style="width:400px;" onChange="getCompanyEvent(this)">'+
                                        '<option>Select</option>';
                                    $.each(reqResult.result, function(ind, va){
                                        append_string += '<option value='+va.refid+'>'+va.company_name+' ('+va.industry+')</option>';
                                    });
                                    append_string +=  '</select>'+
                                '</div>'+
                            '</div>'+ 
                            '</div>';
                            //alert(append_string);
                            $('#dynmic_slct').html(append_string); 
                            jQuery(".chosen").chosen();
                        });
                        request.fail(function( jqXHR, textStatus){
                            alert( "Request failed: " + textStatus );
                        });
});

in Above Code i have to create Dynamic Select Element and call getCompanyEvent() in Change event..

function getCompanyEvent(element){

            var selected_cid = element.value;

                alert(selected_cid);

                var request = $.ajax({
                    method: "POST",
                    url: "ajaxRequest.php",
                    dataType: "json",
                    data: {fn: 'getCompanyEvent', company_id: selected_cid},
                    success: function(reqResult){
                        var append_string = '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">'+
                                '<div class="row form-group">'+
                                    '<label class="control-label col-lg-3">Select'+ ' Event</label><span class="col-lg-1">:</span>'+
                                    '<div class="col-lg-8">'+ 
                                        '<select class="chosen" style="width:200px;" onChange="getTemp(this)>'+
                                          '<option>Select</option>';
                                        $.each(reqResult.result, function(ind, va){
                                            append_string += '<option value='+va.event_id+'>'+va.event_name+'</option>';
                                        });    
                    append_string += '</select>'+
                                    '</div>'+
                                '</div>'+ 
                            '</div>';
                        $('#dynmic_slct').append(append_string);
                        jQuery(".chosen").chosen();
                    }
                }); 
        } 

above functions and Change event i have wrote Same document (index.php).. acutully the above fn generate dynamic select element with lable select Event but i got label only see result

i have also checked my php logic every thing is good that's return result set..

Answer 1

This is very silly mistake and very hard to debug.

If you see your code this line

'<select class="chosen" style="width:200px;" onChange="getTemp(this)>'+

needs to this

'<select class="chosen" style="width:200px;" onChange="getTemp(this)">'+

Added " after getTemp(this)

 var reqResult = {}; reqResult.result = [{ event_id: '1', event_name: 'er' }, { event_id: '2', event_name: 'erewr ewrewr' }, { event_id: '3', event_name: 'erewr' }, ] var success = function(reqResult) { var append_string = '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">' + '<div class="row form-group">' + '<label class="control-label col-lg-3">Select' + ' Event</label><span class="col-lg-1">:</span>' + '<div class="col-lg-8">' + '<select class="chosen" style="width:200px;" onChange="getTemp(this)>"' + '<option>Select</option>'; $.each(reqResult.result, function(ind, va) { append_string += '<option value=' + va.event_id + '>' + va.event_name + '</option>'; }); append_string += '</select></div></div></div>' + '</div>' + '</div>' + '</div>'; $('#dynmic_slct').append(append_string); } success(reqResult)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dynmic_slct"></div>