2010-02-18 18 views
0

Je travaille sur une page d'accueil et j'utiliserai un script de modification AJAX en ligne pour que l'administrateur le rende aussi simple que possible. Le script que j'ai utilisé est this et il a presque tout ce que je voulais d'un script d'édition en ligne. Mon problème se pose quand je vais capturer les nouveaux changements et les envoyer à une fonction PHP qui mettra à jour ma base de données avec ces nouveaux changements.AJAX Inline Editing: Ajouter PHP Update à de nouveaux changements

Je n'ai pas beaucoup d'expérience avec AJAX et PHP ensemble, donc je suis un peu perdu mais j'ai essayé un code que j'ai trouvé:

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

Le problème est que je ne sais pas tout à fait comment ou où implémenter ce code ou si c'est même le bon code à utiliser. Pour vous montrer le code que j'ai joint deux documents txt:

Index.php.txt

Et

Jquery.editableText.js.txt

Dans index.php.txt est la page d'index où il récupère mes données à partir de la base de données et utilise un peu du code jQuery. Dans le jQuery.editableText.js.txt est le code jQuery concret. Je suppose que la page de gestionnaire de PHP est assez standard avec le bon champ et ensuite mettre à jour dans la base de données.

Répondre

1

J'ai des questions pour vous:

  1. $ menuID contient l'identifiant de quelque chose et vous l'utilisez pour le chercher de la table par cet ID. C'est juste?

Si c'est le cas, vous devez transmettre cet ID à la page du gestionnaire PHP.

Exemple:

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> 

et une partie du corps:

<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); 
?> 

et une plus 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; 
?> 
0

Comme il est dit sur le edit-in-page page, vous devriez utiliser ce code dans un bloc de script. Donc vous l'avez eu à peu près. Ce qui suit devrait fonctionner (non testé).

<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>