0

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

  • **WARNING: You are vulnerable to SQL injection!** Attackers can easily run arbitrary code against your database. You should *strongly* consider using [prepared statements](https://stackoverflow.com/a/60496/2605758) and parameterized queries. You can do this using either PDO or MySQLi. *Never trust input*, especially input coming from the client side. Even if only trusted users use your system, [there is still the chance of corrupting your database](https://bobby-tables.com/). – Hoppeduppeanut Jul 15 '19 at 02:31
  • @Hoppeduppeanut thank you for remind me , it's ok cause my app all in localhost – Satria R. Taqwa Jul 15 '19 at 02:36
  • Even then, you should still look into using prepared statements regardless. It's a good habit to enforce to prevent a rather critical vulnerability in your app, even if it's only in a local environment. – Hoppeduppeanut Jul 15 '19 at 02:38
  • When you say "but in console inspect element, i get all the values that i want to echo", do you mean you can see your ajax call is returning the right data in the console network tab ? – François Huppé Jul 15 '19 at 03:24

1 Answers1

0

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();
    })
}
François Huppé
  • 2,006
  • 1
  • 6
  • 15