GET function not work when i use POST at the same time on ajax for dropdown show data

Question

so i try showing data with ajax and get filter it by values... it came work when i just show all data but i want to make show data is filter by dropdown values and it require post for getting the dropdown selected values

Then when i got done i can make the POST function get work on console, and the response that i get is not problem at all but the get function for view data is not working so the data wont load...

prepro.php for dropdown function (seems not problem at all)

<select id="data_latih">
<option value="" selected="selected">Pilih Dokumen keberapa</option>
<?php
$sql = "SELECT DISTINCT dokumen FROM dt_latih ";
$resultset = mysqli_query($connection, $sql) or die("database error:". mysqli_error($connection));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option value="<?php echo $rows["dokumen"]; ?>"><?php echo $rows["dokumen"]; ?></option>
<?php } ?>
</select>

prepro.php on ajax function

function viewData(){
        $.ajax({
            url: 'proseslabel.php?p=view',
            method: 'GET'
        }).done(function(data){
            $('tbody').html(data)
            tableData()
        })
    }
    function tableData(){
        $('#tabledit').Tabledit({
            url: 'proseslabel.php',
            eventType: 'dblclick',
            editButton: true,            
            deleteButton: false,
            hideIdentifier: false,
            buttons: {
                edit: {
                    class: 'btn btn-sm btn-warning',
                    html: '<span class="glyphicon glyphicon-pencil"></span> Edit',
                    action: 'edit'
                },
                save: {
                    class: 'btn btn-sm btn-success',
                    html: 'Save'
                }
            },
            columns: {
                identifier: [0, 'id_latih'],
                editable: [[16, 'label', '{"1": "1", "2": "2", "3": "3", "4": "4", "5": "5", "6": "6"}']]
            },
            onSuccess: function(data, textStatus, jqXHR) {
                viewData()
            },
            onFail: function(jqXHR, textStatus, errorThrown) {
                console.log('onFail(jqXHR, textStatus, errorThrown)');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            },
            onAjax: function(action, serialize) {
                console.log('onAjax(action, serialize)');
                console.log(action);
                console.log(serialize);
            }
        });
    }
          $("#data_latih").change(function() {
          var id = $(this).find(":selected").val();
          $.ajax({
          url: 'proseslabel.php?p=view',
          method:"POST",
          data: {id:id},
          dataType: "json",
          cache: false,
          success: function(data) {
            console.log(data);
            $('tbody').html(data);
             viewData;
            tableData();
          }
          });
        });


</script>

proseslabel.php for showing data

$page = isset($_GET['p'])? $_GET['p'] : '' ;
if($page=='view'){
    if(isset($_POST["id"]))
{
    $result = $mysqli->query("SELECT * FROM dt_latih ");
    while($row = $result->fetch_assoc()){
        ?>
        <tr>
            <td><?php echo $row['id_latih'] ?></td>
            <td><?php echo $row['kalimat'] ?></td>
            <td><?php echo $row['x1'] ?></td>
            <td><?php echo $row['x2'] ?></td>
            <td><?php echo $row['x3'] ?></td>
            <td><?php echo $row['x4'] ?></td>
            <td><?php echo $row['x5'] ?></td>
            <td><?php echo $row['x6'] ?></td>
            <td><?php echo $row['x7'] ?></td>
            <td><?php echo $row['x8'] ?></td>
            <td><?php echo $row['x9'] ?></td>
            <td><?php echo $row['x10'] ?></td>
            <td><?php echo $row['x11'] ?></td>
            <td><?php echo $row['x12'] ?></td>
            <td><?php echo $row['x13'] ?></td>
            <td><?php echo $row['x14'] ?></td>
            <td><?php echo $row['label'] ?></td>
        </tr>
        <?php
    }
    }
} else{

    // Basic example of PHP script to handle with jQuery-Tabledit plug-in.
    // Note that is just an example. Should take precautions such as filtering the input data.

    header('Content-Type: application/json');

    $input = filter_input_array(INPUT_POST);



    if ($input['action'] == 'edit') {
        $mysqli->query("UPDATE dt_latih SET label='" . $input['label'] . "' WHERE id_latih='" . $input['id_latih'] . "'");
    } else if ($input['action'] == 'delete') {
        $mysqli->query("UPDATE tabledit SET deleted=1 WHERE id_latih='" . $input['id_latih'] . "'");
    } else if ($input['action'] == 'restore') {
        $mysqli->query("UPDATE tabledit SET deleted=0 WHERE id_latih='" . $input['id_latih'] . "'");
    }

    mysqli_close($mysqli);

    echo json_encode($input);

}

the data just wont load , but in console inspect element , i get all the values that i want to echo

Answer 1

In your viewData() function, you should define your parameters in the data option of the AJAX call instead of in the url. Like this:

function viewData(){
    $.ajax({
        url: 'proseslabel.php',
        method: 'GET',
        data: {p:'view'}
    }).done(function(data){
        $('tbody').html(data);
        tableData();
    })
}