Code js, impossibilité de trouver la solution, édition contenu type facebook-like

30 oct. 2015, 18:57

Bonsoir à tous,

alors voila j'ai trouvé via un tuto, de réaliser la modification d'un contenu de manière interactive à la facon facebook voici le lien ça sera beaucoup plus simple :

http://www.webspeaks.in/2010/05/facebook-like-profile-edit-with-jquery.html

Le tuto, marche niquel, je l'ai mis à jours en PDO, sauf que j'aimerai l'appliquer à plusieurs champs en même temps et c'est là où je bloque car ça demande un peu de connaissance, j'ai essayé d'aller à tâtons mais sans grand succès.

En l'occurence dans mon cas à mon :
- $categoryinfo["article_content"];
- $categoryinfo["titre_content"];

Je vous joins mes fichiers légèrement modifier :

<?php
include_once("../../includes/connect.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.body
{
width:230px;
margin:50px;
}
.full_wrapper
{
border:1px solid #D8DFEA;
padding:5px;
width:230px;
}
.text_wrapper
{
padding:3px;
width:187px;
}
.prof_text
{
}
.edit_img{
height:20px;
width:20px;
margin:2px;
}
.edit_link
{
float:right
}
.editbox
{
overflow: hidden;
height: 61px;
border:0px solid #D8DFEA;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 //Change style on edit link action
 $('.edit_link').click(function()
 {
  $('.text_wrapper').hide();
  var data=$('.prof_text').html();
  $('.edit').show();
  $('.editbox').html(data);
  $('.editbox').focus(); 

  $('.full_wrapper').css('border','0px');
  $('.editbox').css('border','1px solid #D8DFEA');
 });

 //Mouseup textarea false
 $(".editbox").mouseup(function()
 {
  return false
 });

 $(".editbox").blur(function()
 {
   $('.full_wrapper').css('border','1px solid #D8DFEA');
   $('.editbox').css('border','0px');
 });

 //Textarea content editing
 $(".editbox").change(function()
 {
  $('.edit').hide();
  var boxval = $(".editbox").val();
  var dataString = 'prof='+ boxval;
  $.ajax({
  type: "POST",
  url: "updProf.php",
  data: dataString,
  cache: false,
  success: function(html)
  {
   $('.text_wrapper').html(boxval);
   $('.text_wrapper').show();
  }
 });
});

 //Textarea without editing.
 $(document).mouseup(function()
 {
  $('.edit').hide();
  $('.text_wrapper').show();
 });
});
</script>
</head>

<body>
<div class="body">
<?php
  $id = "95";
  $reqcategory = $bdd->prepare('SELECT * FROM article WHERE id = :id');
  $reqcategory->execute(array(
    'id' => $id
    ));

    $categoryinfo = $reqcategory->fetch();
  ?>
 <div class="full_wrapper">
  <a href="#" class="edit_link" title="Edit"><img src="edit.PNG" border="0" class="edit_img"></a>
  
  <div class="text_wrapper">
   <div class="prof_text"> 
    <?php echo $categoryinfo["article_content"]; ?>
   </div>
   <div class="prof_text"> 
    <?php echo $categoryinfo["titre_content"]; ?>
   </div>
  </div>
  <div class="edit" style="display:none">
  <textarea class="editbox" cols="23" rows="3" ></textarea>
  </div>
  </div>
 </div>
</body>
</html>

<?php
include_once("../../includes/connect.php");
if($_POST['prof'])
{
$prof=$_POST['prof'];
$id = "95";

$sql3 = $bdd->prepare("UPDATE article SET article_content= :article_content WHERE id= :id ");
$sql3->execute(array(
	'article_content' => $prof,
	'id' => $id
	));
}
?>

Quelqu'un pourrait'il essayer de m'aider ?

En vous remerciant énormément,

AlexCode

Code js, impossibilité de trouver la solution, édition contenu type facebook-like

Qui est en ligne