• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

PGZ

[Ajuda] Edit in Place

5 mensagens neste tópico

Boas pessoal,

Criei um pequeno sistema de comentários em PHP e queria implementar agora uma função "Edit in Place" em Javascript para os utilizadores poderem facilmente editar as suas mensagens.

Ainda não estou muito habituado ao JS, pois apenas recentemente comecei a utiliza-lo, pelo que peguei no seguinte código base para fazer o que pretendo:

// Edit in Place
// Por Fazedor de Site

function removeForm(){
// retiramos o formulario de dentro do span
$id("form_altera").parentNode.removeChild($id("form_altera"));
}
/*function setAttributeIE(node, name, value) {
var i;
for (i = 0; i {	if (node.attributes[ i ].type == type){ node.attributes[ i ].type = value; }	}
}*/
function mostra(){	
// verificamos se ja existe o formulario
if(!$id("form_altera")){
	// muda a propriedade CSS display para none para desocupar o espaço
	$id("editinplace").style.display='none';

	// criamos um nome objeto span dentro do pai do span que ja existia
	// no nosso caso o pai é a tag <p>
	$obj.create("span","formulario",$id("editinplace").parentNode);

	// criamos um form dentro do novo span
	$obj.create("form","form_altera",$id("formulario"));
	// setando os atributos do formulario
	$id("form_altera").setAttribute("name","form_altera");
	$id("form_altera").onsubmit = function(){
		$id("editinplace").style.display="";
		effects.fade(null,"editinplace",0,100);
		fsAjax("altera.php","editinplace","Loading","POST","form_altera",1,"removeForm()")
		return false;
	}

	// criamos um input dentro do primeiro filho da SPAN de id formulario
	// no nosso caso sera a tag form
	$obj.create("input","valor",$id("formulario").firstChild);	
	// atribuimos as propriedades desse input
	$id("valor").setAttribute("name","valor");
	$id("valor").setAttribute("type","text");
	$id("valor").style.width='300px';
	// aqui atribuimos a caixa de texto a string a ser editada
	$id("valor").setAttribute("value",$id("editinplace").innerHTML);

	// inserimos uma quebra de linha
	$obj.create("br",null,$id("formulario").firstChild);	

	// criamos um input dentro do primeiro filho da SPAN de id formulario
	// no nosso caso sera a tag form
	$obj.create("input","enviar",$id("formulario").firstChild,"submit");	
	// atribuimos as propriedades desse input
	$id("enviar").setAttribute("name","Alterar");
	$id("enviar").setAttribute("value","Alterar");
}
}
function editar(){
// quando clicado
$id("editinplace").onclick = function(){
	// escondemos o SPAN que contém o texto para clicar
	effects.fade(null,"editinplace",100,0,"mostra()");
}
// pega o evento do mouse sobre o span
$id("editinplace").onmouseover = function(){
	this.style.background = "#EDF4FC";
	this.style.cursor = "pointer";
}
// pega o evento do mouse saindo do span
$id("editinplace").onmouseout = function(){
	this.style.background = "";
	this.style.cursor = "";
}

}
addEvent(window,"load",inicia);

O problema deste script é que tudo está definido para uma ID do tipo "editinplace" que nesse caso poderia ser aplicada, por exemplo, em algo do tipo:

<span id = "editinplace">aqui ficaria o texto a editar</span>

Ou seja, ao aplicar o script desta forma, ele vai sempre editar o primeiro comentário, dado que é nele que lê essa ID.

Como os comentários tem cada uma a sua ID, preciso de fazer uma alteração nesse script de modo a que seja possível editar cada um dos comentários, pegando neles pela sua própria ID e não por uma geral...

Lembrei-me de tentar substituir por algo do tipo:

function editar(id_post){
// quando clicado
$id(id_post).onclick = function(){
	// escondemos o SPAN que contém o texto para clicar
	effects.fade(null,id_post,100,0,"mostra()");
}

Mas só isso é insuficiente..

Alguma sugestão?!

Obrigado.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Em primeiro lugar usa o GeSHi para colorir o código e nos simplificar a vida. Utiliza-o da seguinte forma:

{code=javascript}

function xpto(a,b) {

return a+b;

}

{/code}

E substitui as chavetas ({}) por parêntesis rectos ([]), dessa forma o código aparecerá desta maneira:

function xpto(a,b) {

  return a+b;

}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Como suponho que tenhas uma página dinâmica, o que eu faria era ao gerar os ID's dos span "editinplace" da seguinte forma

for($i=1;$i <= $tamanho_pretendido;$i++) {

   echo '<span id="editinplace'.$i.'">Span</span> '

}

E na função de editar o post percorreria os ID's todos e assim o teu script já funcionaria... Não sei se é a melhor solução, mas foi a que me lembrei agora :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já experimentei algo do género mas não funcionou.. ou apliquei mal ou então não dá por aí :s

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora