Jeditable, PHP + MySQL

Question

Okay, I'm horrendously new to MySQL and PHP, but could use some help here.

Grand vision: a big page full of editable fields (I'm using Jeditable, an edit-in-place jquery plugin) that stores values to different fields in the same row of a MySQL database.

I'm totally lost on how to properly post the values to different fields of the MySQL database, though. What I have is below; it's derived from the examples Jeditable provides. I can enter data into the fields, but it saves the ID of the field - not the data - and it appends it into multiple columns of my database, not the one correct column.

So, in short - how would I map what you see here to different locations in my MySQL database (example: one line item/record with a customer name value, a size value, an MRR at initial sale value, etc?)

Here is my HTML-

<!-- JQuery to extract form data... -->
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      $('#paragraph_1').editable('save.php');
    });

    $(document).ready(function() {
      $('#custsize').editable('save.php');
    });

    $(document).ready(function() {
      $('#mrratsale').editable('save.php');
    });
  </script>

<!-- my form fields... -->
<h2 id="paragraph_1" name="paragraph_1"></h2>
<h3 id="custsize" name="custsize"></h3>
<h3 id="mrratsale" name="mrratsale"></h3>

...and here is my save.php file...

   <?php
      require_once 'config.php';
      $query=sprintf("INSERT INTO customerdata (ListItemID, CustName, CustSize, MrrAtSale)
        VALUES (%d, '%s', '%s', '%s')",
         $id, $_POST['id'], $_POST['id'], $_POST['id'], stripslashes($_POST['value']));

      $dbh->exec($query);
       /* What is echoed back will be shown in webpage after editing.*/
         print $_POST['value']; 
     ?>

Any help at all would be much, much, much appreciated (and try not to laugh!)

Answer 1

What you have to do is target each editable database write to its own function - so you can target individual fields.

So your html files should read (I also cleaned up your JS):

<!-- JQuery to extract form data... -->
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('.paragraph_1').editable('save.php?type=paragraph');
    $('.custsize').editable('save.php?type=custsize');
    $('.mrratsale').editable('save.php?type=mrratsale');
  });
</script>

<!-- my form fields... -->
<h2 id="1" class="paragraph_1"></h2>
<h3 id="1" class="custsize"></h3>
<h3 id="1" class="mrratsale"></h3>

Notice how I added query strings to the save.php file. You should also change the elements' id to a field in the record, so you can update the correct record.

The php file:

<?php
  require_once 'config.php';

  $type = (isset($_GET['type'])) ? $_GET['type'] : "";
  $value = (isset($_POST['value'])) ? $_POST['value'] : ""; //value posted
  $id = (isset($_POST['id'])) ? $_POST['id'] : ""; //id of the element

  if($type == "paragraph") {
    mysql_query("UPDATE customerdata SET paragraph='$value' WHERE id='$id'");
  } elseif ($type == "custsize") {
    mysql_query("UPDATE customerdata SET CustSize='$value' WHERE id='$id'");
  } elseif ($type == "mrratsale") {
    mysql_query("UPDATE customerdata SET MrRatSale='$value' WHERE id='$id'");
  };

   print $value; 
?>

You should add some validation and clean the data before putting it in the database but this should get the jEditable working.

Note that you should probably update the record rather than inserting it otherwise you will be creating a new record everytime the data is editted.

You can see the id is used to update the correct record.

I haven't really used jEditable recently but this should get you started.