Заполните элемент Select Jquery и AJAX и без атрибута asyn c: false

Question

Я пытаюсь заполнить элемент выбора из базы данных, мне нужно сначала передать некоторую переменную из моего Jquery скрипта (идентификатор кнопки). Для этого я использовал вызов AJAX и передал переменные в файл PHP, сделал запрос SQL, получил данные ... Все оказалось хорошо ... но когда я создал код html, а затем перешел из PHP - AJAX. Переменная Jquery html не принимала никаких данных из вызова AJAX ... Затем я прочитал об использовании атрибута asyn c: false в вызове AJAX .. Но я это знаю не лучшее решение ... Я новичок в веб-разработке ... Я хочу, чтобы вы посоветовали мне, что мне делать ... Пример моего кода:

'' '

<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;

?>

'' '

Для более подробного понимания я объясняю проблему более подробно ..

У меня есть таблица, каждая строка этой таблицы имеет 4 столбца, ProcessID , ProcessDate, Edit_btn, Delete_btn во время каждого процесса обрабатывались несколько частей, скажем, номер части A1, A2, A3

Идентификатор кнопки «Изменить» также совпадает с идентификатором процесса.

Теперь, когда При нажатии кнопки редактирования открывается модальное окно, выполняется вызов AJAX, и в этом модальном окне отображаются следующие строки с данными: (выберите элемент с номером детали) (статус детали принят, отклонен и т. Д. c) (примечания )

Теперь при редактировании пользователь должен иметь возможность добавлять дополнительные части в тот же процесс ... Для этого есть (кнопка Добавить) с первой строкой модального окна,

Теперь, когда кнопка Добавить будет нажата, новая строка будет добавлена ​​к модальному окну, эта строка должна иметь выбор элемент, который должен быть заполнен списком уже обработанных частей и частей, которые не были обработаны ...

Для этого мне пришлось сделать вызов AJAX, который передаст EDIT_BTN id ( для получения уже обработанных частей под this.processID) в php файл и получить параметры для выбранного элемента. Во время этой операции у меня возникли указанные выше проблемы ...

Answer 1

Один из способов - использовать asyn c: false, который будет работать.

другой способ - сначала добавить basi c html, данные загрузки

или вы можете просто написать свой выбор html в модальном и в модальном событии шоу, загрузить данные,

данные ps v1, v2, v3 вы используете его по-своему, я только что обрисовал решение,

   $(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();
            }
        });
    }