Home/ Questions/Q 8733397
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T09:38:33+00:00

I have a question for you to upgrade my knowledge. I am trying to

  • 0

I have a question for you to upgrade my knowledge.

I am trying to create an inline editing page, the data are stored in a database.
In the table “content” I create 2 fields for testing purpose, the “id” and the “text” field.

If I want to modify the field with the “id=25” or id=X, I know how to do it manually, just specify in the MySQL Query “WHERE id=25”, but if I have a list of 1000 entries, how can I modify the query to get the ID on the fly?

Here is the code, I am playing on:

index.php file

<style>
body {      
    font-family: Helvetica,Arial,sans-serif;
    color:#333333;
    font-size:13px;
}

h1{
    font-family: Georgia, Times, serif;
    font-size: 28px;        
}

a{
    color: #0071D8;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

:focus {
    outline: 0;
}

#wrap{
    width: 500px;
    margin:0 auto;              
    overflow:auto;      
}

#content{
    background: #f7f7f7;
    border-radius: 10px;
}

#editable {     
    padding: 10px;      
}

#status{
    display:none; 
    margin-bottom:15px; 
    padding:5px 10px; 
    border-radius:5px;
}

.success{
    background: #B6D96C;
}

.error{
    background: #ffc5cf; 
}

#footer{
    margin-top:15px;
    text-align: center;
}

#save{  
    display: none;
    margin: 5px 10px 10px;      
    outline: none;
    cursor: pointer;    
    text-align: center;
    text-decoration: none;
    font: 12px/100% Arial, Helvetica, sans-serif;
    font-weight:700;    
    padding: 5px 10px;  
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    border-radius: 5px; 
    color: #606060;
    border: solid 1px #b7b7b7;  
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top,  #fff,  #ededed);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}   

#save:hover
{
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
 <script>
 $(document).ready(function() {

$("#save").click(function (e) {         
    var content = $('#editable').html();    

    $.ajax({
        url: 'save.php',
        type: 'POST',
        data: {
        content: content
        },              
        success:function (data) {

            if (data == '1')
            {
                $("#status")
                .addClass("success")
                .html("Data saved successfully")
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');   
            }
            else
            {
                $("#status")
                .addClass("error")
                .html("An error occured, the data could not be saved")
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');   
            }
        }
    });   

});

$("#editable").click(function (e) {
    $("#save").show();
    e.stopPropagation();
});

$(document).click(function() {
    $("#save").hide();  
});

 });
 </script>

</head>
<body>
<div id="wrap">

    <div id="status"></div>

    <div id="content">

    <div id="editable" contentEditable="true">
    <?php
        //get data from database.
        include("db.php");
        $sql = mysql_query("select * from content");
        $row = mysql_fetch_array($sql);     
        echo $row['id'];
        echo "<br />";
        echo $row['text'];
    ?>      
    </div>  

    <button id="save">Save</button>
    </div>

</div>
  </body>

And here is the save.php file:

include("db.php");


$content = $_POST['content']; //get posted data
$content = mysql_real_escape_string($content);  //escape string 

$sql = "UPDATE content SET text = '$content' WHERE id = '$id' ";

if (mysql_query($sql))
{
    echo 1;
}

I know that this could be a stupid question but I am a newbie.

Thank you in advance for the help.

UPDATE:
thanx to Luis I fixed my old problem but I don’t know why if I put all the code in a while only the “Save” button of the first entry is working good, the rest not, any hint?
At the moment I am testing only “description_text”.

Here is the “while” code:

<?php 

    /////////// Now let us print the table headers //////////////// 

    $query =" SELECT * FROM gallery ORDER BY id DESC ";

    $result = mysql_query($query) or die(mysql_error());

    echo "<div style='width: 100%; text-align: center;'>";                   
    echo "<table style='margin: auto auto;'>";
    echo "<tr><th>ID</th><th>Image</th><th>Category</th><th>Description</th><th>Added on</th></tr>";

    while($ordinate = mysql_fetch_array($result))
    {

    $id     = $ordinate['id'];
    $img_name    = $ordinate['img_name'];
    $category     = $ordinate['category'];
    $description_text = $ordinate['description_text'];
    $insert_datetime    = $ordinate['insert_datetime'];

    echo "<tr><td style='width: 20px;'>".$id."</td><td style='width: 210px;'><img src='../../upload/content/uploaded_images/". $img_name ."' width='200px'></td><td style='width: 100px;'>".$category."</td><td style='width: 100px;'><div id='status'></div><div id='content'><div id='editable' contentEditable='true'>".$description_text."</div><button id='save'>Save</button></div></td><td style='width: 100px;'>".$insert_datetime."</td></tr>";        

    }
    echo "</table><br /><br /></div>";
?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    on index.php move this part of code to the beginning, so you can use same vars in the rest of the script.

    <?php
    //get data from database.
    include("db.php");
    $sql = mysql_query("select * from content");
    $row = mysql_fetch_array($sql);     
    // echo $row['id'];    but keep this ones in its original place inside their <%php %> tags
    // echo "<br />";
    // echo $row['text'];
?>

    Later in the ajax call, insert this PHP lines:

        data: {
    content: content
    <?php
    echo ", id: ".$row['id'];
    echo ", token: '".md5('my SALT text'.(int)$row['id'])."'";    // strongly!!! recomended, not mandatory
    ?>
    },

    and on save.php 

        $id = (int)$_POST['id'];                    // (int)  sanitizes  id
    $token = $_POST['token'];
    if(md5('my SALT text'.$id)!=$token) die();  // or whatever but do not execute update
                                                // perhaps  echo 0; die();

    // ... rest of your code ....
    $sql = "UPDATE content SET text = '$content' WHERE id = $id"

    the token, prevents the risk that someone uses your save.php as a way to inject whatever on every post on the table.

    At least, an advice: use mysqli_query (notice the i) instead of mysql_query as this last is deprecated. Also, but with more diferences, you can use PDO

    • 0