views:

447

answers:

2

I’m working on a homepage and will use an AJAX inline editing script for the admin to make it as simple as possible. The script I’ve been using is this and it has almost everything I wanted from an inline editing script. My problem arises when I’m going to capture the new changes and send them to a PHP function which will update my database with those new changes.

I don’t have that much experience with AJAX and PHP together so I’m somewhat lost but I’ve tried a code I found:

$.ajax({
  type: "POST",
  url: "update_handler.php",
  data: "newfieldvalue=" + newValue,
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

The problem is that I don’t quite know how or where to implement this code or if it’s even the right code to use. To show you the code I’ve attached two txt documents:

Index.php.txt

And

Jquery.editableText.js.txt

In index.php.txt is the index page where it retrieves my data from the database and uses a bit of jQuery code. In the jQuery.editableText.js.txt is the concrete jQuery code. I guess that the PHP handler page is pretty much standard with taking the correct field and then update it in the database.

A: 

As it says on the edit-in-page page you should be using that code within a script block. So you pretty much had it. The following should work (untested).

<script type="text/javascript">
    jQuery(function($){
        $('h2.editableText, p.editableText').editableText({
            newlinesEnabled: false
        });

        $.editableText.defaults.newlinesEnabled = true;

        $('div.editableText').editableText();

        //  bind an event listener that will be called when
        //  user saves changed content
        $('.editableText').change(function(){
             var newValue = $(this).html();

             // do something
             // For example, you could place an AJAX call here:
            $.ajax({
              type: "POST",
              url: "update_handler.php",
              data: "newfieldvalue=" + newValue,
              success: function(msg){
                alert( "Data Saved: " + msg );
              }
           });
        });

    });
</script>
Blair McMillan
+1  A: 

Hi. I have questions for you:

  1. $menuID contains the id of something and you use it to fetch it from table by this ID. It's right?

If it's right you must pass this ID to the PHP handler page.

Example:

index.php:

<script type="text/javascript">
jQuery(function($){
    $('h2.editableText, p.editableText').editableText({
        newlinesEnabled: false
    });

    $.editableText.defaults.newlinesEnabled = true;

    $('div.editableText').editableText();

    $('.editableText').change(function(){
        var newValue = $(this).html();

        // important code:
          $.ajax({
          type: "POST",
          url: "save.php",
          data: { val : newValue, key:$(this).parent().tagName, id:$(this).parent().attr('class')},
          success: function(msg){
            alert( "Data Saved: " + msg );
          }
       });

    });

});
</script>

and body part:

<body>
<div id="wrapper">
<div id="content">
    <?php 
    $isnull = getContent($menuID, "title");
    if ($isnull != "") {

    echo "<h2 class=\"editableText\"><center><p>" . getContent($menuID, "title") . "</p></center></h2><br>";
    } else {
        null;
    }
    ?>

    <div class="editableText">

<p class="<?php echo $menuID?>"><?php echo getContent($menuID, "maincontent");?></p>
        </div>
    </script>
    <?php

    mysql_close($connection);
?>

and one more, save.php:

<?php

# content that you send from client; you must save to maincontent
$content=$_POST['val'];

# $from=='div' if it from maincontent or $from=='center' if it from title
$from=$_POST['key'];


# id of your post 
$id=$_POST['id'];

    #here you can save your content;
?>
SirJ