Insert Dynamic data in database using php Ajax

Question

I tried to insert the dynamic data in database through php Ajax. My code is not working in the dynamic format. But, I have done on the static format, it works fine. Please guide me, how to insert the dynamic data in database through php Ajax.

Please refer the link http://phppot.com/php/php-mysql-inline-editing-using-jquery-ajax/

Please refer my code below.

//static Value Update using ajax
function showEdit(editableObj) {
    $(editableObj).css("background", "#FFF");
}

function saveToDatabase(editableObj, column, id) {
    $(editableObj).css("background", "#FFF url(loaderIcon.gif) no-repeat right");
    $.ajax({
        url: "saveedit.php",
        type: "POST",
        data: 'column=' + column + '&editval=' + editableObj.innerHTML + '&id=' + id,
        success: function (data) {
            $(editableObj).css("background", "#FDFDFD");
        }
    });
}

//Dynamic data store and update in db using ajax
$(document).ready(function () {
    var i = 5;

    $('#add').click(function () {
        i++;
        $('#table').append('<tr class="table-row" id="row' + i + '"><td></td><td contenteditable="true" onBlur="saveToDatabase1(this)" onClick="showEdit(this);"><?php echo     Name ?></td><td contenteditable="true" onBlur="saveToDatabase1(this)" onClick="showEdit(this);"><?php echo Designation ?></td></tr>');
    });

    function saveToDatabase1(editableObj1) {
        $(editableObj1).css("background", "#FFF url(loaderIcon.gif) no-repeat right");
        $.ajax({
            url: "saveedit.php",
            type: "POST",

     /*How to change below code to dynamic data insert in db*/     data: 'column1=' + column + '&editval1=' + editableObj1.innerHTML + '&id=' + id,
            success: function (data) {
                $(editableObj1).css("background", "#FDFDFD");
            }
        });
    }
});

.current-row {
    background-color: #B24926;
    color: #000;
}

.current-col {
    background-color: #1b1b1b;
    color: #000;
}

.tbl-qa {
    width: 100%;
    font-size: 0.9em;
    background-color: #f5f5f5;
}

    .tbl-qa th.table-header {
        padding: 5px;
        text-align: left;
        padding: 10px;
    }

    .tbl-qa .table-row td {
        padding: 10px;
        background-color: #FDFDFD;
    }

tr {
    cursor: pointer
}

.selected {
    background-color: red;
    color: #000;
    font-weight: bold
}

button {
    margin-top: 10px;
    background-color: #eee;
    border: 2px solid #00F;
    color: #17bb1c;
    font-weight: bold;
    font-size: 25px;
    cursor: pointer
}

.tbl-qa {
    counter-reset: serial-number;
}

    .tbl-qa td:first-child:before {
        counter-increment: serial-number;
        content: counter(serial-number);
    }

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<table class="tbl-qa" id="table">
    <thead>
        <tr>
            <th class="table-header" width="10%">Emp.No.</th>
            <th class="table-header">Name</th>
            <th class="table-header">Designation</th>
        </tr>

    </thead>
    <tbody>
        <?php
            foreach($faq as $k=>$v) {
        ?>
        <tr class="table-row">
            <!-- <td><?php echo $k+1; ?></td> -->
            <td></td>
            <td contenteditable="true" onBlur="saveToDatabase(this,'question','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["question"]; ?
            </td>
            <td contenteditable="true" onBlur="saveToDatabase(this,'answer','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["answer"]; ?></td>
        </tr>
        <?php
            }
        ?>
    </tbody>
</table>
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>         
          
/* Saveedit.php */         
<?php
    require_once("dbcontroller.php");
    $db_handle = new DBController();
    $result = $db_handle->executeUpdate("UPDATE php_interview_questions set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE  id=".$_POST["id"]);;
?>

I think the column and id is undefined in your JS function saveToDatabase1 in document ready bcoz you are not passing that into your function like you do in function saveToDatabase — Aswin Ramesh
– Aswin Ramesh, Commented Nov 29, 2017 at 7:12
My question is How to insert dynamic data in database using php Ajax. @madalinivascu — Karthikeyan
– Karthikeyan, Commented Nov 29, 2017 at 7:15

madalinivascu · Accepted Answer · 2017-11-29 07:20:06Z

2

Remove the onclick,onblur attributes from all your html

$('#table').append('<tr class="table-row" id="row'+i+'"><td></td><td contenteditable="true"><?php echo Name ?></td><td contenteditable="true" ><?php echo Designation ?></td></tr>');

Delegate the blur and click events:

$('#table').on('click','.table-row td',function(){
showEdit(this);
});

$('#table').on('blur','.table-row td',function(){
saveToDatabase1(this);
});

answered Nov 29, 2017 at 7:20

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

2 Comments

Karthikeyan Over a year ago

Thanks @madalinivascu. Edit and Onblur are working fine. but, I can't insert the data to the database while onblur the edit field data. Here my code:<script> function saveToDatabase1(editableObj1) { $.ajax({ url: "saveedit.php", type: "POST", data:'column1='+column+'&editval1='+editableObj1.innerHTML+'&id='+id, success: function(data){ $(editableObj1).css("background","#FDFDFD"); } }); }</script>

madalinivascu Over a year ago

in saveToDatabase1 you don't have a id or a column as a param so i suggest you remove them

Collectives™ on Stack Overflow

Insert Dynamic data in database using php Ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related