CODEWITHSUNDEEP
phpjquerymysqlajax
JimB814
JimB814

Reputation: 512

Passing data using jQuery AJAX to PHP script

HTML, AJAX and PHP included below. Before introducing AJAX, everything functions (form tags and PHP processing values removed from HTML below).

The drop-down (categories) is populated from a MySQL query. When the user selects an option, I want to pass the ID via ajax to a PHP script (index.php) to run a MySQL query to populate another drop-down (sub-categories).

The Chrome console log indicates that ajax is passing the ID correctly.

Firebug also shows it passing and that the URL is correct (index.php?business_category_id=ajax-passed value). If the GET variable is being passed, and my PHP script is looking for it, why is the script not responding? Why is it not receiving the value? I cannot echo it, so I know it's not being received.

The ajax script is in js/script.js, index.php (my controller) is in the root, and the page with the html (buy-a-biz.php) is in the root and included in the php script (see below).

If anyone can help, I'd appreciate it very much. I am new to using jQuery ajax.

HTML.

<select name="category" id="business-category">
    <option value="all_categories">Select category</option>
    <?php foreach ($categories as $category): ?>
        <option value="<?php htmlout($category['id']); ?>"><?php htmlout($category['name']); ?></option>
    <?php endforeach; ?>
</select>

AJAX. I experimented using $.get and $.post also.

$(document).ready(function(){

    $("#business-category").change(function(){
        var category_id = $(this).val();
        console.log(category_id);

        $.ajax({
            type: 'GET',
            url: 'index.php',
            data: { business_category_id: category_id },
            success: function(category_id){
                $("#result").html(category_id + ' submitted successfully!');
            }
        });
    });
});

PHP.

if(isset($_GET['business_category_id'])){ 

    $category_id = htmlspecialchars($_GET['business_category_id']);

    include 'includes/dbconnect.php';

    try {
        $sql = "SELECT * FROM sub_category
                WHERE category_id = :category_id";
        $s = $db->prepare($sql);
        $s->bindValue(":category_id", $category_id);
        $s->execute();

        while($row = $s->fetch(PDO::FETCH_ASSOC)){
            $sub_categories[] = array(
                'id' => $row['id'],
                'category_id' => $row['category_id'],
                'name' => $row['name']
            );
        }

        $sql2 = "SELECT * FROM category";
        $s2 = $db->prepare($sql2);
        $s2->execute();

        while($row  = $s2->fetch(PDO::FETCH_ASSOC)){
            $categories[] = array(
                'id' => $row['id'],
                'name' => $row['name'],
            );
        }   
    } 
    catch (PDOException $e) {
        $errMsg = "Error fetching data" . $e->getMessage();
        include 'error.html.php';
        exit();
    }

    include 'buy-a-biz.php';
    exit();

}

Upvotes: 0

Views: 1076

Answers (1)

wero
wero

Reputation: 32980

You are passing a done callback to $.ajax. You should either name this callback success 

$.ajax({
    type: 'GET',
    url: 'index.php',
    data: { business_category_id: category_id },
    success: function(category_id){
            $("#result").html(category_id + ' submitted successfully!');
        }
    });

or invoke done on the promise returned by $.ajax:

$.ajax({
    type: 'GET',
    url: 'index.php',
    data: { business_category_id: category_id },
}).done(function(category_id) { 
    $("#result").html(category_id + ' submitted successfully!'); 
});

Upvotes: 1

Related Questions