Criando um campo editável com JQuery

SQL

22/08/2014

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!

<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

Cleyton Caetano

Curtidas 0

Respostas

Cleyton Caetano

Cleyton Caetano

22/08/2014

alguém pra ajudar?
GOSTEI 0
Lucas Burg

Lucas Burg

22/08/2014

Descreva o erro parceiro, abraço
GOSTEI 0
Cleyton Caetano

Cleyton Caetano

22/08/2014

Descreva o erro parceiro, abraço


o problema é que deveria o texto não fica editável no final, fica apenas como texto normal....
GOSTEI 0
Lucas Burg

Lucas Burg

22/08/2014

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
GOSTEI 0
Cleyton Caetano

Cleyton Caetano

22/08/2014

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

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 :(
GOSTEI 0
Lucas Burg

Lucas Burg

22/08/2014

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
GOSTEI 0
Cleyton Caetano

Cleyton Caetano

22/08/2014

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


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?
GOSTEI 0
POSTAR