edição de texto com java script

mmillers · Janeiro 2, 2014

Boa tarde pessoal,

Estou com um probleminha aqui e gostaria de uma ajuda.

Vamos por parte:

Tenho um arquivo php que lê os dados do banco e joga na tela, até aqui tudo certo.

Eu faço isso utilizando um while e mysql_fetch_array().

Meu script de edição funciona na primeira vez que o laço é executado, na demais vezes o "salvar" e o "cancelar" ficam estáticos, sem a ação do script. Segue abaixo o código.

Outra coisa que acontece é que estou com problema na hora de salvar, coloquei um "hidden" para armazenar o id e preciso passar esse id na hora de salvar, posso passar por get ou como faço?

Se alguém possuir uma idéia diferente para que estou usando pode ficar a vontade para dizer

<?php
require_once 'funcao.php'; //conecta e seleciona o banco
conection(); // abre conexao
function checkValues($value) {
    $value = nl2br($value);
    if (get_magic_quotes_gpc()) {
        $value = stripslashes($value);
    }
    $value = strtr($value, array_flip(get_html_translation_table(HTML_ENTITIES)));
    $value = strip_tags($value);
    $value = mysql_real_escape_string($value);
    $value = htmlspecialchars($value);
    $value = nl2br($value);
    return $value;
}
if ($_REQUEST['text']) {
    $text = checkValues($_REQUEST['text']);
    mysql_query("update tabela set texto ='" . $text . "' where id =1");
    $result = mysql_query("SELECT * from tabela where id =1");
} else {
    $result = mysql_query("SELECT * from tabela where id =1");
}
?>
<!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" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#save').hide();
                $('#cancel').hide();
                $('#editPanel').click(function() {
                    $('#editPanel').attr('contentEditable', true);
                    $('#editPanel').focus();
                    $('#editPanel').css('cursor', 'text');
                    $('#save').fadeIn();
                    $('#cancel').fadeIn();
                });
                $('#save').click(function() {
                    var text = $('#editPanel').html();
                    //alert(text);
                    $("#Mesg").html('<img  src="load.gif" id="loader" />');
                    $.ajax({
                        type: "POST",
                        url: "ProUpdate.php?text=" + text,
                        success: function() {
                            $("#Mesg").html('Text Updated !');
                            $('#editPanel').attr('contentEditable', false);
                            $('#editPanel').css('cursor', 'pointer');
                            $('#save').fadeOut();
                            $('#cancel').fadeOut();
                        }
                    });
                });
                $('#cancel').click(function() {
                    $('#editPanel').attr('contentEditable', false);
                    $('#editPanel').css('cursor', 'pointer');
                    $('#save').fadeOut();
                    $('#cancel').fadeOut();
                });
            });
        </script>
    </head>
    <body>
	<div>
            <?php
                $mes = $_GET['id'];
                $ano = $_GET['ano'];
                $query = "SELECT * FROM tabela WHERE MONTH(data) = MOD(MONTH('$ano-$mes-01'), 12)";
                $result = mysql_query($query);
                while ($d = mysql_fetch_array($result)) {
                    ?>
                    <li class="widget color-blue">  
                        <div class="widget-head">
                            <h3>Anunciante</h3>
	<input type="hidden" name="<?php $d[id]?>" value="<?php $d['id']?>">
                        </div>
                        <div class="widget-content">
                            <p id="editPanel">
                                <?php echo $d['texto']; ?>
                            </p>
		       <a href="#" id="save" class="save">Salvar</a>
                       <a href="#" id="cancel" class="cancel">Cancelar</a>
                        </div>
                    </li>
                <?php 
		}
		?>
        </div>
    </body>
</html>

Obrigado.

Keven Jesus_164006 · Janeiro 2, 2014

no caso teu php tem que ficar em outra pagina ..... e vc chama ele via ajax os resultados e amarneza nos html para que qual houver atualização ele sozinho faça isto ....

agora tua duvida sobre id tu pode passa no campo data do ajax eu acho que tu nao conhece ....

em vez de passa na url os valores para leitura vc passa em um campo espesifico que manda tudo de acordo com seu type no caso seria praticament isso ....

url: "ProUpdate.php",
type: 'POST',
data: "text=" + text + "&id="+variavel do id aqui <<< ,

continua leitura do codigo ....

Lucas Guima · Janeiro 3, 2014

Quando você executa um, você está manipulando todos. É preciso utilizar o $(this) ao invés de repetir o seletor que abrange todos elementos.

Aproveitando, dá uma olhada: Diferenças entre ID e Classes.

