Question 69998 in Ajax Question posted in
You can find the official documentation here.

How to set value fetched from database inside select2 in JavaScript or jQuery? – Jquery ajax

I have an edit form where I am trying to fetch data from MySql DB using Ajax. So when there are two select2 dropdown. I want to display data inside that select2.
For example : When I have created new truck and driver for particular company ( let say company ID is 6). So for company ID 6, I have selected Driver as John and Truck as Flatbed and submitted the form. Data got saved inside DB. When I want to edit or update some data of that then it should display company name for ID 6 (which is displaying successfully) and driver as John and Truck as Flatbed.

Below is my script:

function getTrip(tripid){
    document.getElementById('edtrip').value = tripid;
    var url = "api/gettripinfo";
    $.post(url,{
        tripid : tripid,
    },function(data, status){
        if (data.status == "OK") {
            if (data.statusCode == 1) {
                document.getElementById("edcompanyselect").value = data.response.company.companyname;
                document.getElementById("ed_com").value = data.response.company.companyid;
                document.getElementById('eddriverselect').value = data.response.driver.username;
                document.getElementById('edtruckselect').value = data.response.truck.name;
                document.getElementById("edtripnumber").value = data.response.tripnumber;
                document.getElementById("eddate").value = data.response.date;
                
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        } else {
            var error = data.responseMessage;
            swal(error, "", "error");
        }
    });
}

But I am not able to get expected result. Please provide me your valuable suggestions.

Screenshot to display issue

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Below code solved the problem:

    function getTrip(tripid){
        document.getElementById('edtrip').value = tripid;
        var url = "api/gettripinfo";
        $.post(url,{
            tripid : tripid,
        },function(data, status){
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                    document.getElementById("edcompanyselect").value = data.response.company.companyname;
                    document.getElementById("ed_com").value = data.response.company.companyid;
                    setTimeout(function(){
                        getDriverAjax();
                        getTruckAjax();
                    },500);
                    document.getElementById("edtripnumber").value = data.response.tripnumber;
                    document.getElementById("eddate").value = data.response.date;
                    setTimeout(function(){
                        $("#eddriverselect").val(data.response.driver.userid).trigger('change');
                        $("#edtruckselect").val(data.response.truck.truckid).trigger('change');
                        $('#edit_info').modal("show");
                    }, 1500);
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        });
    }

  2. 0

    Try the below code. Using jQuery you can set value and trigger the change event.

    function getTrip(tripid){
    document.getElementById('edtrip').value = tripid;
    var url = "api/gettripinfo";
    $.post(url,{
        tripid : tripid,
    },function(data, status){
        if (data.status == "OK") {
            if (data.statusCode == 1) {
                document.getElementById("edcompanyselect").value = data.response.company.companyname;
                document.getElementById("ed_com").value = data.response.company.companyid;
                document.getElementById('eddriverselect').value = data.response.driver.username;
                document.getElementById('edtruckselect').value = data.response.truck.name;
                document.getElementById("edtripnumber").value = data.response.tripnumber;
                document.getElementById("eddate").value = data.response.date;

                jQuery("#edcompanyselect").val(data.response.company.companyname).trigger('change');
                jQuery("#eddriverselect").val(data.response.driver.username).trigger('change');
                jQuery("#edtruckselect").val(data.response.truck.name).trigger('change');

            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        } else {
            var error = data.responseMessage;
            swal(error, "", "error");
        }
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search