Заполните <select>при нажатии, используя AJAX и PHP - PullRequest
Новая
       0

Заполните <select>при нажатии, используя AJAX и PHP

1 голос
/ 28 марта 2020

У меня есть <select> только с одной опцией, я хочу получить остальные опции из базы данных, используя PHP, а затем заполнить <select> результатом PHP, используя AJAX.

К сожалению, мой код не работает, я не удивлен, так как я новичок в AJAX и jQuery, но я не получаю никаких ошибок, чтобы разобраться с этой проблемой.

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

Ниже моего HTML: 

<select class="custom-select my-1 mr-sm-2" id="producto" name="producto" required>
    <option disabled selected value>Elegir...</option>
</select>

Ниже моего AJAX кода: 

<script type="text/javascript">
$(document).ready(function() {
    $("#producto").click(function() {
        $.ajax({
            url: 'fetch_lista_productos_compra.php',
            type: 'get',
            success: function(data) {
                $("#producto").append(data);
            }
        });
    });
});
</script>

Ниже моего PHP кода: 

<?php 

require $_SERVER['DOCUMENT_ROOT'].'/testground/php/db_key.php';

$conn = mysqli_connect($servername, $username, $password, $dbname);

$sql_query = mysqli_query($conn, "SELECT * FROM productos WHERE disponibilidad = 'disponible'");

while ($row = mysqli_fetch_assoc($sql_query)) {
    $titulo = $row['titulo'];
    echo <<<EOT
    <option value="$titulo">$titulo</option>\n
EOT;
}
?>

Как всегда, любая помощь очень приветствуется, и спасибо за ваше время.

ВАЖНОЕ РЕДАКТИРОВАНИЕ

<select> имеет дублированный идентификатор, возможно, я должен был заявить об этом с самого начала, так как знаю, что это и стало причиной моей проблемы .

Дело в том, что в этом <form> выборки создаются динамически по запросу пользователя. Они нажимают на Добавить продукт , и создается новый выбор с доступными продуктами, я знаю, что идентификатор / имя указанного ввода должны иметь [] (id="producto[]"), чтобы оно было преобразован в массив, но я не знаю, как заставить AJAX справиться с этой динамически созданной повторяющейся проблемой выбора . Я прошу прощения за это запоздалое восклицание, которое я понимаю, теперь это имеет огромное значение.

Ответы [ 4 ]

2 голосов
/ 28 марта 2020

Вы должны отредактировать свой ответ от этого: 

<?php 

require $_SERVER['DOCUMENT_ROOT'].'/testground/php/db_key.php';

$conn = mysqli_connect($servername, $username, $password, $dbname);

$sql_query = mysqli_query($conn, "SELECT * FROM productos WHERE disponibilidad = 'disponible'");

while ($row = mysqli_fetch_assoc($sql_query)) {
    $titulo = $row['titulo'];
    echo <<<EOT
    <option value="$titulo">$titulo</option>\n
EOT;
}
?>

На это: 

    <?php 

    require $_SERVER['DOCUMENT_ROOT'].'/testground/php/db_key.php';

    $conn = mysqli_connect($servername, $username, $password, $dbname);

    $sql_query = mysqli_query($conn, "SELECT * FROM productos WHERE disponibilidad = 'disponible'");

    $response = '';

    while ($row = mysqli_fetch_assoc($sql_query)) {
        $titulo = $row['titulo'];
        $response .= '<option value="' .$titulo . '">' . $titulo . '</option>'; //Concatenate your response
    }

    echo $response;

?>

Но я предлагаю использовать JSON, чтобы получить ответ и разобрать его на стороне клиента. Вы можете сделать это, поместив все значения в массив ответов и используя json_encode(). В конце вы получаете прямой ответ от сервера с только значениями и добавляете эти значения к тому, что вам нужно на стороне клиента.

Обновление Также вы добавляете данные к существующим опциям select , Вы можете просто добавить это, отредактировав это: 

<script type="text/javascript">
$(document).ready(function() {
    $("select#producto").focus(function() { //Change to on Focus event
        $.ajax({
            url: 'fetch_lista_productos_compra.php',
            success: function(data) {
                $("select#producto").html(data); //Change all html inside the select tag 
            }
        });
    });
});
</script>

Результат теста: 

