Using JQuery Append From AJAX

Question

I want to create a dropdown list that populated by another dropdown list. I'm using AJAX and PHP.

I have created my AJAX file like this:

<?php
if(isset($_POST['selname']))
{
    include('config.php');
    $clientId = $_POST['selname'];

    $query  = "SELECT tv.*, v.* FROM t_vorder tv LEFT JOIN m_vehicle v ON tv.tv_vehicleid = v.v_id WHERE tv_orderid = '$clientId'";
    $result = mysqli_query($conn, $query);
    while($row = mysqli_fetch_array($result, MYSQLI_ASSOC))
    {
        $namek = "";
        $namek .= $row['v_id'];
        if($row['v_jenis'] != "" || !empty($row['v_jenis']))
        {
            $namek .= ' - '.$row['v_jenis'];
        }
        if($row['v_platno'] != "" || !empty($row['v_platno']))
        {
            $namek .= ' - '.$row['v_platno'];
        }
        if($row['v_merk'] != "" || !empty($row['v_merk']))
        {
            $namek .= ' - '.$row['v_merk'];
        }
        $xx .= "<option value='$row[v_id]'>$namek</option>";
    }
    return $xx;
    exit;
}
?>

After that, I called this AJAX file to my main program, here's my JQuery code:

function getVehicle()
    {
        var selname = $("select[name=noorder]").val();
        $('#combobox2').html('');
        $.ajax({ url: "getVehicle.php",
            data: {"selname":selname},
            type: 'post',
            dataType: "json",
            success: function(output) {
              console.log(output);
                $('#combobox2').append(output);
            }

        });
    }

And last is my HTML code:

<select name="noorder" id="combobox" class="form-control">
    //get my vehicle from database
    <?php
        $querycon = mysqli_query($conn, "SELECT * FROM m_order WHERE o_status='1' ORDER BY o_id");
        while($rowcon = mysqli_fetch_array($querycon, MYSQLI_ASSOC))
        {
            $invoice = sprintf("%s%"."04d", $rowcon['o_code'], $rowcon['o_id']);
    ?>
            <option value="<?php echo $rowcon['o_id']; ?>"><?php echo $invoice; ?></option>
    <?php
        }
    ?>
</select>
<select name="kendaraan" class="form-control" id="combobox2" onclick="getVechile();">

</select>

My Ajax works fine, my console log return that the file finished load. But my dropdown list not appended by Jquery. Anyone know where's my mistakes?

Norlihazmey Ghazali · Accepted Answer · 2015-09-15 06:37:34Z

2

You did't request for json obj/data into ajax success callback, then no need for dataType: "json", inside ajax properties. Remove that and change return $xx; into echo $xx;

answered Sep 15, 2015 at 6:37

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cross Vander Over a year ago

what a shame... I already tried many times to change echo and return, but my big mistakes is I forgot to delete dataType line.... Thank You very much!!

Norlihazmey Ghazali Over a year ago

Yeah, that makes me going crazy sometimes. You're welcome mate!

Pupil · Accepted Answer · 2015-09-15 06:40:14Z

0

AJAX request gets data from PHP file only when its printed out on the page.

Returning and data from PHP (AJAX backend) to jQuery/Javascript does not mean anything.

Change

return $xx;

to

echo $xx;

answered Sep 15, 2015 at 6:40

Pupil

24k6 gold badges49 silver badges71 bronze badges

Comments

Kausha Mehta · Accepted Answer · 2015-09-15 06:47:06Z

0

You use the dataType: "json" in your ajax call, so it get response in JSON. First remove dataType: "json" line from ajax call. Then replace return $xx; with echo $xx; in your php script.

Hope this solution may works for you, Thanks!

answered Sep 15, 2015 at 6:47

Kausha Mehta

2,9182 gold badges22 silver badges31 bronze badges

Collectives™ on Stack Overflow

Using JQuery Append From AJAX

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related