mmillers · Janeiro 3, 2014

Quando você executa um, você está manipulando todos. É preciso utilizar o $(this) ao invés de repetir o seletor que abrange todos elementos.

Aproveitando, dá uma olhada: Diferenças entre ID e Classes.

Bom dia Lucas,

dei uma lida no link que você coloco e não sei se minha idéia está correta, mas o se eu utilizar Classes ou invés de ID meu código funcionaria?

Se a resposta for sim, pode me mostrar como fazer isso, sou novo nisso, fiz umas tentativas aqui porém não obtive sucesso.

abraço.

Lucas Guima · Janeiro 3, 2014

se eu utilizar Classes ou invés de ID meu código funcionaria?

Negativo. O texto foi só um "plus a mais" para você estruturar melhor seu código.

Dentro do evento, você deve utilizar o $(this) para referenciar apenas os elementos dentro daquele que o disparou.

mmillers · Janeiro 3, 2014

Negativo. O texto foi só um "plus a mais" para você estruturar melhor seu código.

Dentro do evento, você deve utilizar o $(this) para referenciar apenas os elementos dentro daquele que o disparou.

Certo, mas não ficou bem claro pra mim onde eu colocaria ele no meu código exatamente?

Lucas Guima · Janeiro 3, 2014

$('.panel').click(function() {
    $(this).find('.button').fadeIn();
});

Vai afetar apenas o botão dentro do painel, não todos os botões.

mmillers · Janeiro 6, 2014

$('.panel').click(function() {
    $(this).find('.button').fadeIn();
});
Vai afetar apenas o botão dentro do painel, não todos os botões.

Lucas, parece que o FadeIn() e o FadeOut() não aceita o $(this), eles não aparecem, quando aparecem não desaparecem, o que estou fazendo errado?

Meu código ficou assim:

$(document).ready(function() {
                 $(this).find('.save').hide();
                 $(this).find('.cancel').hide();
                $('.editPanel').click(function() {
                    $('.editPanel').attr('contentEditable', true);
                    $('.editPanel').focus();
                    $('.editPanel').css('cursor', 'text');
                    $(this).find('.save').fadeIn();
                    $(this).find('.cancel').fadeIn();
                });
                $('.save').click(function() {
                    var text = $('.editPanel').html();
                    //alert(text);
                    $("#Mesg").html('<img  src="load.gif" id="loader" />');
                    $.ajax({
                        type: "POST",
                        url: "ProUpdate.php?text=" + text,
                        success: function() {
                            $("#Mesg").html('Text Updated !');
                            $('.editPanel').attr('contentEditable', false);
                            $('.editPanel').css('cursor', 'pointer');
                            $(this).find('.save').fadeOut();
                            $(this).find('.cancel').fadeOut();
                        }
                    });
                });
                $('.cancel').click(function() {
                    $('.editPanel').attr('contentEditable', false);
                    $('.editPanel').css('cursor', 'pointer');
                    $(this).find('.save').fadeOut();
                    $(this).find('.cancel').fadeOut();
                });

Lucas Guima · Janeiro 8, 2014

Acho que não fui claro quanto ao uso do $(this), vou tentar explicar melhor.

Por exemplo, você tem uma listagem de pedidos com um button para marcar como entregue.

Todos os checkbox possuem uma classe chamada "pedido", o que identifica que aqueles checkboxes são semelhantes.

E cada botão executa um procedimento qualquer, referente ao pedido da linha em que ele se encontra para marcá-lo como entregue.

Depois disso, você então precisa esconder o botão, já que não tem mais utilidade.

Para tal, você define o seguinte evento:

$(document).ready(function(){
    $('.pedido').click(function(){
        // procedimento qualquer
        $('.pedido').hide();
    });
});

O qual será executado quando qualquer elemento com a classe "pedido" for clicado, em nosso caso, os botões. Ou seja, o seletor $('.pedido') afeta todos os nossos checkboxes.

Portanto, não podemos, depois de executar o "procedimento qualquer", utilizar o mesmo seletor para esconder o botão, pois ele esconderá todos checkboxes.

Para isso, utilizamos o $(this), que faz referência ao elemento que acionou o evento, ou seja, apenas o botão de uma única linha, como segue:

$(document).ready(function(){
    $('.pedido').click(function(){
        // procedimento qualquer
        $(this).hide();
    });
});

Espero que tenha esclarecido um pouco mais.

Arquivado

edição de texto com java script

Recommended Posts

mmillers 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Keven Jesus_164006 39

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

mmillers 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

mmillers 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

mmillers 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante