Unable to refresh div after inserting the data in mysql using ajax

Question

There are three pages pricing.php, disc.php, disc_save.php. Pricing.php is my main form so it includes scripts for posting data using ajax.

pricing.php

<script>
// button #disc_save_amt is present in disc.php

    $('#disc_save_amt').live('click', function(){ 

        $.ajax({
            url:"disc_save.php",//url to submit
            type: "post",
            dataType : 'json',
            data : {
            'discount_type' : $('#discount_type').val(),
            'discount' : $('#disc_in').val()    
        },
        success: function(){}

        });

    return false;
    });

</script>

disc.php includes button through which data is getting inserted into database after clicking it.

<div id="disc_display">
    <form method="post" id="disc_data" action="">

        <table>
            <tr>
                <td>
                    <select name="discount_type" id="discount_type">
                        <option selected="selected" value="percent">Percent</option>
                        <option value="fixed">Fixed</option>
                    </select>

                </td>

                <td>
                    <input type="text" value="0" id="disc_in" name="disc_amt"/>
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="save" name="disc_save_amt" id="disc_save_amt" 
                     style="width:auto; height:auto; font-size:12px" />
                </td>

                <td>
                     <button name="cancel" id="cancel" onclick="loadXMLDoc_disc_cancel()">cancel</button>
                </td>
            </tr>
        </table>

    </form>
</div>

Following is the disc_save.php

<?php

    //$total= $_SESSION['total'];

    $discount_type= $_POST['discount_type'];
    $discount= $_POST['discount'];


    $con = mysqli_connect("localhost","root","","my_db");
    $run= "INSERT INTO discount(discount_type,discount) VALUES('$discount_type','$discount')";
    mysqli_query($con,$run) or die(mysqli_error($con));


?>

when I click on 'save' button data gets inserted into database but i cant refresh the result in specific div. i.e "disc_display" in my case.

I have tried http://www.2my4edge.com/2013/08/insert-and-view-data-without-refresh.html and also SO question Inserting and retrieving data in MySQL using PHP through Ajax.

How to retrieve the result in specified div without refresh??

pricing.php form

AFter clicking on 'Add discount' form from 'disc.php' is posted using ajax

Answer 1

How to retrieve the result in specified div without refresh??

Modify Your script a little, disc_save.php:

$con = mysqli_connect("localhost","root","","my_db");
$run= "INSERT INTO discount(discount_type,discount) VALUES('$discount_type','$discount')";
mysqli_query($con,$run) or die(mysqli_error($con));

// Return output to the ajax request
echo json_encode(array('status'=>'y', 'discount_type'=>$discount_type, 'discount'=>$discount));

Little modify your ajax request in pricing.php:

$('#disc_save_amt').on('click', function(){ 

    $.ajax({
        url:"disc_save.php",//url to submit
        type: "post",
        dataType : 'json',
        data : {
          'discount_type' : $('#discount_type').val(),
          'discount' : $('#disc_in').val()    
        },
        success: function(response){

           console.log(response);
           // Play with the response accordingly
           if( response.status == "y" ) {

              // Do whatever you want:
              // response.discount_type - Discount Type
              // response.discount      - Discount

              // This will replace your <div id="disc_display"></div> with response
              $('#disc_display').html(response.discount_type);
           }
       }

    });
});

Answer 2

First you will need to return a JSON object with status OK from your php code. You can add the data you want to return to that JSON object, and access it from the success function in your ajax call. I modified your php to be safer.

PHP

<?php

$discount_type= $_POST['discount_type'];
$discount= $_POST['discount'];

$mysqli = new mysqli("localhost", "my_user", "my_password", "world");

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

/* Insert rows */
$stmt = $mysqli->prepare("INSERT INTO discount(discount_type, discount) VALUES(?, ?)");
$stmt->bind_param('ss',$discount_type, $discount);
$stmt->execute();

if ($mysqli->affected_rows==1){
    echo json_encode(array(
        'status'=>'OK', 
        'discount_type'=>$discount_type, 
        'discount'=>$discount
    ));
} else {
    echo json_encode(array(
        'status'=>'Error',
    ));
}

$stmt->close();

JS

$('#disc_save_amt').click( function(){ 

    $.ajax({
        url:"disc_save.php",//url to submit
        type: "post",
        dataType : 'json',
        data : {
        'discount_type' : $('#discount_type').val(),
        'discount' : $('#disc_in').val()    
    },
    success: function(data){}
        if (data.status == "OK") {
            $('#disc_display').append(data.discount_type + ' : ' + data.discount);
        } else {
            $('#disc_display').prepend('Something went wrong!');
        }
    });

return false;
});

Answer 3

You should create html design in disc_save.php which you want to append to div. Ajax will return that html response. You can assign that html to specific div under Success element. like this $("#disc_display").html(response);

    $('#disc_save_amt').live('click', function(){ 

        $.ajax({
            url:"disc_save.php",//url to submit
            type: "post",
            dataType : 'json',
            data : {
            'discount_type' : $('#discount_type').val(),
            'discount' : $('#disc_in').val()    
        },
        success: function(response){
             $("#disc_display").html(response);
        }

        });

    return false;
    });