$('select#options').focus(function(){
    alert("Hello this is a select trigger");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="options">
    <option value="test">Test</option>
</select>
2 голосов
/ 28 марта 2020

Пожалуйста, не создавайте ваш html на сервере, попробуйте просто отправить необработанные данные, а затем создайте html на стороне клиента, так будет лучше, и это оставляет место для изменения представления позже без особой связи .

При этом вместо выполнения: 

while ($row = mysqli_fetch_assoc($sql_query)) {
    $titulo = $row['titulo'];
    echo <<<EOT
    <option value="$titulo">$titulo</option>\n
EOT;
}

просто выполните 

$rows = [];
while ($row = mysqli_fetch_assoc($sql_query)) {
    $rows[] = $row;
}

//this is your best bet when sending data from PHP to JS,
//it sends the rows as JSON-like string,
//which you'll parse to an array in the client
echo json_encode($rows);

, затем в клиенте 

$.ajax({
    url: 'fetch_lista_productos_compra.php',
    type: 'get',
    success: (data /*json-like string*/) => {
        const dataAsArray = JSON.parse(data);

        $.each(dataAsArray, (index, row) => {
             //now HERE you construct your html structure, which is so much easier using jQuery
            let option = $('<option>');
            option.val(row.titulo).text(row.titulo);
            $("#producto").append(option);
        });
    }
});

Относительно вашего редактирования около нескольких select s

У меня, конечно, нет доступа к вашему серверу, поэтому я использую фиктивную службу, которая возвращает JSON. Идентификаторы генерируются динамически, и вся загрузка данных происходит асинхронно после нажатия на кнопку. Попробуйте использовать свой URL и измените функцию success в соответствии с вашим html. 

$(document).ready(function() {
    $('#add').click(() => {
      //how many so far...?
      let selectCount = $('select.producto').length;
      
      const select = $('<select class="producto">');
      select.attr('id', `producto${selectCount + 1}`);
      
      //then we fetch from the server and populate select
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts',
        type: 'get',
        success: function(data) {
          data.forEach((d) => {
            const option = $('<option>');
            option.val(d.id).text(d.title);
            select.append(option);
          });
        }
      });
      
      document.body.appendChild(select[0]);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id='add'>Add product</button><br>
<!--<select class="custom-select my-1 mr-sm-2" id="producto" name="producto" required>
    <option disabled selected value>Elegir...</option>
</select>-->

HIH

1 голос
/ 28 марта 2020

Как выяснилось, код в вопросе действительно работал правильно, проблема заключалась не в самом коде, а в том, что, как я сказал (к сожалению, при последующем редактировании, а не с самого начала) в вопросе, есть где более чем один <select> использует один и тот же идентификатор, поэтому каждый раз, когда AJAX выполнялся, результат добавлялся только к первому <select>, и он добавлялся снова и снова каждый раз, когда я нажимал на него, мое решение Unifiing и AJAX, который заполнил <select>, и jQuery, который создал все указанные динамики c <select> в одном сценарии , таким образом решая все мои проблемы сразу.

Ниже моего кода jQuery / AJAX: 

<script type="text/javascript">
    $(document).ready(function() {
        var max_fields      = 10;
        var wrapper         = $(".input_fields_wrap");
        var add_button      = $(".add_field_button");
        var x = 0;
        $(add_button).click(function(e) {
            e.preventDefault();
            $.ajax({
                url: '/testground/php/fetch_lista_productos_compra.php',
                type: 'get',
                success: function(data) {
                    if(x < max_fields) {
                        x++;
                        var html = '';
                        html += '<div class="form-group row" id="inputFormRow" style="margin-bottom: 0px;">';
                        html += '<label class="col-3 col-form-label font-weight-bold">Producto</label>';
                        html += '<div class="col-7">';
                        html += '<select class="custom-select my-1 mr-sm-2" id="producto" name="producto[]" required>';
                        html += '<option disabled selected value>Elegir...</option>';
                        html += data;
                        html += '</select>';
                        html += '</div>';
                        html += '<div class="col-1 my-auto" style="padding: 0px 0px 0px 0px;">';
                        html += '<button id="removeRow" type="button" class="btn btn-danger">X</button>';
                        html += '</div>';
                        html += '</div>';
                        $(wrapper).append(html);
                    }
                }
            });
        });

        $(document).on('click', '#removeRow', function () {
            $(this).closest('#inputFormRow').remove(); x--;
        });
    });
</script>

Я хочу поблагодарить всех, кто нашел время, чтобы помочь мне с этим Свати , Сергей Леоненко и Scaramouche , это сообщество действительно удивительно.

0 голосов
/ 28 марта 2020 
<script type="text/javascript">
$(document).ready(function() {
    $("#producto").change(function() {
        $.ajax({
            url: 'fetch_lista_productos_compra.php',
            type: 'get',
            success: function(data) {
               console.log(data)
// $("#producto").append(data);
            }
        });
    });
});
</script>`enter code here`

try run this and check in your console that weather you are receiving the data from your php or not.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...