Populate Select element with Jquery and AJAX and without async:false attribute

I am trying to populate a select element from database, I need to pass some variable from my Jquery script first (id of a button). For this purpose I used AJAX call and passed variables to PHP file, made SQL query, fetched data… Everything turned out to be fine… but when I created html code and then passed from PHP to AJAX. The Jquery variable html was not taking any data from AJAX call… Then I read about using async:false attribute within AJAX call.. But I know it is not a good solution… I am new to web development.. I want you to suggest me what should I do… Example of my code is as below

”’

<span id="span_product_details"></span>


<script type="text/javascript">
$(document).ready(function(){
    var v1=1; //actually id of a button will be saved in this variable which is necessary to make database query
    var v2=2;
    var v3=3;
    var html='';
    html += '<select name="abc" id="abc" class="form-control selectpicker" data-live-search="true" required>';
    $.ajax({
        url:"practice.php",
        method:"POST",
        data:{v1:v1,v2:v3,v3:v3},
        dataType:"html",
        success:function(data)
        {
            html += data;
        }
    });
    html += '</select>';
    
    $('#span_product_details').append(html);
    $('.selectpicker').selectpicker();
});

</script>

<?php
//example code of practice.php file (a seperate file)


//$query = (based on $_POST['v1'], $_POST['v2'] and $_POST['v3'])
$str='<option value="1">Hello</option>'; //data obtained from database
$str.='<option value="2">Hi</option>'; //data obtained from database

echo $str;

?>

”’

For more detailed understanding I am explaining the problem with more details..

I have a table each row of that table has 4 columns, ProcessID, ProcessDate, Edit_btn, Delete_btn during each process multiple parts were processed lets say part No. A1, A2, A3

ID of Edit button is also same as ProcessID.

Now When Edit button is pressed, a modal will open, an AJAX call is performed and that modal shows rows with data as follows, (select element with Part number) (part status accepted, rejected etc) (remarks)

Now while Editing user must be able to add more parts to the same process… For this purpose there is an (Add button) With first row of modal,

Now When Add button is pressed, a new row will be added to the modal, that row must have a select element which should be populated with a list of already processed parts and parts which were not processed…

For this purpose I had to make an AJAX call, which will pass the EDIT_BTN id (to fetch already processed parts under this.processID) to php file, And get the options for select element. During this operation I am having the above stated issues…

Answer

One way is to use async:false which will work.

the other way is to append basic html first, the load data

or you can just write your select html in modal and on modal show event, load data,

p.s. data v1,v2,v3 you use it your way, i just outlined the solution,

   $(document).ready(function(){
    var v1=1; //actually id of a button will be saved in this variable which is necessary to make database query
    var v2=2;
    var v3=3;
    var html='';
    html += '<select name="abc" id="abc" class="form-control selectpicker" data-live-search="true" required>';
    html += '</select>';
    
    $('#span_product_details').append(html);
    load_dropdown(v1,v2,v3);
    }
   // use v1,v2,v3 however you have, either in function or global, param, or any other way
    function load_dropdown(v1,v2,v3) {
        $.ajax({
            url:"practice.php",
            method:"POST",
            data:{v1:v1,v2:v3,v3:v3},
            success:function(data)
            {
                console.log(data); //  if in console it display html then fine,else check format
                $('#abc').append(data); // or use .selectpicker as selector if its unique
                $('.selectpicker').selectpicker();
            }
        });
    }

Advertisement

Answer