Criando um campo editável com JQuery
22/08/2014
0
Bom galera, to criando um campo input editável com Jquery e o plano é fazer ele ficar igual setá na imagem!
[img]http://arquivo.devmedia.com.br/forum/imagem/378257-20140822-164806.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/378257-20140822-164821.png[/img]
bom, esse é meu plano, só que não estou conseguindo executado com sucesso!
segue meu código!
[img]http://arquivo.devmedia.com.br/forum/imagem/378257-20140822-164806.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/378257-20140822-164821.png[/img]
bom, esse é meu plano, só que não estou conseguindo executado com sucesso!
segue meu código!
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
.invisible {
display: none;
}
.visible {
display:block;
}
.left{
float: left;
margin-right: 3px;
}
</style>
<script>
var visible = function(element){
$(element).removeClass("invisible");
$(element).addClass("visible");
}
var invisible = function(element){
$(element).removeClass("visible");
$(element).addClass("invisible");
}
var createEditableField = function (fieldId){
createEditableHTML(fieldId);
$('#editImg-' + fieldId).live('click', function(){
var val = $("#" + fieldId).html();
$("#old-" + fieldId + "-value").val(val);
$("#" + fieldId)
.replaceWith("<input id='" + fieldId + "-text' class='left' value='" + val +"'/>");
invisible(this);
visible("#saveImg-" + fieldId);
visible("#closeImg-" + fieldId);
$("#" + fieldId + "-text").focus();
});
$('#saveImg-' + fieldId).live('click', function(){
var val = $("#" + fieldId + "-text").val();
$("#" + fieldId + "-text")
.replaceWith("<span id='" + fieldId + "' class='left'>" + val +"</span>");
visible(this);
visible("#editImg-" + fieldId);
invisible("#saveImg-" + fieldId);
invisible("#closeImg-" + fieldId);
});
$('#closeImg-' + fieldId).live('click', function(){
var val = $("#old-" + fieldId + "-value").val();
$("#" + fieldId + "-text")
.replaceWith("<span id='" + fieldId +"' class='left'>" + val +"</span>");
visible(this);
visible("#editImg-" + fieldId);
invisible("#saveImg-" + fieldId);
invisible("#closeImg-" + fieldId);
});
}
var createEditableHTML = function(fieldId){
var divFieldContainer = $('<div>').attr({id: 'fieldcontainer-' + fieldId});
var divValueContainer = $('<div>').attr({id: 'valuecontainer-' + fieldId, class: 'left'});;
var inputOldValue = $('<input>').attr({type: 'hidden', id:'old-' + fieldId + '-value'});
var spanValue = $('<span>').attr({id:fieldId + '-value', class: 'left'});
spanValue.html($("#" + fieldId).html());
var divActionButtons = $('<div>').attr({id: 'actionButtons-' + fieldId, class: 'left'});
var imgEdit = $('<img>').attr({id:'editImg-' + fieldId, class: 'visible left', src: 'edit.png'});
var imgSave = $('<img>').attr({id:'saveImg-' + fieldId, class: 'invisible left', src: 'Save.png'});
var imgClose = $('<img>').attr({id:'closeImg-' + fieldId, class: 'invisible left', src: 'close.png'});
inputOldValue.appendTo(divValueContainer);
spanValue.appendTo(divValueContainer);
imgEdit.appendTo(divActionButtons);
imgSave.appendTo(divActionButtons);
imgClose.appendTo(divActionButtons);
divValueContainer.appendTo(divFieldContainer);
divActionButtons.appendTo(divFieldContainer);
$("#" + fieldId).replaceWith(divFieldContainer);
spanValue.attr({id:fieldId});
}
$(function () {
createEditableField("teste123");
});
</script>
<div id="fieldcontainer-teste123">
<div id="valuecontainer-teste123">
<input value="Texto que será alterado" id="old-teste123-value" type="hidden">
<span id="teste123">Texto que será alterado</span>
</div><div id="actionButtons-teste123">
<img src="edit.png" id="editImg-teste123">
<img src="Save.png" id="saveImg-teste123">
<img src="close.png" id="closeImg-teste123">
</div>
</div>
Cleyton Caetano
Curtir tópico
+ 0
Responder
Posts
27/08/2014
Cleyton Caetano
Descreva o erro parceiro, abraço
o problema é que deveria o texto não fica editável no final, fica apenas como texto normal....
Responder
27/08/2014
Lucas Burg
Seguinte amigo, testei aqui e você deve fazer o seguinte:
colocar seu html em perfeita estrutura ex(html,head,body);
usar o jquery migrator por causa do metodo live utilizado nesse plugin.
retirar essas tags "<img src="edit.png" id="editImg-teste123">
<img src="Save.png" id="saveImg-teste123">
<img src="close.png" id="closeImg-teste123">"
porque o plugin gera os btns dinamicamente.
só pra confirmar não foi você que escreveu isso né ?
abraço
colocar seu html em perfeita estrutura ex(html,head,body);
usar o jquery migrator por causa do metodo live utilizado nesse plugin.
retirar essas tags "<img src="edit.png" id="editImg-teste123">
<img src="Save.png" id="saveImg-teste123">
<img src="close.png" id="closeImg-teste123">"
porque o plugin gera os btns dinamicamente.
só pra confirmar não foi você que escreveu isso né ?
abraço
Responder
27/08/2014
Cleyton Caetano
Seguinte amigo, testei aqui e você deve fazer o seguinte:
colocar seu html em perfeita estrutura ex(html,head,body);
usar o jquery migrator por causa do metodo live utilizado nesse plugin.
retirar essas tags "<img src="edit.png" id="editImg-teste123">
<img src="Save.png" id="saveImg-teste123">
<img src="close.png" id="closeImg-teste123">"
porque o plugin gera os btns dinamicamente.
só pra confirmar não foi você que escreveu isso né ?
abraço
colocar seu html em perfeita estrutura ex(html,head,body);
usar o jquery migrator por causa do metodo live utilizado nesse plugin.
retirar essas tags "<img src="edit.png" id="editImg-teste123">
<img src="Save.png" id="saveImg-teste123">
<img src="close.png" id="closeImg-teste123">"
porque o plugin gera os btns dinamicamente.
só pra confirmar não foi você que escreveu isso né ?
abraço
não, não foi eu! eu peguei o código e fiz algumas alterações!
fiz o que você pediu e ficou assim!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
.invisible {
display: none;
}
.visible {
display:block;
}
.left{
float: left;
margin-right: 3px;
}
</style>
<script>
var visible = function(element){
$(element).removeClass("invisible");
$(element).addClass("visible");
}
var invisible = function(element){
$(element).removeClass("visible");
$(element).addClass("invisible");
}
var createEditableField = function (fieldId){
createEditableHTML(fieldId);
$('#editImg-' + fieldId).live('click', function(){
var val = $("#" + fieldId).html();
$("#old-" + fieldId + "-value").val(val);
$("#" + fieldId)
.replaceWith("<input id='" + fieldId + "-text' class='left' value='" + val +"'/>");
invisible(this);
visible("#saveImg-" + fieldId);
visible("#closeImg-" + fieldId);
$("#" + fieldId + "-text").focus();
});
$('#saveImg-' + fieldId).live('click', function(){
var val = $("#" + fieldId + "-text").val();
$("#" + fieldId + "-text")
.replaceWith("<span id='" + fieldId + "' class='left'>" + val +"</span>");
visible(this);
visible("#editImg-" + fieldId);
invisible("#saveImg-" + fieldId);
invisible("#closeImg-" + fieldId);
});
$('#closeImg-' + fieldId).live('click', function(){
var val = $("#old-" + fieldId + "-value").val();
$("#" + fieldId + "-text")
.replaceWith("<span id='" + fieldId +"' class='left'>" + val +"</span>");
visible(this);
visible("#editImg-" + fieldId);
invisible("#saveImg-" + fieldId);
invisible("#closeImg-" + fieldId);
});
}
var createEditableHTML = function(fieldId){
var divFieldContainer = $('<div>').attr({id: 'fieldcontainer-' + fieldId});
var divValueContainer = $('<div>').attr({id: 'valuecontainer-' + fieldId, class: 'left'});;
var inputOldValue = $('<input>').attr({type: 'hidden', id:'old-' + fieldId + '-value'});
var spanValue = $('<span>').attr({id:fieldId + '-value', class: 'left'});
spanValue.html($("#" + fieldId).html());
var divActionButtons = $('<div>').attr({id: 'actionButtons-' + fieldId, class: 'left'});
var imgEdit = $('<img>').attr({id:'editImg-' + fieldId, class: 'visible left', src: 'edit.png'});
var imgSave = $('<img>').attr({id:'saveImg-' + fieldId, class: 'invisible left', src: 'Save.png'});
var imgClose = $('<img>').attr({id:'closeImg-' + fieldId, class: 'invisible left', src: 'close.png'});
inputOldValue.appendTo(divValueContainer);
spanValue.appendTo(divValueContainer);
imgEdit.appendTo(divActionButtons);
imgSave.appendTo(divActionButtons);
imgClose.appendTo(divActionButtons);
divValueContainer.appendTo(divFieldContainer);
divActionButtons.appendTo(divFieldContainer);
$("#" + fieldId).replaceWith(divFieldContainer);
spanValue.attr({id:fieldId});
}
$(function () {
createEditableField("teste123");
});
</script>
<meta http-equ
iv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<body>
<div id="fieldcontainer-teste123">
<div id="valuecontainer-teste123">
<input value="Texto que será alterado" id="old-teste123-value" type="hidden">
<span id="teste123">Texto que será alterado</span>
</div><div id="actionButtons-teste123">
</div>
</div>
</body>
</html>
e ficou assim!
[img]http://arquivo.devmedia.com.br/forum/imagem/378257-20140822-164806.png[/img]
mas não edita!
e usando o
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
não deu resultado nenhum :(
Responder
27/08/2014
Lucas Burg
retira isso >>>> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
doctype html5 é assim >>> <!DOCTYPE html>
coloca assim logo depois do head >>>
<meta charset="utf-8">
<title>teste</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
só ajustar, posta ai se deu certo
doctype html5 é assim >>> <!DOCTYPE html>
coloca assim logo depois do head >>>
<meta charset="utf-8">
<title>teste</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
só ajustar, posta ai se deu certo
Responder
27/08/2014
Cleyton Caetano
retira isso >>>> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
doctype html5 é assim >>> <!DOCTYPE html>
coloca assim logo depois do head >>>
<meta charset="utf-8">
<title>teste</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
só ajustar, posta ai se deu certo
doctype html5 é assim >>> <!DOCTYPE html>
coloca assim logo depois do head >>>
<meta charset="utf-8">
<title>teste</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
só ajustar, posta ai se deu certo
hó Burg, deu tudo certo! só que não grava o texto! quando atualiza a página! ele fica volta para o que estava! :(
mais bem, deixa eu te apresentar meu trabalho! meu código ficou assim agora!
<div id="fieldcontainer-status"> <div id="valuecontainer-status"> <input value="" id="old-status-value" type="hidden" /> <p><span id="status"><?php echo $status_user; ?></span></p> </div><div id="actionButtons-status"> </div> </div>
só que eu quero que quando a pessoa editar o texto o texto da variável seja alterado no BD também! como eu posso fazer isso?
Responder
Clique aqui para fazer login e interagir na Comunidade :)
