0

I have groups and Categories. Categories are dependant of groups. When I select group, i should see related categories.

Everything works. My ajax request pass the correct group ID, the query than finds all the related categories of that passed group ID.

In network tab and console log, I can see the correct data.

Problem is .html(). After the success in Ajax request, I would like to populate in dropdown and its not working.

Here is mu Ajax

<script>
    function getCategories(val) {

        $.ajax({
            type: "POST",
            url: "../data/stock.php?action=select-related-categories",
            data: 'group_id=' + val,
            success: function (data) {
                console.log(data);
                $("#category").html(data);
            }
        });
    }
</script>

The Dropdown of GROUP

<div class="col-md-6">
    <select class="form-control group-select" id="group-select" name="rootid" onChange="getCategories(this.value);">

        <?php while ($rowval = mysqli_fetch_array($group, MYSQLI_ASSOC)) { ?>
            <option value="<?php echo $rowval['id_stc']; ?>">
                <?php echo $rowval['description_stc']; ?>
            </option>
            <?php
        }
        ?>
    </select>
</div>

The Categories 

<div class="col-md-6">
    <select class="form-control" id="category" name="categoryid" onChange="getSets(this.value);">

    </select>
</div>

The Query which looks for related categories 

<?php
if (!empty($_POST["category_id"])) {
    $query = "SELECT * FROM stockcategories_stc WHERE idstc_stc = '" . $_POST["category_id"] . "' Order by lastupdated_stc DESC ";
    $result = mysqli_query($mysqli_scs, $query);

    foreach ($result as $row) {
        ?>
        <option value="<?php echo $row[" id_stc "]; ?>">
            <?php echo $row["description_stc"]; ?>
        </option>
        <?php
    }
}
?>

The ajax works fine. The only part not working is .html(data) does not show any results in category dropdown.

Thank you

Pankaj Makwana
  • 3,030
  • 6
  • 31
  • 47
muhammed ikram
  • 17
  • 10
  • 1
    What is the output of console.log(data) ? – Bilal Akbar Oct 17 '17 at 09:26
  • Have you tried with `text()` function instead of `html()` ? – GGO Oct 17 '17 at 09:27
  • @BilalAkbar I have edit the image of console.log in original post – muhammed ikram Oct 17 '17 at 09:34
  • Try `$("#category").append($(data))` – mega6382 Oct 17 '17 at 09:35
  • 1
    [Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)*** Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! – mega6382 Oct 17 '17 at 09:35
  • @GGO I tried text(), appendTo() - they both don't work. – muhammed ikram Oct 17 '17 at 09:35
  • Are you sure `$("#category")` is defined in page when the ajax is finished ? Maybe your javascript is executed before dom ready ? Try calling your `getCategories` function in`$(document).ready(function() { getCategories(val); });` – GGO Oct 17 '17 at 09:43
  • 1
    As @GGO noted, I'd look at the availability of your select. Removed my answer. Working JSFiddle example: https://jsfiddle.net/gteaddh3/ – lovethebomb Oct 17 '17 at 09:49
  • you send a variable group_id from ajax to your PHP, but PHP is looking for a variable category_id. The names don't match. Since it can't find such a variable, the query is never executed, and you get an empty response back from the server. That would be my guess. Simply change group_id to category_id (or maybe changing category_id to group_id would make more semantic sense??) and you should be ok. – ADyson Oct 17 '17 at 10:38

0 Answers0