Ajax no popula select on second request

Asked

Viewed 66 times

0

Hello, I have some ajax requests on my page that populate a select correctly, however, I need you to do it again in an update modal, but the same ajax request returns nothing.

This is the code of the first request:

<div class="form-group col-md-6">
<label class="col-md-3 control-label">Categoria</label>
<div class="col-md-9">
    <select class="form-control" name="categoria" id="categoria" required>
        <option>--- Selecione ---</option>
        <?php
        $nivel = 0;
        $select = "SELECT * FROM categoria_recursiva WHERE nivel = '$nivel'";
        $result_select = $conn->query($select);
        while ($col = mysqli_fetch_assoc($result_select)):
            echo '<option value="' . $col['id'] . '">' . $col['nome'] . '</option>';
        endwhile;
        ?>

    </select>
</div>


<div class="form-group col-md-6">
<label class="col-md-3 control-label">Sub Categoria1</label>
<div class="col-md-9">
    <select class="form-control" id="sub_categoria1" name="sub_categoria">
        <option>--- Selecione ---</option>

        <script src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('jquery', '1.3');
        </script>

        <script type="text/javascript">
            $(function () {
                $('#categoria').change(function () {
                    if ($(this).val()) {

                        $.getJSON('functions/pega_categoria.php?search=', {
                            id: $(this).val(),
                            ajax: 'true'
                        }, function (j) {
                            var options = '<option value=""></option>';
                            for (var i = 0; i < j.length; i++) {
                                options += '<option value="' + j[i].id + '">' + j[i].nome + '</option>';

                            }
                            $('#sub_categoria1').html(options);


                        });
                    } else {
                        $('#sub_categoria1').html('<option value="">--- Selecione ---</option>');
                    }
                });
            });
        </script>

    </select>
</div>

This first works correctly, but the second doesn’t. This is the second time I’ve requested.

<div class="form-group col-md-6">
                            <label class="col-md-3 control-label">Categoria</label>
                            <div class="col-md-9">
                                <select class="form-control" name="categoria" id="categoriaModal" required>
                                    <option>--- Selecione ---</option>
                                    <?php
                                    $nivel1 = 0;
                                    $select1 = "SELECT * FROM categoria_recursiva WHERE nivel = '$nivel1'";
                                    $result_select1 = $conn->query($select1);
                                    while ($col1 = mysqli_fetch_assoc($result_select1)):
                                        echo '<option value="' . $col1['id'] . '">' . $col1['nome'] . '</option>';
                                    endwhile;
                                    ?>

                                </select>
                            </div>
                        </div>

<div class="form-group col-md-6">
                            <label class="col-md-3 control-label">Sub Categoria1</label>
                            <div class="col-md-9">
                                <select class="form-control" id="sub_categoria1Modal" name="sub_categoria">
                                    <option>--- Selecione ---</option>

                                    <script src="http://www.google.com/jsapi"></script>
                                    <script type="text/javascript">
                                        google.load('jquery', '1.3');
                                    </script>

                                    <script type="text/javascript">
                                        $(function () {
                                            $('#categoriaModal').change(function () {
                                                if ($(this).val()) {

                                                    $.getJSON('functions/pega_categoria.php?search=', {
                                                        id: $(this).val(),
                                                        ajax: 'true'
                                                    }, function (j) {
                                                        var options = '<option value=""></option>';
                                                        for (var i = 0; i < j.length; i++) {
                                                            options += '<option value="' + j[i].id + '">' + j[i].nome + '</option>';

                                                        }
                                                        $('#sub_categoria1Modal').html(options);


                                                    });
                                                } else {
                                                    $('#sub_categoria1Modal').html('<option value="">--- Selecione ---</option>');
                                                }
                                            });
                                        });
                                    </script>

                                </select>
                            </div>
                        </div>

This is the php:

<?php include("conexao.php");

$id_cat_selecionada = $_REQUEST['id'];
$sub_categoria = array();

$sql = "SELECT id,nome FROM categoria_recursiva WHERE id_pai=$id_cat_selecionada";
$res = $conn->query($sql);
while ( $col_cat = mysqli_fetch_assoc( $res ) ) {
    $sub[] = array(
        'id'    => $col_cat['id'],
        'nome'  => $col_cat['nome'],
    );


}

echo( json_encode( $sub ) );
?>
php javascript ajax

  • I did a test with your code, ignoring only SQL and returning a static array. It worked perfectly. I advise you to use a Try catch to catch any kind of error and/or look at apache/Nginx logs.

  • Hello Patrick, did all ajax requests work? here does not work at all

  • I don’t understand much about what you said, could give a strength?

1 answer

1

Why your script tag is inside the Select tag?

When you do

$('#sub_categoria1').html('TEXTO'); or $('#sub_categoria1Modal').html('TEXTO');

You’re deleting all your script, so the second time it doesn’t work.

  • I didn’t understand, the first time works normally, but on the second I start it whole again, I didn’t understand what I said

  • What he meant @Caiobrandão is that his "script" is inside the component <select>. The correct thing is to put it at the bottom of the page, before closing the </body>. This prevents your script from being deleted by the function html().

  • Excellent remark Rafael! Had not even attacked me to it.

  • Remove SCRIPT tags from within SELECT, which will probably work. > $('#sub_categoria1').html('<option value="">--- Selecione ---</option>'); because he’s also being erased.

  • Guys, I’m going to apologize but I really don’t understand, should I remove the whole function of select? and as for the html that needs to return pro select? I removed the entire function and went down the code and it didn’t work

  • The tag suit script be inside the tag select, does not mean that the return of AJAX will be inserted in the select, what makes this line: $('#sub_categoria1Modal').html(options); Where $('#sub_categoria1Modal') - Returns the ID element '#sub_categoria1Modal' .html(options); - inserts the string into the widget

  • Rafael, I tried that, and it didn’t work

Show 2 more comments

Browser other questions tagged php javascript ajax

You are not signed in. Login or sign up in order to post.