edit in place jquery

**kappaekappa** · 03-08-2009, 09:48

Da poco ho iniziato ad interessarmi a javascript e sto cercando di usare jquery ho trovato un esempio di edit in place e sto cercando di adattarlo, in pratica vorrei che cliccando su un bottone il testo diventasse editabile e apparisse il bottone salva, cliccando salva richiamare un file php dove svolgere le operazioni di salvataggio solo che non mi funziona qualcuno puo darmi una mano?

codice:

$(document).ready(function(){
$("#body").each(function(i){
setClickable(this, i);
})
});

function setClickable(obj, i) {
$("#edit").bind('click', function(event)  {
   $("#save_settings").show();
//hide the edit button
          $("#edit_settings").hide();
var textarea = '<textarea rows="4" cols="60">'+$("#body").html()+'</textarea>';
var revert = $(obj).html();
$(obj).after(textarea).remove();
$("#save").click(function(){saveChanges(this, false, i);});
$("#cancel").click(function(){saveChanges(this, revert, i);});
})

}//end of function setClickable

function saveChanges(obj, cancel, n) {
if(!cancel) {
var t = $(obj).parent().siblings(0).val();
$.post("test.php",{
  content: t,
  n: n
},function(txt){
alert( txt);
});
}
else {
var t = cancel;
}
if(t=='') t='(click to add text)';
$(obj).parent().parent().after('<div id="body">'+t+'</div>').remove();
setClickable($("#body").get(n), n);
}

codice:

<html>

<head>
  <title>Hello!</title>
  <link rel="stylesheet" href="css.css" type="text/css" />
  <script src="jquery.js" type="text/javascript"></script>
  <script src="jreplacev.js" type="text/javascript"></script>

</head>

<body>

   	<div id="body">Edit the article body text here...</div>

	<div id="edit_settings">
		<input id="edit" name="edit" value="edit" type="button">
	</div>

	<div id="save_settings" style="display: none;">
		<input id="save" name="save" value="save" type="button">
		<input id="cancel" name="cancel" value="cancel" type="button">
	</div>

</body>

</html>

Vorrei anche sapere se come posso passare l'id del messaggio dato che i messaggi sullapagina saranno piu di uno ognuno con il proprio id mentre cosi si ha solo un numero progressivo

**kappaekappa** · 04-08-2009, 16:52

up

**kappaekappa** · 06-08-2009, 04:31

Allora ho riscritto buona parte del codice ora il problema e' che se modifico due volte di seguito lo stesso commento la seconda volta lo script invia i dati in post due volte e cosi via qualcuno puo aiutarmi? Se avete anche qualche miglioramento da fare sarebbe molto gradito

codice:

$(document).ready(function(){
$(".comment").each(function(i){
setClickable(this);
})

});

function setClickable(obj) {
  $("#edit_"+$(obj).attr('id')).click(function()  {
  var textarea = '<textarea rows="4" cols="60" name="'+$(obj).attr('id')+'">'+$(obj).html()+'</textarea>';
  $("#edit_settings_"+$(obj).attr('id')).hide();
  $("#save_settings_"+$(obj).attr('id')).show();
  $(obj).html(textarea);
  $("#save_"+$(obj).attr('id')).click(function(){saveChanges($(obj),$(obj).attr('id'));});
  // alert ($(obj).attr('id'));

   })

}

function saveChanges(obj, n) {
  var val = $('textarea[name="'+n+'"]').val();
  //alert (val);
  $(obj).html(val);
  $("#edit_settings_"+n).show();
  $("#save_settings_"+n).hide();
  $.post("test.php",{
  content: val,
  n: n
},function(txt){
alert( txt);
});
}

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Hello!</title>
  <link rel="stylesheet" href="css.css" type="text/css" />
  <script src="jquery.js" type="text/javascript"></script>
  <script src="jreplacev.js" type="text/javascript"></script>

</head>

<body>

   	<div id="123" class="comment">Edit the article body text here...</div>

	<div id="edit_settings_123">
		<input id="edit_123" name="edit" value="edit" type="button">
	</div>

	<div id="save_settings_123" style="display: none;">
		<input id="save_123" name="save" value="save" type="button">
	</div>


    <div id="456" class="comment">Edit the article body text here...</div>

	<div id="edit_settings_456">
		<input id="edit_456" name="edit" value="edit" type="button">
	</div>

	<div id="save_settings_456" style="display: none;">
		<input id="save_456" name="save" value="save" type="button">
	</div>
    <div id="789" class="comment">Edit the article body text here...</div>

	<div id="edit_settings_789">
		<input id="edit_789" name="edit" value="edit" type="button">
	</div>

	<div id="save_settings_789" style="display: none;">
		<input id="save_789" name="save" value="save" type="button">
	</div>

</body>

</html>

Discussione: edit in place jquery

Strumenti discussione

Ricerca discussione

Visualizza

edit in place jquery

Permessi di invio